Files
kb-anhonesthost/tools/screenshots
Josh c602b8f8f3 docs: verify against real WHP + capture real screenshots
Discovery against the demo account on whp01 surfaced several inaccuracies:

- Cache is Valkey (Redis wire-compatible), not Redis or Memcached.
  No Memcached is offered as a separate service.
- Site Monitoring is the sidebar label (not 'AI Monitor').
- 'Add a domain' has no Primary/Add-on distinction.
- Sites form: 'Container Type' (not 'Site type'), Number of Containers
  (1-10 for horizontal scaling), CPU per Container (default 0.25),
  Memory per Container (default 256MB), SSL inline on the same form.
- Backups: default retention 5 days / 10 backups; on-demand + scheduled;
  S3 backup targets are visible and configurable.
- Email: per-domain settings live behind 'Setup Instructions' on the
  Email page; mail server hostname is on the Dashboard (per-server,
  e.g. mail01.cloud-hosting.io), not per-domain.

Also reworked the screenshot pipeline:
- New shots.config.ts targets the real index.php?page=... URLs
- Added redactSensitive() step that runs before each screenshot to swap
  server names, IPs, mail hostnames, and demo-user-isms with neutral
  placeholders. This keeps docs portable across the fleet.
- Hides .brand-full and .navbar-text (top-bar server identifier and
  Welcome greeting).
- Captured 9 real WHP screenshots; removed stale placeholders.
2026-05-17 17:00:13 -07:00
..

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

# 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: ![Alt text](~/assets/screenshots/whp/<id>.png).