[TMHSDigital]

Refines the GitHub Pages site in place: the assets now carry the page, the homepage loads fast on a phone, and the audit's layout items are fixed. Same palette, type and copy voice as before.

Spec: docs/superpowers/specs/2026-10-23-site-refresh-design.md. Plan: docs/superpowers/plans/2026-10-23-site-refresh.md.

What changed

• Thumbnails, licence-gated. npm run thumbs (site/thumbs.mjs) fetches each eligible entry's own og:image, resizes it to 640 px WebP with ffmpeg and commits it under site/public/thumbs/ with a record in site/thumbs.json. Only status: active entries whose licence is on the allowlist in site/lib/thumbs.mjs (CC0, CC-BY, MIT, OFL, GPL and the other open licences that allow a resized copy) get one. custom, varies and unknown never do; GitHub and Google Fonts pages are skipped (social card, logo); an image three or more entries share is treated as a logo and dropped. preview: none opts an entry out (set on three entries whose page image is the publisher's general promo), preview: <https url> pins a checked image. The validator fails when a committed image no longer passes the gate, and the script removes it on its next run. First batch: 192 thumbnails, 4.4 MB. Monthly refresh: .github/workflows/thumbs.yml pushes a thumbs/<month> branch and opens an issue with the compare link (Actions cannot open pull requests here).
• One entry template. site/lib/cards.mjs renders every entry for the build, app.js, the stack pages and the new category pages. Cards and List are the same markup under data-view; each category heading has a Cards / List toggle (views.js) whose choice is remembered per kind of category. Entries without an image get a typographic tile.
• Homepage. New hero with the count and the promise, a filmstrip of real previews, six cards or eight rows per category with "Show all N" linking to a static category/<id>/ page (with JavaScript the link opens the category in place). Search results use the list form. The homepage HTML drops from 692 KB to 139 KB and the catalog ships once, in data.js.
• Entry and stack pages. The preview as a header strip with its credit line, one primary action ("Go to source") with the rest as links, facts in the body face, 44 px copy buttons on touch screens. Stack picks render as cards with the need above and the reason below.
• Fonts. Public Sans and IBM Plex Mono self-hosted under site/public/fonts/ (latin WOFF2, OFL); one shared <head> helper emits icon, preloads and stylesheet for every page type; the page checks refuse Google Fonts.
• Audit fixes. Group headings read "3D, 77 entries" to assistive tech; the 4 px commercial-use edge bar is a dot before the flags; the 3 px side tab on notes is gone; the phone header is a brand row plus a scrolling 44 px nav row; the floating Search button sits bottom-left and steps aside while a card's links have focus; every thumbnail has width, height, lazy loading.

Numbers (Lighthouse, mobile, homepage)

	before	after
Performance	0.83	0.91
CLS	0.092	0
Accessibility / Best practices / SEO	1 / 1 / 1	1 / 1 / 1
index.html	631 KB	139 KB

Checks

npm run check green (163 + 629 assertions, validate, build with page checks on 433 pages). Lighthouse accessibility, best practices and SEO are 1 on the homepage, a category page and a stack page. Reviewed by a fresh reviewer; its five findings (shortlist buttons on lazily rendered cards, the "Show all" scroll target, heading levels on the new pages, three promo images, an over-strict licence-drift check) are fixed in the last commit. Detector: one static false positive left (the heading size uses clamp()).

Note on the diff: site/lib/exports.mjs, site/lib/freshness.mjs, site/lib/stack-page.mjs and site/README.md were CRLF and are now LF, so their diffs show whole files; the real changes in them are small.

Closes #75
Closes #87

🤖 Generated with Claude Code