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 5 Static-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 strict Across pages, components, and the prose-scrub package. astro check in CI.
- Search
- Pagefind Built into the static output, lazy-loaded on first ⌘K. No backend service.
- Typography
- Inter Variable + JetBrains Mono Variable Self-hosted .woff2 files, Latin subset, ~80 KB total gzipped, preloaded.
- Colours
- Hand-tuned palette Dark 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 + Lucide Brand monogram is a single-stroke SVG. Theme toggle uses Lucide sun/moon, animated via CSS.
- Knowledge Graph
- react-force-graph-2d Lazy-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
- Web3Forms HTML form post; relay sends to inbox. Honeypot + spam scoring. No backend code.
- Hosting
- Hostinger shared, Apache India 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 CSP HSTS preload, strict CSP (sha256-hashed inline scripts), Referrer-Policy, Permissions-Policy. RFC 9116 security.txt at /.well-known/.
- Offline / PWA
- Hand-written service worker Stale-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.