Anatomy of a Post — Brodin Vance

This entry is a template. It exists to show — in one place — everything a post can do, so the next one is a matter of deleting what you don’t need. Everything below the frontmatter is fair game to copy.

Frontmatter: the contract

Every post starts with a frontmatter block fenced by ---. The fields are typed, so a typo fails the build instead of shipping silently.

title — shown in the log, the page heading, and the browser tab.
description — one sentence. It’s the dek under the title and the meta description for search and social cards.
date — YYYY-MM-DD. Drives sort order (newest first) and the timestamp rail.
topics — any of quantum, math, gamedev, cooking. Powers the filter chips and the topic archive pages. Leave it [] for none.
draft — true hides the post in production but keeps it visible in npm run dev. Use it for work in progress.
cover — optional image, rendered at the top of the post. Drop a file beside this .mdx and point to it with ./name.png.

Headings build the table of contents

## and ### headings are pulled into the contents box automatically. The box only appears once a post has three or more headings or runs four minutes or longer — short notes stay clean.

This is a sub-heading

Nest with ###. It indents under its parent in the contents list. Going deeper than ### is intentionally ignored; if a post needs ####, it probably needs to be two posts.

Text: the everyday tools

Body copy is set in Newsreader at a comfortable reading measure. Inline, you have bold for emphasis, italic for terms and titles, and inline code for identifiers. Links look like this one and underline in honey.

Blockquotes pull a line out of the flow. Good for an epigraph, a cited sentence, or a point worth slowing down on.

Use a horizontal rule when the subject turns hard:

…and the writing picks up on the other side.

Lists

Unordered, when order doesn’t matter:

Movement first, story second.
One mechanic, fully explored, beats five half-built.
Ship the ugly version, then make it nice.

Ordered, when it does:

Read the chapter once without a pen.
Read it again and work every example.
Re-derive the key result from memory the next day.

Math renders with KaTeX

Inline math sits in the sentence, like the inner product $\langle \psi | \phi \rangle$ or a quick $E = mc^2$ . Wrap it in single dollar signs.

Display math gets its own line with double dollar signs:

\langle \psi | \phi \rangle = \int_{-\infty}^{\infty} \psi^*(x)\, \phi(x)\, dx

It handles the usual machinery — sums, fractions, Greek, operators:

\hat{H}\psi = -\frac{\hbar^2}{2m}\frac{d^2\psi}{dx^2} + V(x)\,\psi

Code blocks are syntax-highlighted

Fenced blocks render through Shiki in the site’s warm dark theme. Tag the fence with a language for highlighting:

import numpy as np

def particle_in_box_energies(n_levels=5, L=1.0):
    """E_n = n² π² ℏ² / (2mL²), in natural units."""
    return [(n**2 * np.pi**2) / (2 * L**2) for n in range(1, n_levels + 1)]

for n, E in enumerate(particle_in_box_energies(), 1):
    print(f"E_{n} = {E:.4f}")

It works across languages — here’s the same idea of “small, self-contained” in GDScript:

func emit_resonance(amount: float) -> void:
    resonance = clampf(resonance + amount, 0.0, MAX_RESONANCE)
    resonance_changed.emit(resonance)

Footnotes

Drop a marker in the prose¹ and the reference collects at the foot of the post. They’re good for asides that would otherwise break a sentence’s momentum.²

That’s the whole kit

Title, dek, dates, topics, headings, text, quotes, rules, lists, math, code, and footnotes. To write the next post: copy this file, rename it to something URL-friendly like my-new-post.mdx, replace the frontmatter and body, and push. Plain Markdown? Save it as .md instead — only posts that need math or components have to be .mdx.

Footnotes are numbered automatically in the order they appear, no matter what number you type in the marker. ↩
They link both ways — click the number to jump down, click the arrow to jump back. ↩