Hello World

Welcome to the blog. This is a sample post to verify that everything works: syntax highlighting, table of contents, heading anchors, and tags.

Getting started

This blog is built with SvelteKit and mdsvex. Posts are written as .svx files - Markdown with Svelte superpowers.

import { getPosts } from '$lib/server/blog';

const posts = getPosts();
console.log(`Found ${posts.length} posts`);

Why SvelteKit?

SvelteKit provides file-based routing, server-side rendering, and a great developer experience. Combined with mdsvex, writing blog posts feels natural.

Markdown features

You get all the usual Markdown features:

Bold and italic text
Links
Lists (like this one)

Code blocks

Here is a Svelte component:

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>

And some shell commands:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

SvelteKit’s @sveltejs/enhanced-img package generates optimized images at build time. It produces avif and webp formats, responsive srcset attributes, and sets intrinsic width/height to prevent layout shift.

How it works

In your .svelte components, use the enhanced:img element instead of a regular img tag. Point src to a relative file path - the plugin handles the rest at build time.

Best practices

Source images at 2x display resolution - the plugin downscales for smaller devices
Set sizes for large/hero images - e.g. sizes="min(720px, 100vw)"
LCP (above-fold) images - add fetchpriority="high", do NOT add loading="lazy"
Below-fold images - the default loading="lazy" works fine
Standard markdown ![alt](url) renders a plain img with no enhanced processing
External/CDN images - use a regular img tag or a CDN-aware library

See the SvelteKit images docs for the full API reference.