deploys-app · acoshift · Jun 23, 2026 · Jun 23, 2026
diff --git 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/<name>.<hash>.png`) so a
+re-captured screenshot busts the browser/CDN cache automatically.
diff --git a/static/img/billing-report-dark.png → assets/img/billing-report-dark.png b/static/img/billing-report-dark.png → assets/img/billing-report-dark.png
diff --git a/static/img/billing-report.png → assets/img/billing-report.png b/static/img/billing-report.png → assets/img/billing-report.png
diff --git a/static/img/cache-list-dark.png → assets/img/cache-list-dark.png b/static/img/cache-list-dark.png → assets/img/cache-list-dark.png
diff --git a/static/img/cache-list.png → assets/img/cache-list.png b/static/img/cache-list.png → assets/img/cache-list.png
diff --git a/static/img/cache-manage-dark.png → assets/img/cache-manage-dark.png b/static/img/cache-manage-dark.png → assets/img/cache-manage-dark.png
diff --git a/static/img/cache-manage.png → assets/img/cache-manage.png b/static/img/cache-manage.png → assets/img/cache-manage.png
diff --git a/static/img/cache-metrics-dark.png → assets/img/cache-metrics-dark.png b/static/img/cache-metrics-dark.png → assets/img/cache-metrics-dark.png
diff --git a/static/img/cache-metrics.png → assets/img/cache-metrics.png b/static/img/cache-metrics.png → assets/img/cache-metrics.png
diff --git a/static/img/deploy-form-dark.png → assets/img/deploy-form-dark.png b/static/img/deploy-form-dark.png → assets/img/deploy-form-dark.png
diff --git a/static/img/deploy-form.png → assets/img/deploy-form.png b/static/img/deploy-form.png → assets/img/deploy-form.png
diff --git a/static/img/deployment-detail-dark.png → assets/img/deployment-detail-dark.png b/static/img/deployment-detail-dark.png → assets/img/deployment-detail-dark.png
diff --git a/static/img/deployment-detail.png → assets/img/deployment-detail.png b/static/img/deployment-detail.png → assets/img/deployment-detail.png
diff --git a/static/img/deployment-list-dark.png → assets/img/deployment-list-dark.png b/static/img/deployment-list-dark.png → assets/img/deployment-list-dark.png
diff --git a/static/img/deployment-list.png → assets/img/deployment-list.png b/static/img/deployment-list.png → assets/img/deployment-list.png
diff --git a/static/img/deployment-metrics-dark.png → assets/img/deployment-metrics-dark.png b/static/img/deployment-metrics-dark.png → assets/img/deployment-metrics-dark.png
diff --git a/static/img/deployment-metrics.png → assets/img/deployment-metrics.png b/static/img/deployment-metrics.png → assets/img/deployment-metrics.png
diff --git a/static/img/disk-list-dark.png → assets/img/disk-list-dark.png b/static/img/disk-list-dark.png → assets/img/disk-list-dark.png
diff --git a/static/img/disk-list.png → assets/img/disk-list.png b/static/img/disk-list.png → assets/img/disk-list.png
diff --git a/static/img/domain-list-dark.png → assets/img/domain-list-dark.png b/static/img/domain-list-dark.png → assets/img/domain-list-dark.png
diff --git a/static/img/domain-list.png → assets/img/domain-list.png b/static/img/domain-list.png → assets/img/domain-list.png
diff --git a/static/img/dropbox-list-dark.png → assets/img/dropbox-list-dark.png b/static/img/dropbox-list-dark.png → assets/img/dropbox-list-dark.png
diff --git a/static/img/dropbox-list.png → assets/img/dropbox-list.png b/static/img/dropbox-list.png → assets/img/dropbox-list.png
diff --git a/static/img/logo.png → assets/img/logo.png b/static/img/logo.png → assets/img/logo.png
diff --git a/static/img/logo.webp → assets/img/logo.webp b/static/img/logo.webp → assets/img/logo.webp
diff --git a/static/img/notification-detail.png → assets/img/notification-detail.png b/static/img/notification-detail.png → assets/img/notification-detail.png
diff --git a/static/img/notification-list.png → assets/img/notification-list.png b/static/img/notification-list.png → assets/img/notification-list.png
diff --git a/static/img/project-list-dark.png → assets/img/project-list-dark.png b/static/img/project-list-dark.png → assets/img/project-list-dark.png
diff --git a/static/img/project-list.png → assets/img/project-list.png b/static/img/project-list.png → assets/img/project-list.png
diff --git a/static/img/registry-list-dark.png → assets/img/registry-list-dark.png b/static/img/registry-list-dark.png → assets/img/registry-list-dark.png
diff --git a/static/img/registry-list.png → assets/img/registry-list.png b/static/img/registry-list.png → assets/img/registry-list.png
diff --git a/static/img/role-list-dark.png → assets/img/role-list-dark.png b/static/img/role-list-dark.png → assets/img/role-list-dark.png
diff --git a/static/img/role-list.png → assets/img/role-list.png b/static/img/role-list.png → assets/img/role-list.png
diff --git a/static/img/route-list-dark.png → assets/img/route-list-dark.png b/static/img/route-list-dark.png → assets/img/route-list-dark.png
diff --git a/static/img/route-list.png → assets/img/route-list.png b/static/img/route-list.png → assets/img/route-list.png
diff --git a/static/img/scheduler-detail-dark.png → assets/img/scheduler-detail-dark.png b/static/img/scheduler-detail-dark.png → assets/img/scheduler-detail-dark.png
diff --git a/static/img/scheduler-detail.png → assets/img/scheduler-detail.png b/static/img/scheduler-detail.png → assets/img/scheduler-detail.png
diff --git a/static/img/scheduler-list-dark.png → assets/img/scheduler-list-dark.png b/static/img/scheduler-list-dark.png → assets/img/scheduler-list-dark.png
diff --git a/static/img/scheduler-list.png → assets/img/scheduler-list.png b/static/img/scheduler-list.png → assets/img/scheduler-list.png
diff --git a/static/img/scoped-token-list-dark.png → assets/img/scoped-token-list-dark.png b/static/img/scoped-token-list-dark.png → assets/img/scoped-token-list-dark.png
diff --git a/static/img/scoped-token-list.png → assets/img/scoped-token-list.png b/static/img/scoped-token-list.png → assets/img/scoped-token-list.png
diff --git a/static/img/service-account-list-dark.png → assets/img/service-account-list-dark.png b/static/img/service-account-list-dark.png → assets/img/service-account-list-dark.png
diff --git a/static/img/service-account-list.png → assets/img/service-account-list.png b/static/img/service-account-list.png → assets/img/service-account-list.png
diff --git a/static/img/waf-list-dark.png → assets/img/waf-list-dark.png b/static/img/waf-list-dark.png → assets/img/waf-list-dark.png
diff --git a/static/img/waf-list.png → assets/img/waf-list.png b/static/img/waf-list.png → assets/img/waf-list.png
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -3,9 +3,11 @@
 	<label class="navbar-burger" for="nav-toggle" aria-label="Toggle navigation">{{ partial "icon" "menu" }}</label>
 	{{- end }}
 	<a class="navbar-brand" href="/">
+		{{- $logoWebp := resources.Get "img/logo.webp" | resources.Fingerprint -}}
+		{{- $logoPng := resources.Get "img/logo.png" | resources.Fingerprint -}}
 		<picture>
-			<source srcset="/img/logo.webp" type="image/webp">
-			<img class="brand-logo" src="/img/logo.png" width="26" height="26" alt="Deploys.app" decoding="async">
+			<source srcset="{{ $logoWebp.RelPermalink }}" type="image/webp">
+			<img class="brand-logo" src="{{ $logoPng.RelPermalink }}" width="26" height="26" alt="Deploys.app" decoding="async">
 		</picture>
 		Deploys.app
 		<span class="tag">Docs</span>

diff --git 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.<hash>.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)) -}}
-<figure class="shot"><div class="shot-frame"><div class="shot-chrome"><span class="shot-dots"><i></i><i></i><i></i></span><span class="shot-url">{{ $url }}</span></div><img class="shot-light" src="{{ $src }}" alt="{{ $alt }}" loading="lazy">{{ if $hasDark }}<img class="shot-dark" src="{{ $darkSrc }}" alt="{{ $alt }}" loading="lazy">{{ end }}</div>{{ with $cap }}<figcaption class="shot-caption">{{ . | markdownify }}</figcaption>{{ end }}</figure>
+{{- $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) -}}
+<figure class="shot"><div class="shot-frame"><div class="shot-chrome"><span class="shot-dots"><i></i><i></i><i></i></span><span class="shot-url">{{ $url }}</span></div><img class="shot-light" src="{{ $light.RelPermalink }}" alt="{{ $alt }}" loading="lazy">{{ if $darkRes }}{{ $dark := $darkRes | resources.Fingerprint }}<img class="shot-dark" src="{{ $dark.RelPermalink }}" alt="{{ $alt }}" loading="lazy">{{ end }}</div>{{ with $cap }}<figcaption class="shot-caption">{{ . | markdownify }}</figcaption>{{ end }}</figure>
diff --git 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
 `<name>.png` (light) and a `<name>-dark.png` (dark). The docs `shot`
 shortcode emits both `<img>` 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/<name>.<hash>.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
@@ -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
@@ -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"