shadowdao
da24dc8c67
The WHP DNS area was reworked from the old Domains page (left-side add form + right-side DNS Management dropdown) into a searchable Domains & DNS list plus a dedicated per-domain DNS records editor. - Recapture whp-domains.png against the new list layout - Add screenshots for the Add Domain modal, records editor, inline Add Record row, and bulk-action toolbar - Add capture-dns.ts (fleet-redacted, viewport-only) following the existing capture-admin.ts pattern - Rewrite add-a-domain.mdx Add Domain steps for the modal flow and point at the new records editor - Add manage-dns-records.mdx how-to (add/edit/delete, type filter, bulk actions, verification, troubleshooting); renumber sidebar order Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
- A demo WHP account (prod recommended for accuracy; staging works internally).
- Network access to that WHP host.
- 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
# 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
selectorto 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
- Add an entry to
shots.config.tswith a stableid. npm run screenshots.- Reference the new file in your
.mdx:.