Hello World

This is the sandbox post. I use it to check that blog features render correctly before relying on them in a real write-up — if something works here, it works everywhere. It doubles as a tour of how this blog works under the hood.

The stack

Every post on this site is an MDX file in a git repo — markdown with the option to drop React components straight into the prose. Next.js statically generates each post page at build time: the markdown is compiled once, on the build server, and what ships to your browser is plain HTML. There's no CMS, no database, and nothing is rendered on demand.

That build step is where the interesting work happens. The markdown runs through a pipeline of small plugins, each transforming the document tree before the next one sees it. Footnotes, tables, and strikethrough come from remark-gfm; link cards — demoed below — come from remark-link-card-plus.

Link cards

Paste a URL on its own line, and at build time it unfurls into a preview card:

ka1ne - Overview

ka1ne has 8 repositories available. Follow their code on GitHub.

github.com

Here's what's happening. When the site builds, the plugin visits that URL and reads its Open Graph meta tags — og:title, og:description, og:image — the same machine-readable summary every site publishes so that Slack, Discord, and Twitter can show rich previews when you paste a link. The fetched metadata is baked into the page as static HTML, so you never wait on it: the card costs nothing at read time, and no third-party service is involved. If a site publishes no metadata, the link simply stays a link.

Hover previews

Inline links get a lighter treatment. The build also unfurls every [text](url) link in a post, and the metadata rides along with the page — so hovering an inline link, like this one to the Next.js docs, floats a small preview card above your cursor. Wikipedia-style: you can peek at where a link goes without committing to the jump. On a touch screen there's no hover, so the link just navigates like normal.

The one catch with doing all this at build time is that previews are frozen until the next deploy. For a blog, that's the right trade — the alternative is fetching another site's metadata on every page view, through a proxy, because browsers (correctly) won't let client-side JavaScript read other origins.

Footnotes

Footnotes are the way to cite references. Drop a marker like this¹ where you want the citation, then define it anywhere in the file — it always renders in a list at the bottom of the post, with a link back to where it was cited.²

The syntax is the same one Obsidian uses, so notes written there carry straight over to the site.

Other markdown

Standard formatting all works: bold, italic, inline code, and links.

More to come.