Michel de Graaf
310149c718
A 2px border on one side of a rounded box thins as it turns the corner, so the keycap's bottom edge tapered exactly where a real key looks solid. An unblurred 1px shadow sits under the full curve instead — same weight, no taper — which is the look the design system's `.key` rule describes. Also records the one detector finding that is not a defect: the single-font warning on index.html. tokens/typography.css calls monospace "non-negotiable: it's a terminal application", hierarchy comes from three weights and a five-step scale (the rule's own stated exception), and the second family it asks for is already there — --font-forum, a system stack the scanner cannot see because it needs no @font-face. Scoped to that one file so the rule keeps working everywhere else. config.local.json holds this machine's hook consent, so it is gitignored rather than shared.
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.