Files
soulseek-rs-modded/website
Michel de Graaf f60aaac0a8 feat(website): sync the latest design changes
Headline now leads with agents alongside people, and the second callout
swaps sharing advice for what the shell subcommands make possible — cron, a
script, or an agent driving the client with no daemon to stand up.

Mobile gets the design's newer treatment: the eyebrow and the sub-heading
step aside so the headline and the install button are all that precede the
terminal, nav links and the button row centre, the footer keeps two columns
with the brand spanning both, and under 520px the platform strip drops its
labels to a centred row of icons. That last one makes the icon the only
thing naming the platform, so it carries an aria-label now rather than
being hidden from assistive tech.
2026-07-24 23:58:49 +02:00
..

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:

  1. vite build — the client bundle, plus dist/index.html as the template.
  2. vite build --ssr src/entry-server.tsx — the same app compiled for Node.
  3. bun scripts/prerender.ts — renders every route in src/lib/routes.ts to its own file (dist/install/index.html, and so on) with that route's title and description substituted in, plus a 404.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

  • base in vite.config.ts is /soulseek-rs/ because this is a project site. Pointing a custom domain at it means setting that to / (the router reads import.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 in src/components/tui/data.ts.