Michel de Graaf
1eef464677
Audited against the AI-design catalog. The world stays — the terminal aesthetic, the oxide accent, IBM Plex Mono are all chosen, and the audit cleared them. What went is the handful of defaults that had crept in underneath it. Eight feature cards at identical weight said every feature mattered equally. Search is what the client is for, so it takes a double-width cell and the grid drops to three up; eight cards plus that one double still comes out square. Each glyph sat in a 34px bordered square — the stock icon-in-a-chip treatment that ships with every component library. The glyphs are the real TUI's, so they now sit inline like the prompt markers they are. Callouts lose the coloured left rule. The catalog puts it plainly: a coloured left border is about as reliable a sign of generated design as an em-dash is in prose. The tone already lives in the label, which was saying the same thing twice. Thirteen arrow glyphs were typed into labels and link text. The leaving-the-site mark belongs to the control, not the copy, so Button draws it once, aria-hidden, and only when the link actually leaves. The "read more" arrows on internal links were pure flourish and are gone. The hero also drops "blazingly fast Rust", which TONE-OF-VOICE.md lists under banned, no exceptions.
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.