Colophon

Every garden deserves a small sign by the gate explaining what grows here and how. This is that sign — and, conveniently, a demonstration of everything the site can do.

What it's made of

This site is a few hundred lines of Node that turn folders of Markdown into static HTML. No framework, no client-side rendering, no database — just files. The heavy lifting is done by marked and a small pile of build-time helpers around it.

The philosophy is stubbornly plain:

• Static first — everything is computed at build time and served as flat files.
• Almost no JavaScript — the only script on the whole site highlights the table of contents as you scroll.
• Legible by hand — you could read the generated HTML and understand it.

The build does three things, in order:

1. Read each posts/*/index.md and parse its frontmatter.
2. Render the Markdown — highlighting code, typesetting math, numbering figures.
3. Write everything to output/, ready to serve.

Writing a post means creating posts/my-slug/index.md with a title, a date, and a one-line intro. That is the entire interface.

The flowers

Each post grows its own pixel flower — planted beside the title, tucked into the favicon, and animated on hover. It isn't random; it's deterministic. The slug is hashed into a seed, and a tiny generator draws the same flower every time:

function mulberry32(seed) {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

The flower's head is a mirrored bitmask on a $7 \times 4$ grid: the left half — sixteen cells — decides the silhouette, and the right half mirrors it for symmetry. After throwing out the degenerate shapes, the space of distinct flowers is large:

$$N \approx 2^{16} \times 3 \times 6 \times 9 \times 10$$

— a few million combinations, of which thousands are distinct at a glance. So colophon and on-attention land in completely different corners of the garden.

Words and numbers

Prose is set in a serif face at a measure of about sixty characters; code and the interface use a sans. Math is rendered at build time, so an inline aside like $e = \lim_{n\to\infty}\left(1+\tfrac{1}{n}\right)^{n}$ costs the reader nothing — no scripts, just typeset glyphs from KaTeX.

The details are not the details. They make the design. — Charles Eames

Three things I lean on constantly: inline code for names, fenced blocks for examples, and the humble horizontal rule to mark a turn in thought.

---

That's the whole machine. The source lives on GitHub; to say hello, the links are back in the garden.