Hello, world

Welcome. This post exists so the MDX pipeline can be eyeballed end-to-end - every block-level construct the renderer supports appears at least once below. If something here looks wrong, the bug is upstream of the post.

Headings

The post title above renders as an h1 outside the prose body, so MDX content starts at h2. The lower levels follow.

Third-level heading

Fourth-level heading

Paragraphs and inline marks

A paragraph mixes strong, emphasis, strikethrough, and inline code. Links can be internal - these route through next/link - or external, which open in a new tab with the right rel flags. Both behaviours are wired up in src/mdx-components.tsx.

Lists

An unordered list:

• First item
• Second item, with bold mid-sentence
• Third item with a link

An ordered list:

1. Step one
2. Step two
3. Step three

A nested list:

• Top-level
  • Nested once
    • Nested twice
• Another top-level

A GFM task list:

• Wire up the MDX compiler
• Render frontmatter-driven post header
• Write more posts

Blockquote

Designers know they have achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

• Antoine de Saint-Exupéry

Code

Inline code looks like const answer = 42.

A fenced TypeScript block - syntax highlighting goes through rehype-pretty-code with shiki, themed light + dark to match the site:

type Greeting = { name: string }
 
export function hello({ name }: Greeting): string {
  return `Hello, ${name}.`
}

A shell command, for completeness:

pnpm dev

Images

Markdown image syntax routes through next/image via the MDX component map, so each image is responsive, lazy-loaded, and served as AVIF/WebP where supported. Relative paths resolve against the post folder - drop assets next to index.mdx and reference them with ./name.ext.

Tables

Horizontal rule

Three dashes between sections render as a thematic break:

That's the lot. If you can see all of the above rendered correctly, the pipeline is healthy.