Skip to content

SCREENSHOTS.md

Latest commit

 

History

History
58 lines (40 loc) · 2.44 KB

SCREENSHOTS.md

File metadata and controls

58 lines (40 loc) · 2.44 KB
Raw

Screenshots

The PNGs in docs/screenshots/ feed the README. Refresh them whenever the UI changes.

Capture

npm run dev must be running (API on :8000, UI on :3000).

cd web
node scripts/capture-readme-screenshots.mjs

The script lives at web/scripts/capture-readme-screenshots.mjs. It uses the Playwright Chromium binary already pulled by web/ and writes PNGs to docs/screenshots/.

What gets captured

Slug URL Notes
landing-fr /fr Full page. Banner, hero, sources, video, missions, method, footer.
landing-en /en Full page. English copy.
campaign-krill /fr/campagnes/krill Full page. Legal frame, video, fleet, timeline, calendar, sources.
vessels /fr/vessels Wide viewport. Fleet roster, live status banner, MapLibre map with vessel pins.
live-tracker /fr/live Wide viewport. Filter panel and dark MapLibre basemap.
vessel-detail /fr/vessels/antarctic_endurance Wide viewport. Severity badge, 30-day track, event log header.
about /fr/about Tall viewport. Why + Stakes section. Full page is too dense for a README image.

Settings

  • Default viewport 1440 by 900, device scale factor 2 for crisp text on Retina. Map and editorial pages declare their own taller viewport in the script config.
  • Dark colour scheme.
  • YouTube iframes are blanked to a flat dark colour so the layout is captured without third-party loading spinners.
  • All animations (pulse, accent indicators) are paused.
  • Each shot waits on a CSS selector that proves the live data has rendered (vessel link, map canvas, video section). A blank dashboard never gets through.

Prerequisites

The API must be reachable on :8000 with non-empty data. From a clean clone:

npm run dev          # boots the API + UI together
# in another shell, optional, if the DuckDB file is empty:
python scripts/seed_for_screenshots.py

Verify with curl -s http://127.0.0.1:8000/api/stats — by_severity should show at least one CRITICAL or SUSPICIOUS entry. If it's all zeros the screenshots will look empty.

Custom base URL

Useful for capturing a deployed environment.

SCREENSHOT_BASE_URL=https://krill-free.org node scripts/capture-readme-screenshots.mjs

Commit policy

Regenerate, eyeball the diff, commit the PNGs in the same PR as the UI change. Don't ship a UI change without the matching screenshot refresh.