# Vargamäe 2026 quality demo

Scope: the deployed 2026 website, with real measurements of the homepage, education centre and contact page. There is no historical-theme comparison. Existing CVI drafts and unrelated local changes are preserved.

Design: retain the production Roboto Slab family, cream `#fffdf8`, sand `#e8e7e0`, amber `#d78115`, ink `#2f2b28`, stone `#6a625c`, and the fence/landscape motif. Dark mode uses the existing theme switch. Use large, left-aligned type and a real page capture to introduce the report; keep the evidence tables quiet and readable. Amber is an identity colour, not a claim that a score passed.

```
Museum header
Website quality                 Actual homepage capture
Scope and collection date       Mobile / desktop
Page selector + device selector
Four Lighthouse scores, range, measured timings
axe findings and checks needing review
All six cases / all eighteen original Lighthouse reports
Methods, limitations and downloadable manifest
Museum footer
```

The results render on the server. With JavaScript disabled every case remains visible. Enhanced controls narrow the visible case, using native buttons and explicit selection state. Charts start at zero and always have textual values.

## Collect and build

Use Node 22.19+ and PHP 8.1+, install with `npm ci`, and set `CHROME_PATH` to an installed Google Chrome executable. Close other audit/browser workloads during performance collection.

```sh
CHROME_PATH='/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' npm run quality:collect
CHROME_PATH='/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' node tools/quality/prepare.mjs themes/vargamae-2026/quality/evidence/COLLECTION_DIRECTORY
php tools/quality/build.php themes/vargamae-2026/quality/evidence/COLLECTION_DIRECTORY
npm run quality:verify
```

`QUALITY_BASE_URL` selects another deployed installation. `QUALITY_OUTPUT` must name a new directory; existing collections are never overwritten or silently resumed. `QUALITY_NODE_MODULES` can point to an existing compatible dependency installation. Version numbers are saved in each manifest. The first collection uses Lighthouse 13.4.1, axe-core 4.13.0 and Playwright 1.62.1.

Three isolated Lighthouse runs per case retain the original HTML and JSON. Select the middle **performance score**, ordered by score then run number, and display every category and metric from that same actual run. Do not combine category medians into an invented report. Preserve lower runs and warnings. A separate axe scan covers each page/device after performance collection. Incomplete checks remain visible; affected nodes count rule-node occurrences, not unique elements or people.

Raw reports and screenshots are under the theme's `quality/evidence/` directory. `collection.json` records timestamps, exact settings, source URLs, browser/tool versions, theme-asset hashes before/after, local-reference revision and SHA-256 digests. The deployed commit is unknown; a matching stylesheet is not proof of the entire deployed source revision. The builder checks every digest before publishing a summary. A failed or unfinished collection cannot be used. `prepare.mjs` adds separate screenshots of the original Lighthouse renderer without changing the measurement manifest. The archived collection script is for inspection; execute the project copy at `tools/quality/collect.mjs` so relative paths resolve correctly.

## Review and delivery

`quality/index.html` and `quality/en.html` are generated standalone previews using the same PHP renderer as WordPress. Preview with `php -S 127.0.0.1:8765 -t themes/vargamae-2026/quality`. The WordPress routes are `/veebi-kvaliteet/` and `/en/web-quality/`; `/demo/` and `/en/demo/` also work. File-backed routing needs no page creation or rewrite flush. The shared footer includes a quality-page link. `php tools/quality/verify-routing.php` checks the routing hooks without needing a production database.

This task prepares and verifies the page locally. Production publication requires deploying the changed theme files and evidence; creating a local report does not publish a route.

References: [Lighthouse scoring](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring), [axe API and rule tags](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md), [automated accessibility testing limits](https://playwright.dev/docs/accessibility-testing).