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`: ``.
|