Code Monkey home page Code Monkey logo

sveltekit-mdsvex-blog's Introduction

sveltekit-mdsvex-blog

Minimalistic blog site template, built with TypeScript, Svelte, SvelteKit and MDsveX.

Live demo

Getting started

First, clone the repository and navigate to the project directory:

git clone https://github.com/mvasigh/sveltekit-mdsvex-blog.git my-blog
cd my-blog

If you want to have a fresh commit history, blow away the .git directory and re-initialize the repository locally:

rm -rf .git
git init

Next, install dependencies with NPM:

npm install # or `pnpm i`

Finally, run the local development server:

npm run dev # or `pnpm dev`

Building for production

This project is pre-configured with @sveltejs/adapter-static. This makes deploying to static site hosts, such as Netlify, super easy. Simply add your site's repository to your static site host of choice, configure the build command to be npm run build and the build output directory to be build.

Starting from scratch

You may want to create your own project from scratch using create-svelte. You can do so easily and add MDsveX support to your project using svelte-add:

  1. Create a new project per the SvelteKit docs
  2. Add MDsveX to your project using svelte-add
  3. Configure your site to your liking; files with the .svelte.md, .md and .svx extensions will be picked up by MDsveX by default

Questions?

Feel free to ask any questions that you have! I am happy to try and answer them. The best way to reach me is by Mastodon, @[email protected], but you can also open an issue in this repository.

sveltekit-mdsvex-blog's People

Contributors

mvasigh avatar trasherdk avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

omargnagy91 alexandrunastase thisisthejay stoneyv mcpengelly nas5w thebrianbug xvburak koficypher yestechgroup nijat markyfyi trasherdk chaichontat amerlander mihaicode jobayer977 taocode jeremyjacob marcosantonastasi muttoni seike460 exdan-is-a-noob-at-io zidane-arkan christiannorbertbraun tarentino76 jastuccio necropreneur

sveltekit-mdsvex-blog's Issues

Performance issues at scale

Right now, this template is set up to load all blog posts' metadata and contents at once into the browser's memory:

sveltekit-mdsvex-blog/src/routes/posts/__layout.svelte

Lines 4 to 12 in 4cde064

const files = import.meta.glob('./*.{md,svx,svelte.md}');
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ page }) {
const slug = page.path.replace('/posts/', '');
const posts = await getAllPosts(files);
const post = fromEntries(posts)[slug];

This can be avoided by doing the same work in an endpoint instead: https://github.com/babichjacob/university-website/blob/84b5e7ff44550910550a3c809ccb9f1402df301b/src/routes/blog/index.json.ts#L6-L23
and fetching from that in the layout (or wherever it's needed, like to show the most recent 3 posts on the website's homepage and all posts on the website's /blog route): https://github.com/babichjacob/university-website/blob/84b5e7ff44550910550a3c809ccb9f1402df301b/src/routes/blog/index.svelte#L3

Problem with post-to-post navigation

If you'll make a link from one post to another - the page won't be updated, only it's metadata (frontmatter). That's because component definition in /src/routes/blog/[slug]/+page.svelte is not reactive and doesn't update when data.component is changed after navigation to another post while the page component itself isn't changed. I've fixed that by adding $: to the component definition, but probably there is a better way to do that:

$: component = data.component as unknown as C;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.