Splash upgrade — three-mode theming, peer-walking discovery, context-v archive, and Pagefind

What landed

This site shipped fast in a single session and was — by the author's own admission — functional but ugly. In the few days since, the astro-knots/splash site solidified a set of conventions worth adopting everywhere: a two-tier token system with a three-mode contract, a context-v archive next to the changelog, and (per the Using PRs More exploration) build-time Pagefind for static-site search. This commit catches the site up.

Three modes, end to end

Tokens reorganized into the standard Astro Knots two-tier shape — Tier 1 named (--color__cyan-electric, --font__display), Tier 2 semantic (--color-bg, --color-accent) — with three rebindings under :root[data-mode='light' | 'dark' | 'vibrant']:

• Dark (default — "operator"): the engine-room view, terminal-adjacent.

• Light ("boardroom"): editorial, high-readability — the mode a partner reads a memo in.

• Vibrant ("demo"): saturation cranked, neon on near-black — the mode for showing the product range.

A header ModeToggle writes data-mode on <html> and persists to localStorage under memopop-mode. A pre-paint inline script in BaseLayout.astro resolves the persisted choice before CSS evaluates so there's no flash of wrong theme on first paint. Old --clr-lossless-* tokens are aliased to the new semantic ones inside theme.css, which means the entire splash pivots with the toggle without any markup changes.

Peer-walking discovery — adding an app makes it appear

The original site hardcoded four content collections, one per peer. That works until the workspace grows. The replacement is a small peerDiscovery.ts that walks the monorepo (apps/*, packages/*, plus the parent root) and finds every place with a changelog/ or context-v/ directory, using package.json#name as the unique provenance slug. A new unionLoader.ts plugs that into Astro's content collections.

Two collections, changelog and context-v, replace the previous four hardcoded ones. URLs become /changelog/<from>/<slug>/ and /context-v/<from>/<slug>/. Filter pills on the index pages are generated dynamically from what was discovered — sorted parent-first, then apps alphabetical, then packages alphabetical, each colored by a --thread__<slug> token from theme.css.

The acceptance test passes: drop a markdown file into apps/memopop-native/changelog/, run bun run build:site, and the entry appears in the changelog list under a memopop-native filter pill — zero edits to the splash codebase. Same for context-v.

Context-v as a first-class archive

The /context-v/ route didn't exist before. It does now, mirroring the changelog routes — list at /context-v/, detail at /context-v/<from>/<slug>/. The list adds a second filter dimension over the source filter: a "Kind" row pulled from the top-level subdirectory (specs, plans, explorations, blueprints, prompts, reminders, habits, conventions). Multiselect-style cross-filtering between source and kind.

This commit's own plan is rendered there, alongside the spec for the character cast and every spec, plan, and reminder from the orchestrator submodule.

Pagefind across both archives

Pagefind is wired in via astro-pagefind, which runs the indexer against dist/ after astro build and copies the assets into the published output. Detail pages (changelog and context-v) are marked data-pagefind-body; chrome (header, footer, byline) is marked data-pagefind-ignore. Two filter dimensions are exposed: kind:Changelog|Notes and from:<peer-slug>.

The header has a popover search that opens with / from anywhere on the site. There's also a full /search page for direct linking. The Pagefind UI is themed via CSS custom properties so it follows the mode toggle. Search runs entirely client-side from the static index — no backend, no cost.

The build now indexes 114 pages.

A new MemoMark logo

The previous favicon was generic. The new mark is three vertical "agent" stems of varying heights — one tall, one short, one medium — each topped with a "pop" dot, sitting on a baseline. Read concretely: many specialized agents → one synthesized memo. Read abstractly: the silhouette traces an "M". Renders in currentColor for headers, with an optional gradient treatment for the hero. Animated dots pulse in turn during page load.

Splash polish

The marketing content (hero, time comparison, why-grid, pipeline cast, orchestrator + numbered flow, CLI mock, dual CTA, GUI callout) is preserved verbatim. What changed:

• Hero now has the MemoMark, a serif-display headline ("Memos that pop into focus"), and a 3-column stats row (33 agents · 9 firms · 10–15m to first draft).

• Per-agent pipeline cards in the Cast row pick up per-agent accent colors that pivot with the mode.

• A new "Latest from the workspace" section above the dual-CTA pulls the four most recent published changelog entries from across all peers — same auto-discovery; surfaces orchestrator activity automatically.

• Footer now includes Notes and Search alongside Changelog.

Out of scope, on purpose

• No GitHub Content API rollup-sync. All four sources are on disk (the orchestrator is checked out via the existing submodule).

• No LFM yet. Astro's stock markdown rendering plus prose.css is good enough for now; LFM is a separate adoption.

• No PR/commit-link footer in changelog entries — adopt later, after the Using PRs More practice settles.

• No major palette change. Same brand spine; tokens just live in a more disciplined place.

Files

20 files added, 8 modified, 1 removed. See files_added/files_modified/files_removed above.

How to verify locally

bun --filter memopop-site build
bun --filter memopop-site preview
# visit http://localhost:4321/memopop-ai/

Things to check: toggle between the three modes (no FOUC), filter the changelog by source, visit the new /context-v/ archive, hit / on any page to open search, view a context-v detail page (e.g. the plan for this work).