fix(site): finish the Pages review follow-ups

[TMHSDigital]

Summary

Follow-up to #208, finishing the Pages review. The landing page cut 19 skill and rule descriptions mid-clause and listed all 28 showcase props, making the page 10,100px tall. On the gallery, each card had three identical links, the zoom overlay let focus escape behind it, and there was no 404 page for renamed examples.

Type

• feat
• fix — site generator and landing template corrections
• docs / chore / ci / refactor

Changes

Landing page (scripts/site/)

• Descriptions are shown whole up to 340 characters. Longer ones are cut at a sentence boundary; only a single over-long sentence gets a word cut with an ellipsis. Today: 0 truncated (was 19).
• `backtick` spans in descriptions render as <code>.
• The showcase section honours featured_rank, as examples already do. Six pieces are featured in showcase/gallery.json: stone-well, market-stall, wall-torch, cart, park-bench, stone-archway. The header reads "6 of 28 pieces". Page height: 10,136 → ~7,030px at 1440px wide.
• New 404.html.j2 is rendered by build_site.py into docs/404.html (gitignored, like index.html). Links are root-absolute, derived from site.json canonical, because Pages serves it at any depth.
• color-scheme: dark is set, which fixes the light native scrollbar on the mobile clone box.

Gallery (scripts/build_gallery.py, 80 regenerated pages)

• The zoom overlay is now a <dialog> opened with showModal(). It traps focus, closes on Esc and returns focus to the hero, and has a Close button. A click anywhere still closes it.
• The card image link is tabindex="-1" aria-hidden="true", since the title link already goes to the same page. The "View example" links now include the entry name for screen readers.
• On narrow screens the Tags toggle names the active tag ("Tags: showcase"), so a shared #tag= link is visibly filtered.
• The footer names the right source: showcase/gallery.json on showcase pages, both files on the index.
• __CONTENT__ is substituted last, so README or source text can never hit another placeholder.

Evidence

• live-run-proven (local, no Blender involved): rebuilt with build_site.py and build_gallery.py, served docs/, and drove it with Playwright:
  • Dialog: open after click; focus on .lightbox-close and still inside after 4 Tabs; closed after Esc with focus back on #heroZoom; closed after a click.
  • Gallery index at 375px: #tag=showcase shows "Tags: showcase" and "28 OF 79". Clearing the tag resets the toggle to "Tags". Every .card-media has tabIndex === -1. The first card link reads "View example swatch-grid →". No horizontal overflow.
  • Landing page: the showcase shows exactly the six ranked pieces; 0 descriptions end in "…" and every one ends on sentence punctuation; computed color-scheme is dark.
  • 404 page: renders at 390px. Its root-absolute font and icon URLs 404 on the local server by design; they resolve only under /Blender-Developer-Tools/ on Pages.
  • fix(site): correct landing-page claims and render README tables on gallery pages #208's Markdown rendering is unchanged: 182 tables, 67 <em>, 0 raw pipe rows.
• inspection-only: the rendered 404 is confirmed only on GitHub Pages after deploy.

Checklist

• Explicit paths only.
• Counts unchanged.
• Manifest untouched. showcase/gallery.json gains only featured_rank keys; a JSON round-trip was byte-identical before the edit.
• No new check added.
• DCO Signed-off-by: present.
• No credentials, emails, or local paths.

Test plan

python scripts/site/build_site.py --repo-root . --out docs && python scripts/build_gallery.py, then serve docs/ and check /, /404.html, /gallery/#tag=showcase (at 375px) and /gallery/stone-archway/ (zoom dialog).

Still open

• Whether docs/gallery/contact-sheets/ (3.4 MB), technical-audit.md, new-example-prompt.md, VISUAL-STYLE.md and gallery/DESIGN_NOTES.md stay publicly served is left to the owner.

🤖 Generated with Claude Code