MDX Reference — Components & Formatting

Everything available when writing a post. h1 is reserved for the page title rendered from frontmatter — content starts at h2.

Headings

## h2 — Section heading
### h3 — Subsection
#### h4 — Minor heading

h2 — Section heading

h3 — Subsection

h4 — Minor heading

Text

Regular paragraph. Bold, italic, strikethrough, and inline code.

Smartypants converts “straight quotes” to “curly quotes”, — to em-dashes, and … to ellipsis automatically.

Links look like this.

Lists

Unordered:

• First item
• Second item
  • Nested item
  • Another nested item
• Third item

Ordered:

1. First step
2. Second step
3. Third step

Task list (GFM):

• Done
• Not done

Blockquotes

A blockquote. Good for pulling out an idea or a direct quote from something you’ve read.

Multiple paragraphs work fine.

Code

Inline: const x = 1

Fenced block — language identifier enables syntax highlighting:

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        Button("Count: \(count)") {
            count += 1
        }
    }
}

type Post = {
    title: string;
    date: Date;
    kind: 'essay' | 'note' | 'technical' | 'project-log' | 'cheat-sheet';
};

npm run dev
npm run build

Tables (GFM)

Footnotes

Inline footnote

Reference-style footnote¹ for longer notes.

Custom Components

Injected automatically — no import needed in the MDX file.

Callout

Three type values: note (default), tip, warn. Optional title prop overrides the label.

<Callout>Default note.</Callout>
<Callout type="tip">A tip.</Callout>
<Callout type="warn">A warning.</Callout>
<Callout type="note" title="Custom title">Custom label.</Callout>

SectionBreak

Visual break between major sections. Three variants, three spacings.

<SectionBreak />
<SectionBreak variant="dots" />
<SectionBreak variant="asterism" />
<SectionBreak spacing="tight" />
<SectionBreak spacing="loose" />

JSX Expressions

MDX lets you embed JavaScript expressions inline:

Current year: {new Date().getFullYear()}
Conditional: {someCondition && <strong>shown if true</strong>}

Current year: 2026

Frontmatter Reference

Fields available per collection type:

# logs (this collection)
title: "Post Title"
dek: "Optional subtitle shown under the title"     # optional
date: 2026-01-15
updated: 2026-06-01                                 # optional, for living docs
kind: project-log
status: draft | published                           # default: draft
openness: provisional | confident                   # default: provisional
tags: ["tag-one", "tag-two"]
series: "series-name"                               # optional
readingTime: 5                                      # optional override (minutes)

# essays — same but dek is required, kind: essay
# notes — same but dek optional, kind: note
# technical — same but dek required, kind: technical
# cheat-sheets — uses `updated` instead of `date`, kind: cheat-sheet