shots: the site's screenshots are the spin release's own now, so brand holds none (R8)

.github/workflows/pages.yml

@@ -1,6 +1,6 @@
 name: Pages
 
-# Checks the palette, the mark and the screenshots against their sources on every push and pull request, and
+# Checks the palette, the mark and the screens against their sources on every push and pull request, and
 # publishes main to GitHub Pages: index.html with dist/, logos/, fonts/ and assets/ beside it.
 
 on:

README.md

@@ -6,15 +6,14 @@ variables) and anything else (`dist/tokens.json`).
 
 **[See it](https://spin-stack.github.io/brand/)**: `index.html` is the laboratory.
 It draws the site's landing and a docs page, the dashboard's workspaces with their states, a
-dialog and a toast; the app as it is, in screenshots spin's own suite takes; the mark's guide -
+dialog and a toast; where the app as it is is shown; the mark's guide -
 sizes, clear space, the lockup, the grounds it goes on and what it is not; the palette by what
 each color is for; and the same page at a phone's and a tablet's width - in dark or light and
 through protanopia, deuteranopia or tritanopia, with every pair the palette is held to.
 
 | Source | What it makes |
 |---|---|
 | `palette.toml` | `dist/`: `tokens.css` (every role as `--spin-*`), `starlight.css` (the website's `--sl-color-*`), `dashboard.css` (shadcn's HSL variables, light on `:root`, dark on `.dark`, and the dashboard's radius, scrim, dense type scale, heading tracking and motion), `tokens.json`, and `perception.js` and `simulate.svg` for the preview |
-| spin's `dashboard/e2e/site.spec.ts` | `shots/`: the app as it is, screenshots spin's dashboard suite takes of its e2e stack, with the release and commit of the spin tree that took them (`task screenshots SHOTS=<dir>`); the website copies them from here |
 | spin's `dashboard/e2e/catalog.spec.ts` | `screens/`: every route, tab, dialog and menu of the app in both themes at 1440 and 390 px, and what each draws that this palette does not have - a colour, a face, a size, a radius, contrast, overflow, a target too small (`task screens SCREENS=<dir>`). The catalog and the audit are committed; the images, hundreds a release, are an archive on a release of this repository that `screens.json` names and Pages unpacks. [See them](https://spin-stack.github.io/brand/screens.html) |
 | `assets/mark.png` | `logos/`: the stack of disks, cut from the mark as it was drawn (1024 px on a clear ground): the tile on the brand's navy (512, 256; the touch icon at 180, the favicon at 64 and 32) for a dark ground, and clear (512, 256) for a light one. Each is the drawing reduced; a size it would have to enlarge fails |
 

Taskfile.yml

@@ -25,13 +25,6 @@ tasks:
     cmds:
       - go run ./cmd/mark
 
-  screenshots:
-    desc: Take the app's screenshots from SHOTS=, where `SITE_SHOTS=<dir> task e2e:dashboard -- site.spec.ts` in a spin checkout (SPIN=, by default ../spin) wrote them, with that checkout's release.
-    vars:
-      SPIN: '{{.SPIN | default "../spin"}}'
-    cmds:
-      - go run ./cmd/shots -spin {{.SPIN}} -from {{.SHOTS}}
-
   screens:
     desc: Keep every screen of the app from SCREENS=, where `CATALOG_SHOTS=<dir> task e2e:dashboard -- catalog.spec.ts` in a spin checkout (SPIN=, by default ../spin) wrote them - the catalog and the audit in screens/, the images on a release of this repository.
     vars:
@@ -45,15 +38,14 @@ tasks:
       - python3 -m http.server 4330 --bind 127.0.0.1
 
   check:
-    desc: What CI runs - fail if a pair is below its floor, dist/ or logos/ is not what the sources make, shots/ lacks a screenshot it lists, a workflow step is not one task, or an install skips Socket Firewall.
+    desc: What CI runs - fail if a pair is below its floor, dist/ or logos/ is not what the sources make, a workflow step is not one task, or an install skips Socket Firewall.
     cmds:
       - go tool taskgate
       - go tool sfw check
       - go vet ./...
       - go test ./...
       - go run ./cmd/palette -check
       - go run ./cmd/mark -check
-      - go run ./cmd/shots -check
       - go run ./cmd/screens -check
 
   screens:download:

index.html

@@ -77,9 +77,6 @@
 .group h3 { font-size: 14px; margin: 0 0 .25rem; } .group p { margin: 0; font-size: 13px; }
 .group .example { margin-top: .75rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-size: 14px; }
 
-/* The app's screenshots */
-.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
-.shots figure { margin: 0; } .shots img { width: 100%; border-radius: var(--spin-radius); border: 1px solid var(--spin-border); display: block; }
 
 /* The docs' contents on a narrow screen: a disclosure where the side column was. */
 .otp { display: none; margin-bottom: 1rem; border: 1px solid var(--spin-border); border-radius: var(--spin-radius-sm); background: var(--spin-raised); }
@@ -256,8 +253,7 @@ <h3 style="margin:0">Workspaces</h3>
 
 <section class="only-full" id="app">
 	<span class="label">The app, as it is</span>
-	<p class="muted" id="shots-note">Screenshots spin's own dashboard suite takes of a real installation (<code>shots/</code>, by <code>task screenshots</code>).</p>
-	<div class="shots" id="shots"></div>
+	<p class="muted">Every screen of it in both themes, and what each draws that this palette does not have, is <a href="screens.html">the catalog</a>. The screenshots the site shows are of the spin release it documents, put on that release by spin's site-shots.yml: <a href="https://spin-stack.github.io/website/use/dashboard/">the dashboard</a>.</p>
 </section>
 
 <div class="part only-full" id="decisions"><span class="num">2</span><div><h2>Decisions</h2><p class="muted">What the brand is: the mark and how it is used, and the palette, each color by what it is for. These are what palette.toml and the mark's cut hold.</p></div></div>
@@ -347,11 +343,6 @@ <h3>Not</h3>
 		roles.map((r) => { const v = cs.getPropertyValue('--spin-' + r).trim(); return `<div class="sw"><i style="background:${v}"></i><b>${r}</b><code>${v}</code></div>`; }).join('') +
 		'</div></div>').join('');
 }
-fetch('shots/shots.json').then((r) => r.ok ? r.json() : null).then((s) => {
-	if (!s) { document.getElementById('shots-note').textContent = 'No screenshots yet: task screenshots takes them from spin.'; return; }
-	document.getElementById('shots-note').innerHTML = `Screenshots of spin <code>${s.release}</code>, taken by its dashboard suite on a real installation - each by a test that first checks the screen shows what its title says.`;
-	document.getElementById('shots').innerHTML = s.shots.map((x) => `<figure><img src="shots/${x.name}.png" alt="${x.test}" loading="lazy"><figcaption>${x.test}</figcaption></figure>`).join('');
-});
 const views = ['drawn','ips','dim','protan','deutan','tritan','protan+ips','deutan+ips'];
 document.getElementById('perc').innerHTML = '<tr><th>mode</th><th>kind</th><th>pair</th><th>floor</th>' + views.map((v) => `<th>${v}</th>`).join('') + '</tr>' +
 	perception.map((r) => `<tr><td>${r.Mode}</td><td>${r.Kind}</td><td>${r.What}</td><td>${r.Distance ? r.Floor + '/' + r.Worst : r.Floor + ':1'}</td>` +