In case you’re wondering about the technology powering this project, here’s a quick overview. The current version of this site is built with:
- Astro: a frontend framework and static site generator
- Tailwind: the most widely-used atomic CSS library
- MDX: essentially Markdown with custom components transformed by the Rust-based Sätteri
- Unpic and imagor: responsive images transformed on demand from a self-hosted server
- Pagefind: static full-text search across the entire site
The full source code is available on GitHub, and there’s a page with build stats for anyone curious about how long it takes to compile all this.
Maps
The map component is built with React Map GL, a React wrapper for Mapbox GL JS-compatible libraries. I am using the free and open source MapLibre GL JS library with data sourced from OpenStreetMap with tiles and styles via Protomaps.
Location data is authored as coordinates in MDX frontmatter. At build time every mappable feature is compiled into one compressed directory file; each map selects what it needs by region, theme, or explicit list, and the results are cached on the client. Administrative boundaries are sourced from Overture Maps.
- Protomaps and PMTiles: self-hosted basemap tiles and styles
- MapLibre and React Map GL
- React
- TanStack Query: data fetching and client-side caching
- Zustand: lightweight state management
- Turf: geospatial analysis utilities
- FlatGeobuf: compact storage for administrative boundaries
- kdbush and geokdbush: geospatial indexing for nearby location lookups
Utilities and Tooling
- Astro Lab: a set of plugins and tools for Astro
- TypeScript
- Sharp and Takumi: image processing and OpenGraph image generation
- Transformers.js and USearch: LLM-powered embeddings and vector search for similar content
- D3: scales and projections for the build stats charts and region maps
- Remeda: TypeScript-first utility library
- Zod: TypeScript and runtime data schema validation
- Vite, Vitest, Playwright, and Stryker: bundling, unit tests, end-to-end tests, and mutation tests
- Prettier, type-aware ESLint, Stylelint, mdxlint, Knip, and Fallow, all run from git hooks by Lefthook
- Type set in Lora, Geologica, and Commissioner
- Claude Code and Zed
Hosting
- Caddy: web server for the static site
- Docker Compose: orchestration for the image server, with Nginx caching in front of imagor
- Umami: self-hosted, privacy-respecting analytics
Previous Version
Spectral Codex 1.0 ran on WordPress and a fully-featured theme built with Timber, Twig, and Carbon Fields. An elaborate build system patched together with Gulp and Webpack allowed for a highly optimized output similar to what you might achieve when using Roots ecosystem tools, but the burden of maintenance was significant. Magazine-style image layout was facilitated with lazysizes and a hefty chunk of specialized code. Styling was accomplished with Sass. Finally, interactivity was accomplished entirely without jQuery; everything from comments handling to dropdown menus was 100% TypeScript without any UI framework.
Author
I am a web application developer, photojournalist, urban explorer, and history enthusiast passionate about the open web and documenting my experiences on this planet. This project was founded in the early 2010s and has evolved into a sort of personal Wikipedia of places that interest me (and often the photographs I’ve taken there). I’m originally from Toronto, Canada, but spend most of my time residing in Taiwan.