Monetarium — Marketing Site
- Astro 7
- Tailwind CSS v4
- TypeScript
- Cloudflare Workers
- GitHub Actions
- Paged.js
- Vitest
- Claude Code
The public marketing site for the Monetarium chain, built solo as part of the same client engagement as the Monetarium block explorer — a Decred-derived multi-coin chain (base coin VAR plus up to 255 SKA-type coins) positioning itself as commodity-backed monetary infrastructure. The site is deliberately engineered to read as institutional financial infrastructure, not a crypto launchpad: restrained, monochrome, typographic.
Live: monetarium.world
The site
A fully static Astro 7 build (output: 'static') served
from Cloudflare Workers. Seven content routes — home, tokenomics, whitepaper,
philosophy, ways-to-earn, and roadmap — plus an internal design-system reference.
Same undisclosed client as the block explorer; this was a solo frontend build,
where I owned the design system, the content model, and the build/deploy toolchain
end to end.
Engineering highlights
- Ships ~zero JavaScript. Nothing hydrates by default; the only client code is
a couple of tiny vanilla
<script>islands where interaction is genuinely needed — the theme toggle and a scroll-aware header. Everything else is static HTML. - Runtime-swappable monochrome theming. A disciplined three-file CSS-token
architecture (Tailwind CSS v4 CSS-first
@theme): raw color primitives live in exactly one file, a second@theme inlinemaps Tailwind color utilities onto those primitives so flippingdata-themere-resolves every color live with no rebuild, and markup only ever references semantic utilities (bg-surface,text-accent) — never raw hex. A render- blocking inline script applies the stored theme before first paint to prevent a flash. - Self-hosted fonts, hermetic build. IBM Plex Sans / Mono and Montserrat are vendored and emitted through Astro’s native Fonts API — no third-party font requests at runtime, no build-time fetch, so builds stay reproducible offline.
- Whitepaper → PDF pipeline. A Paged.js build step
(
build:pdf) renders the whitepaper content to a paginated, print-quality PDF from the same source of truth as the web page. - i18n-ready from the start. English-only today, but content is split into three tiers by what it is — scalar UI strings, Zod-validated content collections for prose, and typed locale-keyed datasets — so a second locale is additive, not a rewrite.
Rigor & quality gates
A unit suite (Vitest) covers the pure TS helpers most prone
to silent breakage — the build-time design-token parser and the i18n utilities —
and a custom token-lint script (check:tokens) guards the theming contract so a
stray raw color can’t slip past review. Lefthook hooks auto-format on commit and
run the full gate on push, so most failures never reach CI.
Delivery pipeline
CI/CD is three GitHub Actions workflows over one
shared DRY gate — check:build (typecheck, format, unit tests, token-drift check,
and a full static build), the same command the pre-push hook runs:
- CI verifies every PR with no secrets, so nothing can deploy from a pull request.
- Deploy ships to Cloudflare Workers on push to
main, after re-running the full gate. - Preview gives every PR an isolated preview via a Cloudflare version upload — never a live deploy, so it structurally can’t touch production — at a deterministic per-PR URL, posted back as one sticky PR comment.
The smaller decisions are where the care shows: preview URLs sit behind
Cloudflare Access sign-in, with a belt-and-suspenders noindex header injected
into preview builds only, so nothing leaks to crawlers during the auth fail-open
window; every Action is pinned to a full commit SHA for supply-chain safety;
and concurrency groups let a newer push supersede an in-flight run. Staging was
deliberately retired once per-PR previews made it redundant.
Scope & honest caveats
This is a content and design site, not a backend application — its sophistication is in the design system, the static-first performance discipline, and the build tooling rather than in application logic. It is also still in active development: content and pages continue to evolve alongside the chain.