Evidence — cookbook & recipes collection (ZER0-084)¶
Visual evidence for the recipes collection: the recipe.html page, the cookbook.html index, and the scaling/unit-conversion engine that drives them. Generated by test/visual/recipes-evidence.mjs (reuses the shared evidence-kit primitives) against the theme's built-in demo cookbook, pages/_recipes/.
This is a new feature, so there is no prior page to compare against — the "before" state is a 404. The before/after that does matter here is the scaler's own effect, and it is captured directly: 02 and 03 show the same served HTML as the reader rescales and converts it.
| File | Shows |
|---|---|
01-recipe-page.png |
The whole recipe page as authored — fact bar, scaler, ingredient checklist, method, ratio table, nutrition — at 1280px and 390px |
02-scaling-conversion.png |
One recipe authored in cups: as written, at 2× (amounts doubled, units untouched), and in metric (volumes resolved to weights via _data/ingredient_densities.yml) |
03-ratio-table.png |
Baker's percentages holding at 1× and 3× while only the weight column moves — 500 g → 1500 g flour, 100% either way |
04-cookbook-index.png |
The cookbook landing page: cover, course jump-nav, and recipes grouped into course sections, at 1280px and 390px |
05-no-javascript.png |
The same recipe with scripting disabled — every amount still rendered by Jekyll exactly as authored, and the control bar hidden rather than offering dead buttons |
metrics.json |
Page-overflow sweep for the recipe and index routes across 320–1440px (0px everywhere), plus the literal conversion results and ratio rows, so a regression in the unit tables shows up as a number in the diff rather than only in a screenshot |
The conversions recorded in metrics.json are the load-bearing numbers: 1 cup unsalted butter → 227 g, 2¼ cups all-purpose flour → 281 g, 1 tsp kosher salt → 3 g (Diamond Crystal, pinned with grams_per_cup:), and in the other direction 500 g bread flour → 4 cups. Percentages are identical at 1× and 3× because they are computed by Jekyll at build time, not in the browser.
Regression coverage: test/visual/features/recipes.spec.js (smoke tier, @critical) pins the single H1 and derived total time, the amount/name whitespace join that Liquid stripping once ate, build-time ratio percentages, the no-JavaScript fallback, scaling, both conversion directions, oven-temperature switching, per-serving nutrition staying put, singular/plural for countables, reset, ?servings= links, the unskipped heading levels on the index, and phone-width overflow.