💄 docs(site): tevm-family theme, hero, live primitive playground, cross-site nav

[roninjin10]

Visual/UI layer for the Voltaire docs site (voltaire.tevm.sh). Built on top of prod/voltaire-readiness (PR #393), which is where the Vocs site and its prose live — this PR targets that branch, not main. Documentation prose is untouched.

Theme — matched to the family, not invented

Every live sibling (cli, logger, ethers, mud, bundler, examples) resolves --vocs-color-accent to light-dark(#0085FF, #4DA6FF); I verified that by fetching each site. Voltaire now uses the same accent, the same tevm-logo-light/dark.png treatment, Inter, and github-light / github-dark code themes. All custom CSS is written against Vocs 2 design tokens (--vocs-text-color-*, --vocs-border-color-primary, …) so both schemes stay correct.

Hero

Eyebrow, headline, the existing lead sentence, three CTAs, a copy-paste npm install @tevm/voltaire line, and capability badges.

Interactive component — one, and it really works

docs/src/components/Playground.client.tsx: a dependency-light client component that lazy-imports the published @tevm/voltaire@0.4.0 bindings in the browser.

• Keccak-256 — hashes utf-8 text or 0x hex
• Address — EIP-55 checksum, checksum validity of the input, and the CREATE address at nonce 0
• RLP — encodes a list and decodes it back

Verified in a real browser (Chrome via Playwright) against values computed independently in Node:

[light] keccak default: input=8 bytes · utf-8
                        keccak256=0xa35d8b3a144abaa59fc70648869c03b670dc34a91a8963640365ef6698290cb7
[light] address:        checksummed (EIP-55)=0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045
                        input checksum valid=false
                        CREATE at nonce 0=0x3E4EA2156166390f880071d94458EFB098473311
[light] rlp:            rlp encoded=0xc582cafe0180 · encoded size=6 bytes · decoded back=0xcafe, 0x01, 0x
[light] keccak(0xdeadbeef): 0xd4fd4e189132273036449fc9e11198c739161b4c0116a9a2dccdfa1c492006f1
[light] page errors: []
[dark]  page errors: []

@noble/hashes, @noble/curves and ox are added as explicit docs dependencies: the published @tevm/voltaire@0.4.0 imports them from dist/ but does not list them in dependencies, so a strict (pnpm) install cannot resolve them otherwise. That is worth fixing in the package itself.

Cross-repo navigation

A tevm docs top-nav dropdown plus a landing-page grid covering all 13 live sites (tevm, contract, logger, test, bundler, cli, ethers, mud, examples, voltaire, guillotine, mini, zevm), with "you are here" on Voltaire. The list lives in docs/src/sites.ts and feeds both.

Incidental fixes

• editLink used the Vocs 1 pattern key; Vocs 2 expects link, so the edit link was inert.
• baseUrl is now overridable via VOCS_BASE_URL — without it vocs preview emits absolute https://voltaire.tevm.sh asset URLs and the local preview cannot hydrate.
• Removed a React hydration mismatch (error #418) on the landing page: Vocs' server and client renderers normalise multi-line JSX text differently. Untouched pages were clean before and after; the landing page is now clean too.

Build

✓ built in 5.74s
[ssg] processing static generation...
[prune] removed static-only 24 chunk(s) and 0 asset(s) from server bundle
✓ 1 file generated in 288ms

Rendering verified in both light and dark via vocs preview + Chrome: accent resolves to rgb(0, 133, 255) / rgb(77, 166, 255), both logo variants present, 13 family cards, zero page errors.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dist	Error		Jul 30, 2026 5:33pm
voltaire	Error		Jul 30, 2026 5:33pm
voltaire-docs	Ready	Preview	Jul 30, 2026 5:33pm