Michel de Graaf
74ad230150
Contrast was measured, not eyeballed: 41 foreground/background pairs across both themes and the terminal surface, each against the darkest (light) or lightest (dark) surface it actually sits on. Five failed. Links on manila read 3.64:1 and the footer's "No telemetry. Ever." — a claim the site goes out of its way to make — sat at 2.86:1. The accent needed splitting rather than moving. #c1502e clears 4.5:1 as a button fill behind white but only 3.99:1 as an 11px eyebrow on vinyl, so --accent keeps the brand hue for fills and a new --accent-text carries the readable cut. The terminal gets the same treatment dark emulators give their palettes: alarm and oxide brighten inside .tui-content so "Failed" is legible next to its glyph. Reduced motion no longer nukes everything. A blanket 0.01ms also kills the transitions that answer a click, which is feedback rather than movement; looping and travelling animation stops, the rest caps at 80ms. The TUI already skipped its opening run and still does. The hero reserves its box with aspect-ratio from the first paint. It was prerendered at full unscaled height and collapsed once JS measured, moving everything below it by ~145px. Measured shift is now 0. Also: the webfont loads non-blocking (display=swap meant the first frame never waited for it anyway), footer link groups nest under a heading instead of sitting level with page sections, and eight tokens nothing referenced stop shipping.
website
The soulseek-rs project site. Vite + React + TypeScript + Tailwind v4,
deployed to GitHub Pages by .github/workflows/pages.yml.
bun install
bun run dev # http://localhost:5173/soulseek-rs/
bun run build # client build, SSR build, then prerender
bun run typecheck
bun run lint
How the static site is produced
bun run build runs three steps:
vite build— the client bundle, plusdist/index.htmlas the template.vite build --ssr src/entry-server.tsx— the same app compiled for Node.bun scripts/prerender.ts— renders every route insrc/lib/routes.tsto its own file (dist/install/index.html, and so on) with that route's title and description substituted in, plus a404.html.
Without step 3 GitHub Pages has no file at /install and answers a direct link
with a 404. With it, every URL returns 200 with fully rendered markup, and the
client hydrates that markup rather than replacing it.
Adding a page means: a component in src/pages/, a <Route> in src/App.tsx,
and an entry in src/lib/routes.ts. The last one is what the prerenderer walks.
Design system
Tokens live in src/index.css, ported from the Claude Design project's
tokens/colors.css. They are the same values that back the TUI in
soulseek-rs/src/ui/styles.rs — change one, change both.
Dark is the native theme; light re-cuts the semantic hues roughly 10% darker,
because phosphor and tape are legible on vinyl but wash out on manila. Theme
selection is [data-theme] on <html>, defaulting to the OS setting, with an
inline script in index.html applying it before first paint so the page never
flashes the wrong background.
Notes
baseinvite.config.tsis/soulseek-rs/because this is a project site. Pointing a custom domain at it means setting that to/(the router readsimport.meta.env.BASE_URL, so it follows automatically).- Copy in
src/pages/follows the project's tone of voice: plainspoken, precise, honest about limits first. No copyrighted artist or album names anywhere, including the TUI demo data insrc/components/tui/data.ts.