web: move the website to TypeScript and React by jrnxf · Pull Request #41 · jrnxf/thokr

jrnxf · 2026-10-28T03:33:56Z

The thokr website is now TypeScript and React (Vite), and looks the same as before.

Review: skim the diff, then compare the shots below. About 5 min.

npm ci && ./build.sh in web/ - builds the engine, type checks, bundles to dist/.
npm test - 14 pass: the engine and chart snapshots, and the 4 browser typing tests.
Open the page and type: same screens, same scrolling between sentences.

Evidence: old and new page driven with the same words and fixed clock in a real browser, at 1280, 700 and 390 wide, light and dark. Idle and mid-typing screens are pixel identical, element boxes and colours too. Finished screens match except the plotted values, which depend on typing speed.

The Rust engine, page markup and CSS are untouched. The engine file moves from public/kit to a Vite asset named by content, so _headers caches /assets/*. No new tests.

Risk: two-way door - blast radius: the website only.

Fonts, no shift on a hard reload (second commit):

Both DM Mono files are preloaded from the head, with the engine, and sent as Link headers (Early Hints on Cloudflare) with the stylesheet, from _headers that the build writes. /assets/* stays immutable.
The page paints only once both weights are in, and the hero stays hidden until its words load, so no fallback font shows and nothing moves.
Cache off, Fast 4G, 4-6x slower CPU, real browser: layout shift 0 on desktop and phone (the old page measured 0.0032). Each font and the engine are fetched once, ahead of the script and stylesheet.
Skipped: latin-subset splitting, the fonts are already the one latin file per weight. No Worker serves the page (static assets), so the headers file carries the hints.

Before / after, desktop: