Back to logs
2026-03-18 websitedocs

Project website launched

With the core application logic well underway, it felt like the right time to give MapXr a proper home on the web. This entry covers the decisions behind the site's technical stack and structure.

Stack choices

The site lives inside the existing monorepo at mapxr-site/. Since the app itself already uses Svelte 5 and Vite, reusing those tools was a natural fit. No context switching, and the same Tailwind + DaisyUI pair used in the main UI carries over cleanly.

  • Svelte 5 with runes ($state, $derived, $effect)
  • Tailwind CSS v4 via its native Vite plugin (no postcss.config needed)
  • DaisyUI v5 for component classes (navbar, hero, card, steps, etc.)
  • Hash-based routing: no router library, just window.location.hash and a $state rune

Why hash routing?

GitHub Pages serves static files from a single directory. Any URL that doesn't correspond to an actual file returns a 404. Hash routing sidesteps this entirely. The browser never sends the fragment to the server, so #/docs/triggers and #/devlog both load index.html without any redirect tricks.

Lazy-loaded doc pages

Each documentation topic is a plain .svelte file under src/docs-pages/. Vite's import.meta.glob discovers them at build time and splits each into its own JS chunk. Navigating to a doc page fetches only that page's chunk. The rest stay unloaded until needed. The same pattern is used for devlog articles.

Theme

DaisyUI's corporate theme is the light default; business is the dark alternative. The toggle reads prefers-color-scheme on first visit so the site matches the user's OS preference without any stored setting.

Deployment

A GitHub Actions workflow at .github/workflows/deploy-site.yml triggers on any push to main that touches mapxr-site/**. It runs npm ci && npm run build then pushes mapxr-site/dist to the gh-pages branch via peaceiris/actions-gh-pages.