[MehranMarxian]

Requested by Mehran · project thread

Before: nothing checked a change before it went live. A wrongly capitalised image path works in a Windows preview but 404s on GitHub Pages, and you'd only find out on the live site.

After: every PR runs a "Site checks" GitHub Action. A red ✗ on the PR means something would break. The site itself doesn't change: no new scripts or dependencies are shipped to visitors.

What it checks

1. Links and images, with the capitalisation matching exactly (scripts/check_links.py, plain Python). It covers every local src/href/poster/srcset/data-full/CSS url() on the live pages, and every sitemap entry. A live page missing from the sitemap is a warning. (Today that's Moondust, which PR Add Moondust to the sitemap and refresh lastmod dates #3 fixes.)
2. HTML validity with html-validate (standard rules), over the live pages.
3. Real render in headless Chromium at 390 px and 1440 px (scripts/check_pages.mjs). It flags sideways scrolling, JavaScript errors and local 404s. Problems fail the run only on pages the PR changes, or on every page when css/ or js/ changes. Elsewhere they show as warnings, so old issues don't block unrelated work.

"Live pages" means root pages without noindex, plus 404.html and the three archive posts in the sitemap. The draft pages are skipped.

Also in this PR

• 36 validation errors fixed. The first run found them, all invisible markup issues:
  • aria-label on plain <div>s (footer social icons on every page, the documentary thumbnail strip) now has role="group", so screen readers actually announce the label.
  • <h2>/<p> inside <span> (homepage photography cards, photogrammetry related-work cards) are now <div>s. Those wrappers were already display: flex or absolutely positioned, so nothing moves.
• The OpenLayer mobile fix from Stop the OpenLayer article scrolling sideways on phones #4, ported. This PR touches that page, so the new check would otherwise fail on it. It becomes a no-op once Stop the OpenLayer article scrolling sideways on phones #4 merges.
• Docs. CLAUDE.md explains the checks and how to run them locally. The overview's backlog item 12 is updated, and there's a changelog line.

How it was tested

• All three checks pass locally on this branch.
• Seeding a wrong-case path (Icons/… in about.html) makes the link check fail. Changing PStoComfy2026.html before its fix makes the render check fail with "scrolls sideways by 312px".
• Screenshots of the homepage cards, photogrammetry, experiments and documentary pages at both widths match main.
• Not verified: the workflow itself, since this is its first run. I'll watch it on this PR and fix anything it reports.

Risks and follow-ups

• It uses only GitHub's own actions (checkout, setup-node). The npm tools (playwright, html-validate) are installed inside CI, pinned, and never shipped to the site.
• Each run takes about 2–3 minutes, mostly installing Chromium.
• scripts/ will be publicly reachable on the site, like every file in the repo. It's harmless.
• The other open PRs (Fix looping videos on iPhone (Low Power Mode, unplayable WebM) #5, Make the whole Moondust card open Moondust.html #6 from another thread) will run these checks once this merges. If they touch pages with issues, they'll need the same small markup fixes.

Suggestions

1. Add a Lighthouse run on changed pages that reports the scores as a PR comment, without failing the run.
2. After it's been green for a week, make "Site checks" a required status in branch protection for main.