cat ./colophon
Colophon.
How this site is built. Reference for fellow practitioners and anyone curious about why a security architect chose a static Astro site in 2026.
Stack
- Framework
- Astro 5Static-first. Zero client-side JavaScript on most routes; a small bundle (~5 KB) wires the theme toggle, hamburger, command palette, scroll-spy, and reading-progress bar.
- Type system
- TypeScript strictAcross pages, components, and the prose-scrub package. astro check in CI.
- Search
- PagefindBuilt into the static output, lazy-loaded on first ⌘K. No backend service.
- Typography
- Inter Variable + JetBrains Mono VariableSelf-hosted .woff2 files, Latin subset, ~80 KB total gzipped, preloaded.
- Colours
- Hand-tuned paletteDark by default (#0e1014 base), light mode via CSS custom properties. Muted petrol (#7ab4c2) accent used sparingly over warm monochrome surfaces; a small categorical palette clusters the knowledge graph and practice cards.
- Icons
- Hand-drawn SVG + LucideBrand monogram is a single-stroke SVG. Theme toggle uses Lucide sun/moon, animated via CSS.
- Knowledge Graph
- react-force-graph-2dLazy-loaded on /lab/ only; ~60 KB JS for that one route. Static SVG fallback for JS-disabled and small screens.
- Analytics
- Google Analytics 4 (consent-gated)gtag.js loads only after the visitor accepts the cookie banner; nothing is requested before consent. Custom event on reaction-widget clicks.
- Newsletter
- Kit (formerly ConvertKit)Raw HTML form post, zero JS. Subscribers tagged per source.
- Contact form
- Web3FormsHTML form post; relay sends to inbox. Honeypot + spam scoring. No backend code.
- Hosting
- Hostinger shared, ApacheIndia region. CI/CD: GitHub Actions builds Astro → force-pushes dist/ to a deploy branch → Hostinger git auto-deploy pulls into public_html.
- Security headers
- .htaccess + Astro experimental CSPHSTS preload, strict CSP (sha256-hashed inline scripts), Referrer-Policy, Permissions-Policy. RFC 9116 security.txt at /.well-known/.
- Offline / PWA
- Hand-written service workerStale-while-revalidate for HTML, cache-first for static assets. Offline page at /offline.html.
Design philosophy
- Static unless interactive. Hydration is opt-in per island, not the default.
- Zero third-party cookies. No retargeting pixels. No marketing-attribution scripts.
- Tight CSP. No 'unsafe-inline' for scripts; styles use sha256 hashes.
- Reading is the product. Every UX choice runs through 'does this serve the reader?'.
- Plain HTML where possible. Form posts beat fetch-with-JS for newsletter and contact.
- Tests are the spec. 400+ tests across Vitest, Playwright, and prose-scrub. CI green before deploy.