docs: Generate README marketing screenshots from the docs harness - #252
Conversation
Add readme-* Vitest specs (same createTestRepo + Dashboard + captureDocument path as docs-*) that publish Code/Review/Commits PNGs to assets/screenshots/ via captureDocument publishTo. Extend capture with retina scale, optional element clips, and Chromium path fallbacks. Wire npm run screenshot:readme. Co-authored-by: Ziinc <Ziinc@users.noreply.github.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| await captureDocument(document, { | ||
| name: "readme-code", | ||
| deviceScaleFactor: 2, | ||
| publishTo: path.join(README_SCREENSHOTS_DIR, "code.png"), |
There was a problem hiding this comment.
Same shape as docs-create-pr-dropdown.spec.tsx: real repo + Dashboard + captureDocument, with publishTo aiming at the README asset path instead of a docs crop.
- Three specs (code / review / commits) so each marketing image can be regenerated alone
- Dark mode forced before capture to match the existing README look
| "test": "DEBUG_PRINT_LIMIT=50 vitest run", | ||
| "screenshot:css": "node scripts/screenshot/build-css.mjs", | ||
| "screenshot": "npm run build:napi --silent && npm run screenshot:css && vitest run --config vitest.screenshot.config.ts", | ||
| "screenshot:readme": "npm run build:napi --silent && npm run screenshot:css && vitest run --config vitest.screenshot.config.ts scripts/screenshot/specs/readme-*.spec.tsx", |
There was a problem hiding this comment.
screenshot:readme is a thin filter over the existing screenshot pipeline (napi + CSS + vitest) so regenerating marketing assets does not require running every QA spec.
| expectations, | ||
| scrollIntoView, | ||
| } = options; | ||
| const { |
There was a problem hiding this comment.
publishTo / deviceScaleFactor / clipSelector close the docs → committed-asset gap: specs already wrote .generated/, but README/docs PNGs needed a second manual copy.
publishTomakesnpm run screenshot:readmeupdateassets/screenshots/in one step- Retina
deviceScaleFactor: 2matches the prior marketing asset resolution - Chromium path fallback covers cloud agents without
/opt/pw-browsers/...
| ); | ||
| }); | ||
| }); | ||
| `; |
There was a problem hiding this comment.
Shared seed intentionally skips home-repo commits before workspace creation.
- Committing on the default branch first left the target bookmark conflicted (
Name … is conflicted), so Review could not resolve the revset - Sidebar workspaces are created first on a clean tip, then only the marketing workspace commits
|
🚀 Web preview: https://preview-252.treq-9zy.pages.dev |
Ziinc
changed the title
2 participants
Summary
README marketing images under
assets/screenshots/{code,review,commits}.pngare now produced by the same Vitest + Chromium screenshot harness used for docs captures (docs-*.spec.tsx).scripts/screenshot/specs/readme-{code,review,commits}.spec.tsxplus a sharedreadme-fixture.tsseedcaptureDocumentwithpublishTo,deviceScaleFactor,clipSelector, and Chromium path fallbacks so regenerating the specs updates the committed assetsnpm run screenshot:readmeand short regenerate notes in the README / contributing docsTest plan
npx vitest run --config vitest.screenshot.config.ts scripts/screenshot/specs/readme-*.spec.tsxassets/screenshots/match capture expectations (Code / Review / Commits, dark mode)web/docs/reference/contributing.md