Regenerating screenshots

Every screenshot in these docs is captured from the deployed apps with the Playwright CLI at 2× pixel density: 1440 CSS pixels wide, so 2880-pixel PNGs, cropped to each page’s content height with --full-page and a short viewport. The files live in client/docs/src/assets/screenshots/, and Astro serves optimized versions of them.

How it works

The apps keep their Cognito session in localStorage. So:

1. screenshots/login.mjs signs in to the admin console and the SaaS app once and saves each browser’s storage state to screenshots/.auth/ (git-ignored).
2. screenshots/capture.sh captures each page with the CLI, loading that state:

npx playwright screenshot --load-storage .auth/app.json --device "Desktop Chrome HiDPI" \
  --viewport-size "1440, 200" --full-page --color-scheme light --wait-for-selector 'table tbody tr' \
  --wait-for-timeout 1500 https://saas.haibui.click/products ../src/assets/screenshots/app-products.png

--wait-for-selector waits until the page has loaded its data from the API, so no screenshot shows a loading state.

Regenerate

1. Use a system admin, and a tenant user with a few products and orders. Use dedicated accounts, not real ones. For example:

   ./scripts/dev-create-tenant-user.sh <acme tenant id> BASIC TenantAdmin docs-demo '<password>'

2. Install the browser once:

   cd client/docs
   npm ci
   npx playwright install chromium

3. Capture:

   ADMIN_USER=docs-bot ADMIN_PASSWORD='…' TENANT=acme TENANT_USER=docs-demo TENANT_PASSWORD='…' npm run screenshots

   Set ADMIN_URL and APP_URL to capture a different deployment.

4. Rebuild and deploy the docs with ./scripts/deploy-client.sh.