51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
# Screenshot pipeline
|
||
|
||
Captures real WHP screenshots into `src/assets/screenshots/whp/`.
|
||
|
||
**Local-only. Never runs in CI.** CI builds the static site; it never opens a browser or hits WHP.
|
||
|
||
## Prerequisites
|
||
|
||
1. A demo WHP account (prod recommended for accuracy; staging works internally).
|
||
2. Network access to that WHP host.
|
||
3. Node 20+ and Playwright Chromium installed: `npx playwright install chromium`.
|
||
|
||
## Configure
|
||
|
||
Create `tools/screenshots/.env` (gitignored):
|
||
|
||
```
|
||
WHP_BASE=https://whp01.cloud-hosting.io:8443
|
||
WHP_USER=demo-kb
|
||
WHP_PASS=…
|
||
```
|
||
|
||
The script reads these via `process.env`; pass them in your shell or use a `.env` loader like `dotenv-cli`.
|
||
|
||
## Run
|
||
|
||
```bash
|
||
# Load .env into your shell (one option):
|
||
set -a; source tools/screenshots/.env; set +a
|
||
npm run screenshots
|
||
```
|
||
|
||
Outputs one PNG per entry in `shots.config.ts` to `src/assets/screenshots/whp/<id>.png`. Existing files are overwritten.
|
||
|
||
## Capture rules
|
||
|
||
- **Viewport: 1440×900.** Locked. No `fullPage`. Playwright's viewport screenshots never include browser chrome — no address bar, no tab strip.
|
||
- **Mask list:** defaults (account ID, server hostname, user IP, billing column) plus per-shot additions.
|
||
- **No address bar in any image.** Multi-server fleet — we don't want a specific host in any screenshot.
|
||
- Use `selector` to clip to a region (e.g., just the sidebar) when the full viewport is noisier than useful.
|
||
|
||
## Refresh workflow
|
||
|
||
UI changed? → `npm run screenshots` locally → review the diffs (`git diff --stat` shows changed PNGs) → eyeball them for accidental leakage → commit → push.
|
||
|
||
## Adding a new shot
|
||
|
||
1. Add an entry to `shots.config.ts` with a stable `id`.
|
||
2. `npm run screenshots`.
|
||
3. Reference the new file in your `.mdx`: ``.
|