diff --git a/README.md b/README.md index f03ec7b..d489903 100644 --- a/README.md +++ b/README.md @@ -16,5 +16,7 @@ mirrors the Deploys.app console — magenta "signal" primary on Ink (dark) / Paper (light) surfaces, Hanken Grotesk + JetBrains Mono. Tokens live in `assets/style/_theme.scss`. -Console screenshots in `static/img/` are captured from the console's mock -server (`bun dev:mock`) — see the console repo. +Console screenshots in `assets/img/` are captured from the console's mock +server (`bun dev:mock`) — see the console repo. They are served through Hugo +Pipes with a content hash in the filename (`/img/..png`) so a +re-captured screenshot busts the browser/CDN cache automatically. diff --git a/static/img/billing-report-dark.png b/assets/img/billing-report-dark.png similarity index 100% rename from static/img/billing-report-dark.png rename to assets/img/billing-report-dark.png diff --git a/static/img/billing-report.png b/assets/img/billing-report.png similarity index 100% rename from static/img/billing-report.png rename to assets/img/billing-report.png diff --git a/static/img/cache-list-dark.png b/assets/img/cache-list-dark.png similarity index 100% rename from static/img/cache-list-dark.png rename to assets/img/cache-list-dark.png diff --git a/static/img/cache-list.png b/assets/img/cache-list.png similarity index 100% rename from static/img/cache-list.png rename to assets/img/cache-list.png diff --git a/static/img/cache-manage-dark.png b/assets/img/cache-manage-dark.png similarity index 100% rename from static/img/cache-manage-dark.png rename to assets/img/cache-manage-dark.png diff --git a/static/img/cache-manage.png b/assets/img/cache-manage.png similarity index 100% rename from static/img/cache-manage.png rename to assets/img/cache-manage.png diff --git a/static/img/cache-metrics-dark.png b/assets/img/cache-metrics-dark.png similarity index 100% rename from static/img/cache-metrics-dark.png rename to assets/img/cache-metrics-dark.png diff --git a/static/img/cache-metrics.png b/assets/img/cache-metrics.png similarity index 100% rename from static/img/cache-metrics.png rename to assets/img/cache-metrics.png diff --git a/static/img/deploy-form-dark.png b/assets/img/deploy-form-dark.png similarity index 100% rename from static/img/deploy-form-dark.png rename to assets/img/deploy-form-dark.png diff --git a/static/img/deploy-form.png b/assets/img/deploy-form.png similarity index 100% rename from static/img/deploy-form.png rename to assets/img/deploy-form.png diff --git a/static/img/deployment-detail-dark.png b/assets/img/deployment-detail-dark.png similarity index 100% rename from static/img/deployment-detail-dark.png rename to assets/img/deployment-detail-dark.png diff --git a/static/img/deployment-detail.png b/assets/img/deployment-detail.png similarity index 100% rename from static/img/deployment-detail.png rename to assets/img/deployment-detail.png diff --git a/static/img/deployment-list-dark.png b/assets/img/deployment-list-dark.png similarity index 100% rename from static/img/deployment-list-dark.png rename to assets/img/deployment-list-dark.png diff --git a/static/img/deployment-list.png b/assets/img/deployment-list.png similarity index 100% rename from static/img/deployment-list.png rename to assets/img/deployment-list.png diff --git a/static/img/deployment-metrics-dark.png b/assets/img/deployment-metrics-dark.png similarity index 100% rename from static/img/deployment-metrics-dark.png rename to assets/img/deployment-metrics-dark.png diff --git a/static/img/deployment-metrics.png b/assets/img/deployment-metrics.png similarity index 100% rename from static/img/deployment-metrics.png rename to assets/img/deployment-metrics.png diff --git a/static/img/disk-list-dark.png b/assets/img/disk-list-dark.png similarity index 100% rename from static/img/disk-list-dark.png rename to assets/img/disk-list-dark.png diff --git a/static/img/disk-list.png b/assets/img/disk-list.png similarity index 100% rename from static/img/disk-list.png rename to assets/img/disk-list.png diff --git a/static/img/domain-list-dark.png b/assets/img/domain-list-dark.png similarity index 100% rename from static/img/domain-list-dark.png rename to assets/img/domain-list-dark.png diff --git a/static/img/domain-list.png b/assets/img/domain-list.png similarity index 100% rename from static/img/domain-list.png rename to assets/img/domain-list.png diff --git a/static/img/dropbox-list-dark.png b/assets/img/dropbox-list-dark.png similarity index 100% rename from static/img/dropbox-list-dark.png rename to assets/img/dropbox-list-dark.png diff --git a/static/img/dropbox-list.png b/assets/img/dropbox-list.png similarity index 100% rename from static/img/dropbox-list.png rename to assets/img/dropbox-list.png diff --git a/static/img/logo.png b/assets/img/logo.png similarity index 100% rename from static/img/logo.png rename to assets/img/logo.png diff --git a/static/img/logo.webp b/assets/img/logo.webp similarity index 100% rename from static/img/logo.webp rename to assets/img/logo.webp diff --git a/static/img/notification-detail.png b/assets/img/notification-detail.png similarity index 100% rename from static/img/notification-detail.png rename to assets/img/notification-detail.png diff --git a/static/img/notification-list.png b/assets/img/notification-list.png similarity index 100% rename from static/img/notification-list.png rename to assets/img/notification-list.png diff --git a/static/img/project-list-dark.png b/assets/img/project-list-dark.png similarity index 100% rename from static/img/project-list-dark.png rename to assets/img/project-list-dark.png diff --git a/static/img/project-list.png b/assets/img/project-list.png similarity index 100% rename from static/img/project-list.png rename to assets/img/project-list.png diff --git a/static/img/registry-list-dark.png b/assets/img/registry-list-dark.png similarity index 100% rename from static/img/registry-list-dark.png rename to assets/img/registry-list-dark.png diff --git a/static/img/registry-list.png b/assets/img/registry-list.png similarity index 100% rename from static/img/registry-list.png rename to assets/img/registry-list.png diff --git a/static/img/role-list-dark.png b/assets/img/role-list-dark.png similarity index 100% rename from static/img/role-list-dark.png rename to assets/img/role-list-dark.png diff --git a/static/img/role-list.png b/assets/img/role-list.png similarity index 100% rename from static/img/role-list.png rename to assets/img/role-list.png diff --git a/static/img/route-list-dark.png b/assets/img/route-list-dark.png similarity index 100% rename from static/img/route-list-dark.png rename to assets/img/route-list-dark.png diff --git a/static/img/route-list.png b/assets/img/route-list.png similarity index 100% rename from static/img/route-list.png rename to assets/img/route-list.png diff --git a/static/img/scheduler-detail-dark.png b/assets/img/scheduler-detail-dark.png similarity index 100% rename from static/img/scheduler-detail-dark.png rename to assets/img/scheduler-detail-dark.png diff --git a/static/img/scheduler-detail.png b/assets/img/scheduler-detail.png similarity index 100% rename from static/img/scheduler-detail.png rename to assets/img/scheduler-detail.png diff --git a/static/img/scheduler-list-dark.png b/assets/img/scheduler-list-dark.png similarity index 100% rename from static/img/scheduler-list-dark.png rename to assets/img/scheduler-list-dark.png diff --git a/static/img/scheduler-list.png b/assets/img/scheduler-list.png similarity index 100% rename from static/img/scheduler-list.png rename to assets/img/scheduler-list.png diff --git a/static/img/scoped-token-list-dark.png b/assets/img/scoped-token-list-dark.png similarity index 100% rename from static/img/scoped-token-list-dark.png rename to assets/img/scoped-token-list-dark.png diff --git a/static/img/scoped-token-list.png b/assets/img/scoped-token-list.png similarity index 100% rename from static/img/scoped-token-list.png rename to assets/img/scoped-token-list.png diff --git a/static/img/service-account-list-dark.png b/assets/img/service-account-list-dark.png similarity index 100% rename from static/img/service-account-list-dark.png rename to assets/img/service-account-list-dark.png diff --git a/static/img/service-account-list.png b/assets/img/service-account-list.png similarity index 100% rename from static/img/service-account-list.png rename to assets/img/service-account-list.png diff --git a/static/img/waf-list-dark.png b/assets/img/waf-list-dark.png similarity index 100% rename from static/img/waf-list-dark.png rename to assets/img/waf-list-dark.png diff --git a/static/img/waf-list.png b/assets/img/waf-list.png similarity index 100% rename from static/img/waf-list.png rename to assets/img/waf-list.png diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 87663f5..c9c6b65 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -3,9 +3,11 @@ {{- end }} + {{- $logoWebp := resources.Get "img/logo.webp" | resources.Fingerprint -}} + {{- $logoPng := resources.Get "img/logo.png" | resources.Fingerprint -}} - - + + Deploys.app Docs diff --git a/layouts/shortcodes/shot.html b/layouts/shortcodes/shot.html index 46101dd..546cec4 100644 --- a/layouts/shortcodes/shot.html +++ b/layouts/shortcodes/shot.html @@ -1,11 +1,18 @@ {{- /* Console screenshot framed as an app panel. {{< shot src="/img/foo.png" url="console.deploys.app/…" alt="…" caption="…" >}} - When /img/foo-dark.png exists in static/, both light and dark images are - emitted and CSS swaps them based on the current theme. */ -}} + Images live in assets/img/ and are resolved through Hugo Pipes so the + emitted URL carries a content hash (/img/foo..png) — re-capturing a + screenshot busts the browser/CDN cache automatically, leaving unchanged + ones cached. When assets/img/foo-dark.png exists, both light and dark + images are emitted and CSS swaps them based on the current theme. */ -}} {{- $src := .Get "src" -}} {{- $url := .Get "url" | default "console.deploys.app" -}} {{- $alt := .Get "alt" -}} {{- $cap := .Get "caption" -}} -{{- $darkSrc := replace $src ".png" "-dark.png" -}} -{{- $hasDark := and (ne $darkSrc $src) (fileExists (printf "static%s" $darkSrc)) -}} -
{{ $url }}
{{ $alt }}{{ if $hasDark }}{{ $alt }}{{ end }}
{{ with $cap }}
{{ . | markdownify }}
{{ end }}
+{{- $path := strings.TrimPrefix "/" $src -}} +{{- $res := resources.Get $path -}} +{{- if not $res }}{{ errorf "shot: image not found in assets/ — src=%q (looked up %q)" $src $path }}{{ end -}} +{{- $light := $res | resources.Fingerprint -}} +{{- $darkPath := replace $path ".png" "-dark.png" -}} +{{- $darkRes := and (ne $darkPath $path) (resources.Get $darkPath) -}} +
{{ $url }}
{{ $alt }}{{ if $darkRes }}{{ $dark := $darkRes | resources.Fingerprint }}{{ $alt }}{{ end }}
{{ with $cap }}
{{ . | markdownify }}
{{ end }}
diff --git a/scripts/screenshots/README.md b/scripts/screenshots/README.md index ad3d115..19ac20c 100644 --- a/scripts/screenshots/README.md +++ b/scripts/screenshots/README.md @@ -1,10 +1,14 @@ # Console screenshots -The console screenshots in `static/img/` are captured locally from the +The console screenshots in `assets/img/` are captured locally from the console's mock server in **both themes** — every screen produces a `.png` (light) and a `-dark.png` (dark). The docs `shot` shortcode emits both `` tags and CSS swaps which one is visible -depending on the reader's current theme. +depending on the reader's current theme. The shortcode runs each image +through Hugo Pipes `resources.Fingerprint`, so the published URL carries a +content hash (`/img/..png`) and re-captured screenshots bust the +browser/CDN cache automatically — which is why the source PNGs live under +`assets/` (Hugo Pipes input) rather than `static/` (copied verbatim). The fixtures are enriched first so lists look like a real production project, not the spartan defaults `bun dev:mock` ships with. @@ -14,7 +18,7 @@ not the spartan defaults `bun dev:mock` ships with. | File | Purpose | |---|---| | `mock-enrichment.patch` | Diff against `console/src/lib/server/mock.js` that adds the richer fixtures: 5 deployments, 4 domains, 3 disks, 4 routes, 5 registry repos, 4 roles, 2 service accounts; also fixes the cosmetic `https://https://` URL doubling. | -| `capture.mjs` | Playwright script that drives the console at both light and dark themes and writes PNGs into `../../static/img/`. Handles the deploy form's location → fill interaction. Honors `SHOT_OUT` to override the output dir. | +| `capture.mjs` | Playwright script that drives the console at both light and dark themes and writes PNGs into `../../assets/img/`. Handles the deploy form's location → fill interaction. Honors `SHOT_OUT` to override the output dir. | | `refresh.sh` | End-to-end helper: applies the patch, starts the mock server, copies `capture.mjs` into the console repo (so node resolves `@playwright/test`), runs it, then cleans up — reverts the patch, stops the server, removes the runner (even on interrupt). | ## Refresh the screenshots diff --git a/scripts/screenshots/capture.mjs b/scripts/screenshots/capture.mjs index 5263ea1..3e8886b 100644 --- a/scripts/screenshots/capture.mjs +++ b/scripts/screenshots/capture.mjs @@ -14,7 +14,7 @@ // 3. The console mock server is up: `cd console && bun dev:mock`. Default // port 5173. Set CONSOLE_URL if you ran it on a different port. // -// Writes PNGs into ../../static/img/. +// Writes PNGs into ../../assets/img/. // // Run from the console repo so node resolves @playwright/test: // cd ../../../console && node ../docs/scripts/screenshots/capture.mjs @@ -27,7 +27,7 @@ import { dirname, resolve } from 'node:path' const HERE = dirname(fileURLToPath(import.meta.url)) // SHOT_OUT is set by refresh.sh (this file gets copied around). Fall back to // the standard layout for hand invocations from docs/scripts/screenshots/. -const OUT = process.env.SHOT_OUT || resolve(HERE, '../../static/img') +const OUT = process.env.SHOT_OUT || resolve(HERE, '../../assets/img') const BASE = process.env.CONSOLE_URL || 'http://localhost:5173' const P = 'project=acme' const LOC = 'location=gke.cluster-rcf2' diff --git a/scripts/screenshots/refresh.sh b/scripts/screenshots/refresh.sh index 3ed218a..3e0b0e1 100755 --- a/scripts/screenshots/refresh.sh +++ b/scripts/screenshots/refresh.sh @@ -1,5 +1,5 @@ #!/usr/bin/env bash -# Refresh the console screenshots in static/img/. +# Refresh the console screenshots in assets/img/. # # Assumes: # - The console repo is cloned at ../../console relative to this script @@ -49,12 +49,12 @@ for _ in $(seq 1 30); do sleep 0.5 done -echo "==> capturing screenshots into $docs/static/img/" +echo "==> capturing screenshots into $docs/assets/img/" # ESM resolves @playwright/test relative to the source file's location, not # cwd. Drop capture.mjs into the console repo (which has node_modules) for # the run; the cleanup trap removes it. runner="$console/.shot-runner.mjs" cp "$here/capture.mjs" "$runner" -SHOT_OUT="$docs/static/img" node "$runner" +SHOT_OUT="$docs/assets/img" node "$runner" echo "==> done"