From 53e9803a61361639d687ce1d4d13d93d38c33aa0 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 6 Aug 2026 10:31:13 +0000 Subject: [PATCH] Give every sin a pictogram for navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The gallery and the cross-links were all text, so nothing on either told you what the chart problem actually looked like. Shrinking the bad chart doesn't work here: in nearly every sin the tell lives in the axis, the scale or the legend, which is exactly what a chart loses at thumbnail size. Eight miniatures would have been eight indistinguishable squiggles with the evidence stripped out. So each sin gets a hand-drawn glyph of the tell instead — a cut baseline, a down-pointing axis arrow, class breaks that moved between two ramps. Banner across the top of the gallery tile, small glyph beside each "Often found together" link. Drawn against currentColor plus three theme tokens, so unlike the baked chart SVGs these follow light and dark. Missing thumbnail throws at build, same as an unknown citation key. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01ULE5RRxdQE1ebwefEd2eCM --- CLAUDE.md | 29 ++++++++++++++++++- src/components/RelatedSins.astro | 2 ++ src/components/SinThumb.astro | 19 +++++++++++++ src/lib/thumbs.ts | 37 ++++++++++++++++++++++++ src/pages/index.astro | 2 ++ src/styles/global.css | 42 ++++++++++++++++++++++++++++ src/thumbs/aspect-ratio.svg | 7 +++++ src/thumbs/category-colors.svg | 14 ++++++++++ src/thumbs/dual-axis-correlation.svg | 7 +++++ src/thumbs/incomplete-pie.svg | 7 +++++ src/thumbs/inverted-y-axis.svg | 6 ++++ src/thumbs/rebinned-colour-scale.svg | 16 +++++++++++ src/thumbs/too-many-pie-slices.svg | 10 +++++++ src/thumbs/truncated-y-axis.svg | 5 ++++ 14 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 src/components/SinThumb.astro create mode 100644 src/lib/thumbs.ts create mode 100644 src/thumbs/aspect-ratio.svg create mode 100644 src/thumbs/category-colors.svg create mode 100644 src/thumbs/dual-axis-correlation.svg create mode 100644 src/thumbs/incomplete-pie.svg create mode 100644 src/thumbs/inverted-y-axis.svg create mode 100644 src/thumbs/rebinned-colour-scale.svg create mode 100644 src/thumbs/too-many-pie-slices.svg create mode 100644 src/thumbs/truncated-y-axis.svg diff --git a/CLAUDE.md b/CLAUDE.md index a5e9fcb..0870f28 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -96,7 +96,34 @@ Each sin page follows one shape: **poke → proof → why → the fix → receip a renamed slug fails the build rather than shipping a dead link. - `compareNote` — overrides "Same numbers, both charts," which is wrong on a sin whose whole point is an omission. -4. `npm run dev` and check. The OG card for the sin is generated automatically. +4. Draw the thumbnail: `src/thumbs/.svg` (see "Thumbnails" below). The + build throws if it's missing. +5. `npm run dev` and check. The OG card for the sin is generated automatically. + +## Thumbnails + +Every sin has a hand-drawn pictogram at `src/thumbs/.svg`, used as a +banner across the top of its gallery tile and as a small glyph in the +"Often found together" cross-links. Lookup is `src/lib/thumbs.ts`, rendered by +`SinThumb.astro`; a missing file fails the build. + +- **A symbol of the sin, not a shrunken chart.** In nearly every sin the tell + lives in the axis, the scale or the legend — exactly what a chart loses when + you shrink it to 120px. A miniature of the bad chart throws away the evidence + and leaves a gallery of indistinguishable squiggles. Draw the *tell*: a cut + baseline, a down-pointing axis arrow, class breaks that moved. +- **The glyph shows the sin, not the fix.** The tile is a rogues' gallery you + scan for the one you recognise; the correction lives on the page. +- `viewBox="0 0 72 48"`, `fill="none"`, stroke-width 2 for structure. Neutral + linework is `currentColor`; the offending element takes `var(--thumb-accent)`. + `--thumb-alt` and `--thumb-third` exist for glyphs that need to show two or + three distinct series (dual axis, mismatched category colours). +- Those three vars resolve to site tokens in `global.css`, so **unlike the + charts, thumbnails follow the light/dark theme** — they don't need the fixed + `--chart-canvas`, and they must stay legible on both `--layer-02` surfaces. +- Check the result at both sizes: the banner is ~72px tall, the cross-link + glyph ~36px. A glyph that needs more than about six strokes won't survive the + smaller one. ## Design & rendering diff --git a/src/components/RelatedSins.astro b/src/components/RelatedSins.astro index 74d22c0..444e928 100644 --- a/src/components/RelatedSins.astro +++ b/src/components/RelatedSins.astro @@ -2,6 +2,7 @@ // "While you're here" — the other sins a chart like this usually commits. // Charts rarely break one rule at a time, and the person you sent this to may // need the neighbouring page more than this one. Renders nothing when empty. +import SinThumb from './SinThumb.astro'; import { href } from '../lib/url'; import { severityUnits } from '../lib/charts'; @@ -19,6 +20,7 @@ const { sins } = Astro.props;