Kjell Tore Guttormsen
e3378e9b9c
Adds one-click demo and committed screenshots so forkers see what the plugin produces without running anything. Plugin contract unchanged. - Inline <script id="demo-state-v1"> block (37 KB) built by scripts/build-demo-state.mjs from playground/test-fixtures/*.md - "Last inn demo-data" button on onboarding (replaces all state with demo) - raw_markdown persistence on project.reports[id] with equal-value guard - rehydratePasteImports() auto-fills textareas + re-renders visualizations on project surface mount - tests/screenshot/ standalone Playwright runner (own package.json) - 24 committed screenshots in playground/screenshots/v1.10.0/ (12 surfaces x 2 themes, deviceScaleFactor 2 retina, fullPage) Tests: 215 + 201 + 70 + 7 = 493 PASS, no regressions. Docs updated per OBLIGATORISK three-level rule (plugin README, plugin CLAUDE, marketplace root README, CHANGELOG). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
56 lines
1.7 KiB
Markdown
56 lines
1.7 KiB
Markdown
# Playground screenshot tooling
|
|
|
|
Standalone Playwright runner that captures playground screenshots for documentation.
|
|
|
|
## Usage
|
|
|
|
```bash
|
|
cd tests/screenshot
|
|
npm install
|
|
npx playwright install chromium # one-time, ~150 MB
|
|
node run.mjs
|
|
```
|
|
|
|
Output goes to `../../playground/screenshots/v1.10.0/`.
|
|
|
|
## What it captures
|
|
|
|
For each theme (dark, light):
|
|
|
|
| # | Surface | Screen / tab |
|
|
|---|---------|--------------|
|
|
| 01 | Onboarding | Empty state |
|
|
| 02 | Project | Rapporter / Regulatory (default) |
|
|
| 03 | Project | Rapporter / each of 4 other tabs |
|
|
| 04-06 | Project | Oversikt / Kontekst / Eksport |
|
|
| 07 | Home | Project list with demo-prosjekt |
|
|
| 08 | Catalog | All 5 expansion-grupper |
|
|
| 09 | Onboarding | Prefilled from demo-state |
|
|
|
|
= ~18 PNGs, captured with `deviceScaleFactor: 2` (retina-crisp), `fullPage: true`.
|
|
|
|
## How the demo state works
|
|
|
|
The screenshot script clicks `[data-action="load-demo"]` which reads the
|
|
inline `<script type="application/json" id="demo-state-v1">` block from the
|
|
playground HTML. That block is generated by `scripts/build-demo-state.mjs`
|
|
and includes one demo project ("Demo: Innbygger-chatbot for byggesak") with
|
|
all 17 fixture markdowns pre-loaded as `raw_markdown`. After load, the
|
|
project surface re-runs `handlePasteImport` for each report so the
|
|
visualizations render automatically.
|
|
|
|
## Regenerating demo state
|
|
|
|
If `playground/test-fixtures/*.md` changes:
|
|
|
|
```bash
|
|
node scripts/build-demo-state.mjs
|
|
```
|
|
|
|
This rewrites the `<script id="demo-state-v1">` block in the playground HTML.
|
|
|
|
## Commit policy
|
|
|
|
- Commit `playground/screenshots/v1.10.0/*.png` so forkers see what the
|
|
plugin looks like without running anything.
|
|
- Don't commit `node_modules/` (gitignored).
|