Colophon

How johnie.eu is built in code: application structure, content pipeline, runtime features, and credits.

Updated

A colophon is where a book explains how it was made: the type, the paper, the press, and the people behind it. This page does the same for johnie.eu.

The service and infrastructure choices behind the site are covered elsewhere on johnie.eu. This page stays on the implementation side: how the site is structured in code, how content moves through it, and which libraries shape the experience.

Application stack

The site itself is built with a deliberately plain stack:

The goal is portability: content in the repository, routes in code, server behavior kept close to the application, and as little provider-specific glue as possible.

Rendering pipeline

  • Page and post bodies render through react-markdown with shared custom components.
  • Post pages add Shiki syntax highlighting through a small rehype pipeline instead of shipping a separate client-side highlighter.
  • Internal and external links go through a shared tracked-link layer so routing, outbound-link behavior, and analytics tagging stay consistent.
  • Typography, colors, spacing, and prose styles are all driven from the local Tailwind theme and app stylesheet.

Stack Desk

The site now includes Stack Desk, a small on-site assistant focused only on johnie.eu.

  • The UI streams answers with TanStack AI and Streamdown.
  • The server route at /api/chat builds a prompt from the published site content and sends the conversation to Mistral AI.
  • The same generated knowledge base is also exposed at /api/site-content as markdown.
  • The assistant is intentionally narrow: it only answers questions about this site and its published content.
  • Most visits never touch a model. Mistral is only called if you open Stack Desk and send a message.

Interaction and analytics

  • CTA clicks, post opens, stack-card clicks, outbound-link clicks, and read-depth milestones are tracked as small, explicit events.
  • Outbound-link tracking is centralized so the same link policy controls target, rel, host labeling, and analytics payloads.
  • Analytics URLs are sanitized down to standard UTM parameters before they are sent.
  • The privacy page documents the user-facing side of that behavior.

Authoring workflow

Most code changes are written through OpenCode pointed at Mistral AI. That pairing matters here because both sides keep an exit available: OpenCode is provider-neutral, and Mistral ships open-weights models alongside the hosted API.

The mechanics stay intentionally boring: files in a repository, markdown for content, typed collections for structure, and a single web app that owns both the UI and the server routes.

Typography and assets

Brand marks

Third-party brand marks used across the site, including logos in stack cards and logos referenced in posts, are sourced from OpenBrand, an open collection of company logos maintained by Ethan Yang and contributors.