Back home

The Colophon

Last updated · May 2026

This page records how the site is put together: the stack, the type, the palette, the hosting, and the machine-readable layer that sits under the writing.

01 · The stack

The front end is Next.js 15 running the App Router on React 19, written in TypeScript and rendered on the server. Styling is Tailwind CSS v4, configured CSS-first in app/globals.css rather than through a JavaScript config file. Components come from shadcn/ui in its new-york style over the Radix primitives, with lucide-react supplying the icons.

02 · Typefaces

Three typefaces carry the page: Newsreader, a serif, for headings and the wordmark; Onest for body copy; and JetBrains Mono for labels, micro-labels and code. All three are downloaded at build time and self-hosted through next/font, so the browser never talks to a third-party font host, and each is declared with display: swap so text paints immediately in a fallback face.

03 · Palette

Everything is painted from a small set of custom properties. The paper tones are #f1ede5 for the page and #e6e0d3 for recessed bands, with #faf7f0 reserved for cards. The ink tones run from #15171c through #3a3d44 to #6f6f6a, and hairlines use #d8d2c5 and #e4ddcd. Two accents do the actual pointing: a navy at #1f3a5f and a sienna at #8a4a23, with a slate at #475569 standing in wherever an older pastel token used to be.

04 · Writing and content

Posts are plain Markdown with YAML front matter, one folder per post under blog/contents, parsed with gray-matter and rendered through unified with remark and rehype, including syntax highlighting and a sanitiser pass. Events follow the same folder-per-entry model. A content contract check runs before every build, so a post that is missing its front matter or its feature image fails the deploy instead of shipping.

05 · Brand mark and images

The favicon and the home-screen icons are generated from the same rounded-square monogram the navbar shows: the icon script lifts the letter J as an outline from Newsreader Italic, rasterises it with sharp, and writes the ICO, the 192 and 512 pixel PNGs and the 180 pixel Apple touch icon, together with the web app manifest. Feature images are served through the Next image pipeline, which emits AVIF and WebP variants on demand.

06 · Hosting and delivery

The site runs as a Node 22 container started with next start on port 3000, reaching the internet through a Caddy reverse proxy on a shared Docker network that terminates HTTPS. A deploy builds the image with Docker and replaces the running container, keeping the image optimiser's cache in a named volume so the first visitor after a deploy does not pay to re-encode everything. The same repository also carries a Netlify configuration for an alternative target, and the canonical origin is supplied by environment variable or config.toml rather than hardcoded.

07 · The machine-readable layer

Alongside the HTML, the site publishes an RSS feed, a sitemap, and a robots.txt that names the AI crawlers it welcomes. Every page has a Markdown twin served as text/markdown, there is an llms.txt summary for language models, a JSON-LD graph describing the person and the site, and a Model Context Protocol server at /api/mcp that exposes the same content as tools and resources.

08 · Corrections

Spotted something wrong here, or a fact that has gone stale? The contact form reaches me.

ChatGPTClaudePerplexity