sveltekit-blog-mdx VS MDsveX

If its just a blog, and your not talking 1000s of entries, I'd recommend using https://github.com/rodneylab/sveltekit-blog-mdx

SvelteKit plus mdsvex. There are quite a few examples out there, e.g. https://github.com/rodneylab/sveltekit-blog-mdx.

We will run through using the SvelteKit MDsveX starter but if you already have a SvelteKit site, it might make more since for you to follow along but working on a test branch of your own site. If you are using the starter, let’s get going by cloning it locally:

In this post we see how you can modify a Svelte blog site to respond to some Vim keyboard shortcuts. We'll clone the SvelteKit Blog MDsveX Starter to get things going quicker. Then we will create a new component for responding to keyboard shortcuts and add that to the existing blog post template. If you are not yet familiar with SvelteKit, you can still follow along. If you don't like Svelte then the code can also be adapted for use on React or plain HTML/JavaScript sites. Why don't we press on?

git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-hcaptcha-form cd sveltekit-hcaptcha-form pnpm install cp .env.EXAMPLE .env pnpm run dev

Using a script, if we decide we want to use AVIF images instead of WebP or change our image widths, it is pretty easy to regenerate the data files. Likewise if we decide to go for a plain, dominant colour placeholder instead of the low resolution one. You can see a full working example in the SvelteKit Blog MDsveX starter on the Rodney Lab GitHub page.

We'll start with the SvelteKit MDsveX starter and add a responsive image to the home page. We will see how you can generate a low resolution placeholder as well as an alternative dominant colour placeholder. We will generate a WebP Next-Gen format image together with the original JPEG in different sizes so the image looks good on large retina displays without having to download a huge image for small mobile displays. Using the placeholders, we will eliminate image layout shift.

In this post we took a look at how to customise the SEO meta generated by the MDsveX starter. It might seem a little abstract until you customise it for your own projects, so I would definitely say try using it as a next step. As always I am keen to get feedback and to hear how you have used it. You can clone the entire repo from the Rodney Lab Git Page.

I have just added PWA functionality to the MDsveX starter. All you need to do is customise the website configuration file with with site's name and theme colours, then run a script to generate all the different icon sizes automatically. Here is exactly what you need to do in five simple steps. If you are looking for a more general SvelteKit Tutorial or how to get started with SvelteKit I have a couple of posts you will appreciate.

In the ever-evolving world of web development, content remains king. For sites heavy with documentation, blogs, guides, changelogs, or engineering wikis, Markdown has emerged as the go-to language for crafting readable, maintainable content. However, the standard Markdown might not always fit the bill, especially when you're looking to add a unique touch or specific functionality to your Svelte-powered websites. Enter mdsvex - a Svelte preprocessor that not only understands Markdown but extends its capabilities, allowing developers to introduce custom-flavored Markdown.

I was working on my blog websites. The current method I use to add more posts is using mdsvex(https://github.com/pngwn/MDsveX) it turns my markdown files into post.

Oh right sorry. MDSVEX is a preprocessor for using Svelte components in markdown files. SVX is just the file format for it

If mdsvex is not applicable, I would still look through it's sources to see how they handle it and maybe find some useful ideas. Looks like there are multiple packages that handle all that parsing and preparing: https://github.com/pngwn/MDsveX/tree/master/packages

You can use those components in plain markdown. We will have to write documentation for inlang. Instead of requiring a preprocessor like MDX, MDsvex, or Stripe Markdoc, web components can be used instead. Reducing boilerplate, increasing maintainability and last but not least the community does not have to reinvent the wheel for every markdown preprocessor. Just use the platform. Just use web components in markdown.

SvelteKit plus mdsvex. There are quite a few examples out there, e.g. https://github.com/rodneylab/sveltekit-blog-mdx.

One issue we previously had with parsing Markdown with MDsveX was how to get a list of blogs without embedding all the blog content into some JS files... There's quite a few posts online and that's why I figured I'd talk about it here because it seems to be a common pain with SvelteKit and adapter-static. Ultimately what we did was use route parameters and different endpoints for the different requests, which you can see here.

We’re going to use mdsvex to render our Markdown posts. It’s a Markdown preprocessor for Svelte which allows you to use Svelte templating and components amongst your Markdown.