jekyll-theme-zer0 1.28.0 → 1.29.0

data/_includes/components/recipe-ingredients.html

@@ -0,0 +1,90 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-ingredients
+  Path:        _includes/components/recipe-ingredients.html
+  Purpose:     The ingredient list for one recipe — optionally grouped into
+               sub-lists ("Dough", "Topping"), each amount scalable and
+               convertible, each line check-off-able as you cook.
+  Params:      ingredients (array, optional, default: page.ingredients)
+               heading (string, optional, default: "Ingredients")
+               heading_level (string, optional, default: "h2")
+               id_prefix (string, optional, default: page.slug) — checkbox ids
+               checklist (bool, optional, default: true) — false renders a
+                 plain list with no checkboxes
+  Depends on:  components/recipe-qty.html, _data/ingredient_densities.yml,
+               assets/js/recipe-scaler.js, _sass/components/_recipe.scss
+  Notes:       Accepts a flat list of items or a list of {group, items} groups,
+               and tolerates the two mixed. Densities resolve as
+               item.grams_per_cup → _data/ingredient_densities[slug] → none;
+               without one, a volume can never be converted to a weight.
+               Each line carries itemprop="recipeIngredient" for schema.org.
+               Author `singular:` alongside a countable `item:` ("large eggs"
+               + "large egg") and the scaler swaps the wording once the amount
+               drops to one or below, so halving a batch does not print
+               "1 large eggs".
+{%- endcomment -%}
+{%- assign _ri_ingredients = include.ingredients | default: page.ingredients -%}
+{%- if _ri_ingredients == nil or _ri_ingredients.size == 0 -%}
+  {%- comment -%} recipe-ingredients: no `ingredients` front matter — skipping render {%- endcomment -%}
+{%- else -%}
+{%- assign _ri_hl = include.heading_level | default: "h2" -%}
+{%- assign _ri_prefix = include.id_prefix | default: page.slug | default: "recipe" -%}
+{%- assign _ri_checklist = true -%}
+{%- if include.checklist == false -%}{%- assign _ri_checklist = false -%}{%- endif -%}
+{%- assign _ri_n = 0 -%}
+<section class="recipe-ingredients" aria-labelledby="{{ _ri_prefix }}-ingredients-heading">
+  <{{ _ri_hl }} id="{{ _ri_prefix }}-ingredients-heading" class="recipe-section-heading">
+    <i class="bi bi-basket3 me-2" aria-hidden="true"></i>{{ include.heading | default: "Ingredients" }}
+  </{{ _ri_hl }}>
+
+  {%- for _ri_entry in _ri_ingredients -%}
+    {%- if _ri_entry.items -%}
+      {%- assign _ri_group_name = _ri_entry.group | default: _ri_entry.title -%}
+      {%- assign _ri_loop_items = _ri_entry.items -%}
+    {%- else -%}
+      {%- assign _ri_group_name = nil -%}
+      {%- assign _ri_loop_items = "" | split: "" | push: _ri_entry -%}
+    {%- endif -%}
+    {%- assign _ri_sub = _ri_hl | remove: "h" | plus: 1 -%}
+
+    {%- if _ri_group_name -%}
+  <h{{ _ri_sub }} class="recipe-ingredient-group-title">{{ _ri_group_name | escape }}</h{{ _ri_sub }}>
+    {%- endif -%}
+
+  <ul class="recipe-ingredient-list list-unstyled">
+    {%- for _ri_i in _ri_loop_items -%}
+      {%- assign _ri_n = _ri_n | plus: 1 -%}
+      {%- assign _ri_id = _ri_prefix | append: "-ing-" | append: _ri_n -%}
+      {%- assign _ri_slug = _ri_i.item | default: "" | downcase | strip | replace: " ", "-" -%}
+      {%- assign _ri_gpc = _ri_i.grams_per_cup | default: site.data.ingredient_densities[_ri_slug] -%}
+    <li class="recipe-ingredient{% if _ri_i.optional %} recipe-ingredient--optional{% endif %}">
+      <div class="form-check">
+        {%- if _ri_checklist -%}
+        <input class="form-check-input recipe-ingredient-check" type="checkbox" id="{{ _ri_id }}" data-recipe-check>
+        {%- endif -%}
+        <label class="form-check-label" {% if _ri_checklist %}for="{{ _ri_id }}"{% endif %} itemprop="recipeIngredient">
+          {%- comment -%}
+            The space before `endif` is load-bearing: it separates the amount
+            from the ingredient name in the accessible text and in the
+            recipeIngredient microdata, not just visually. Neither the
+            include nor the closing tag may trim it, so both are written
+            without the whitespace-stripping dash on that side.
+          {%- endcomment -%}
+          {%- if _ri_i.qty -%}
+          {%- include components/recipe-qty.html qty=_ri_i.qty qty_max=_ri_i.qty_max unit=_ri_i.unit grams_per_cup=_ri_gpc weigh=_ri_i.weigh scale=_ri_i.scale class="recipe-ingredient-amount" %} {% endif -%}
+          <span class="recipe-ingredient-name"{% if _ri_i.singular %} data-recipe-name data-singular="{{ _ri_i.singular | escape }}" data-plural="{{ _ri_i.item | escape }}"{% endif %}>
+            {%- if _ri_i.link -%}<a href="{{ _ri_i.link }}">{{ _ri_i.item | escape }}</a>{%- else -%}{{ _ri_i.item | escape }}{%- endif -%}
+          </span>
+          {%- if _ri_i.prep %}<span class="recipe-ingredient-prep">, {{ _ri_i.prep | escape }}</span>{% endif -%}
+          {%- if _ri_i.optional %} <span class="badge rounded-pill text-bg-secondary recipe-ingredient-badge">optional</span>{% endif -%}
+        </label>
+      </div>
+      {%- if _ri_i.note -%}
+      <p class="recipe-ingredient-note small text-body-secondary mb-0">{{ _ri_i.note | escape }}</p>
+      {%- endif -%}
+    </li>
+    {%- endfor -%}
+  </ul>
+  {%- endfor -%}
+</section>
+{%- endif -%}

data/_includes/components/recipe-meta.html

@@ -0,0 +1,96 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-meta
+  Path:        _includes/components/recipe-meta.html
+  Purpose:     The fact bar for one recipe — prep/cook/rest/total time, what it
+               makes, difficulty, cuisine, and oven temperature.
+  Params:      recipe (doc, optional, default: page) — any recipes-collection
+                 document; pass one to render the bar for a different recipe
+               class (string, optional, default: "")
+  Depends on:  components/recipe-duration.html, components/recipe-qty.html,
+               components/recipe-temp.html, _sass/components/_recipe.scss
+  Notes:       Total time is `times.total` when authored, otherwise the sum of
+               prep + cook + rest. The "Makes" tile is a scalable quantity, so
+               it tracks the serving scaler rather than going stale. Every tile
+               is skipped when its front matter is absent — a recipe with only
+               a cook time renders one tile, not five empty ones.
+{%- endcomment -%}
+{%- assign _rm_r = include.recipe | default: page -%}
+{%- assign _rm_t = _rm_r.times -%}
+{%- assign _rm_prep = _rm_t.prep | default: 0 -%}
+{%- assign _rm_cook = _rm_t.cook | default: 0 -%}
+{%- assign _rm_rest = _rm_t.rest | default: 0 -%}
+{%- if _rm_t.total -%}
+  {%- assign _rm_total = _rm_t.total -%}
+{%- else -%}
+  {%- assign _rm_total = _rm_prep | plus: _rm_cook | plus: _rm_rest -%}
+{%- endif -%}
+{%- capture _rm_prep_h -%}{%- include components/recipe-duration.html minutes=_rm_prep -%}{%- endcapture -%}
+{%- capture _rm_cook_h -%}{%- include components/recipe-duration.html minutes=_rm_cook -%}{%- endcapture -%}
+{%- capture _rm_rest_h -%}{%- include components/recipe-duration.html minutes=_rm_rest -%}{%- endcapture -%}
+{%- capture _rm_total_h -%}{%- include components/recipe-duration.html minutes=_rm_total -%}{%- endcapture -%}
+{%- assign _rm_prep_h = _rm_prep_h | strip -%}
+{%- assign _rm_cook_h = _rm_cook_h | strip -%}
+{%- assign _rm_rest_h = _rm_rest_h | strip -%}
+{%- assign _rm_total_h = _rm_total_h | strip -%}
+{%- assign _rm_has_any = false -%}
+{%- if _rm_prep_h != "" or _rm_cook_h != "" or _rm_total_h != "" or _rm_r.yield or _rm_r.difficulty or _rm_r.cuisine or _rm_r.oven -%}
+  {%- assign _rm_has_any = true -%}
+{%- endif -%}
+{%- if _rm_has_any == false -%}
+  {%- comment -%} recipe-meta: no time/yield/difficulty front matter — skipping render {%- endcomment -%}
+{%- else -%}
+<dl class="recipe-meta {{ include.class | default: '' }}">
+  {%- if _rm_prep_h != "" -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-scissors me-1" aria-hidden="true"></i>Prep</dt>
+    <dd itemprop="prepTime">{{ _rm_prep_h }}</dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_cook_h != "" -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-fire me-1" aria-hidden="true"></i>Cook</dt>
+    <dd itemprop="cookTime">{{ _rm_cook_h }}</dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_rest_h != "" -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-moon-stars me-1" aria-hidden="true"></i>{{ _rm_r.times.rest_label | default: "Rest" }}</dt>
+    <dd>{{ _rm_rest_h }}</dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_total_h != "" -%}
+  <div class="recipe-meta-item recipe-meta-item--total">
+    <dt><i class="bi bi-clock-history me-1" aria-hidden="true"></i>Total</dt>
+    <dd itemprop="totalTime">{{ _rm_total_h }}</dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_r.yield and _rm_r.yield.amount -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-pie-chart me-1" aria-hidden="true"></i>Makes</dt>
+    <dd itemprop="recipeYield">{%- include components/recipe-qty.html qty=_rm_r.yield.amount unit=_rm_r.yield.unit -%}</dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_r.difficulty -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-bar-chart me-1" aria-hidden="true"></i>Difficulty</dt>
+    <dd><span class="recipe-difficulty recipe-difficulty--{{ _rm_r.difficulty | downcase | strip }}">{{ _rm_r.difficulty | capitalize }}</span></dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_r.cuisine -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-globe2 me-1" aria-hidden="true"></i>Cuisine</dt>
+    <dd itemprop="recipeCuisine">{{ _rm_r.cuisine | escape }}</dd>
+  </div>
+  {%- endif -%}
+  {%- if _rm_r.oven.temp_f or _rm_r.oven.temp_c -%}
+  <div class="recipe-meta-item">
+    <dt><i class="bi bi-thermometer-half me-1" aria-hidden="true"></i>Oven</dt>
+    <dd>
+      {%- include components/recipe-temp.html f=_rm_r.oven.temp_f c=_rm_r.oven.temp_c -%}
+      {%- if _rm_r.oven.mode %} <span class="text-body-secondary">({{ _rm_r.oven.mode | escape }})</span>{% endif -%}
+    </dd>
+  </div>
+  {%- endif -%}
+</dl>
+{%- endif -%}

data/_includes/components/recipe-nutrition.html

@@ -0,0 +1,57 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-nutrition
+  Path:        _includes/components/recipe-nutrition.html
+  Purpose:     Per-serving nutrition panel, marked up as schema.org
+               NutritionInformation.
+  Params:      recipe (doc, optional, default: page)
+               heading (string, optional, default: "Nutrition")
+               heading_level (string, optional, default: "h2")
+  Depends on:  _sass/components/_recipe.scss
+  Notes:       Always shown PER SERVING, and deliberately NOT scaled — a
+               serving is a serving however many you make. Author
+               `nutrition.basis: total` and the figures are divided by
+               `yield.amount` at build time. Values are whatever the author
+               entered; the component adds an estimate disclaimer rather than
+               implying a lab analysis.
+{%- endcomment -%}
+{%- assign _rn_r = include.recipe | default: page -%}
+{%- assign _rn_n = _rn_r.nutrition -%}
+{%- if _rn_n == nil or _rn_n.calories == nil -%}
+  {%- comment -%} recipe-nutrition: no `nutrition` front matter — skipping render {%- endcomment -%}
+{%- else -%}
+{%- assign _rn_hl = include.heading_level | default: "h2" -%}
+{%- assign _rn_divisor = 1 -%}
+{%- if _rn_n.basis == "total" and _rn_r.yield.amount and _rn_r.yield.amount > 0 -%}
+  {%- assign _rn_divisor = _rn_r.yield.amount -%}
+{%- endif -%}
+{%- comment -%} Force float division so 2410 / 12 is not floored to 200. {%- endcomment -%}
+{%- assign _rn_divisor_f = _rn_divisor | times: 1.0 -%}
+{%- assign _rn_rows = "calories,Calories,kcal|protein,Protein,g|carbohydrates,Carbohydrates,g|sugar,Sugars,g|fiber,Fibre,g|fat,Fat,g|saturated_fat,Saturated fat,g|sodium,Sodium,mg|cholesterol,Cholesterol,mg" | split: "|" -%}
+{%- assign _rn_props = "calories,proteinContent,carbohydrateContent,sugarContent,fiberContent,fatContent,saturatedFatContent,sodiumContent,cholesterolContent" | split: "," -%}
+<section class="recipe-nutrition" itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
+  <{{ _rn_hl }} class="recipe-section-heading">
+    <i class="bi bi-heart-pulse me-2" aria-hidden="true"></i>{{ include.heading | default: "Nutrition" }}
+  </{{ _rn_hl }}>
+  <p class="recipe-nutrition-basis text-body-secondary small">
+    Per {{ _rn_r.yield.singular | default: "serving" | escape }}, estimated{% if _rn_divisor != 1 %} from the batch total{% endif %}.
+  </p>
+  <dl class="recipe-nutrition-grid">
+    {%- for _rn_row in _rn_rows -%}
+      {%- assign _rn_parts = _rn_row | split: "," -%}
+      {%- assign _rn_key = _rn_parts[0] -%}
+      {%- assign _rn_value = _rn_n[_rn_key] -%}
+      {%- if _rn_value -%}
+        {%- assign _rn_shown = _rn_value | divided_by: _rn_divisor_f -%}
+        {%- assign _rn_shown_i = _rn_shown | round -%}
+    <div class="recipe-nutrition-item">
+      <dt>{{ _rn_parts[1] }}</dt>
+      <dd itemprop="{{ _rn_props[forloop.index0] }}">
+        {%- if _rn_shown == _rn_shown_i -%}{{ _rn_shown_i }}{%- else -%}{{ _rn_shown | round: 1 }}{%- endif %} {{ _rn_parts[2] }}
+      </dd>
+    </div>
+      {%- endif -%}
+    {%- endfor -%}
+  </dl>
+</section>
+{%- endif -%}

data/_includes/components/recipe-qty.html

@@ -0,0 +1,73 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-qty
+  Path:        _includes/components/recipe-qty.html
+  Purpose:     One scalable, convertible quantity — the atom every other recipe
+               component is built from. Renders the amount exactly as authored
+               (so the page is complete and correct with JavaScript disabled)
+               plus the data attributes assets/js/recipe-scaler.js needs to
+               rescale and convert it in place.
+  Params:      qty (number, required)            — base amount for 1× yield
+               qty_max (number, optional)        — upper bound; renders "2–3"
+               unit (string, optional, default: "") — as authored: g, cups, …
+               grams_per_cup (number, optional)  — density for volume↔weight
+               weigh (bool, optional, default: true)  — false opts this
+                                                   quantity out of volume→weight
+               scale (bool, optional, default: true)  — false pins the amount
+                                                   (per-serving nutrition, pan
+                                                   sizes, "a pinch")
+               class (string, optional, default: "") — extra wrapper classes
+  Depends on:  assets/js/recipe-scaler.js, _sass/components/_recipe.scss
+  Notes:       Cup, spoon and countable amounts render with vulgar fractions
+               (0.5 → ½) so recipes read like recipes; unrecognised decimals
+               fall back to two-decimal rounding. Metric units stay decimal —
+               a scale shows 40.5 g, not 40½ g. The unit is echoed verbatim —
+               the scaler only rewrites it when the reader converts units.
+{%- endcomment -%}
+{%- if include.qty == nil or include.qty == "" -%}
+  {%- comment -%} ERROR: recipe-qty requires `qty` {%- endcomment -%}
+{%- else -%}
+{%- assign _rq_unit = include.unit | default: "" | strip -%}
+{%- assign _rq_values = "" | split: "" | push: include.qty -%}
+{%- comment -%}
+  Metric units are read off a scale, so they stay decimal: "40.5 g", never
+  "40½ g". Cups, spoons and countable things read as fractions.
+{%- endcomment -%}
+{%- assign _rq_metric = false -%}
+{%- assign _rq_u = _rq_unit | downcase | strip | replace: ".", "" -%}
+{%- case _rq_u -%}
+  {%- when "g" or "gr" or "gram" or "grams" or "gramme" or "grammes" -%}{%- assign _rq_metric = true -%}
+  {%- when "kg" or "kilo" or "kilos" or "kilogram" or "kilograms" -%}{%- assign _rq_metric = true -%}
+  {%- when "mg" or "milligram" or "milligrams" -%}{%- assign _rq_metric = true -%}
+  {%- when "ml" or "cc" or "milliliter" or "milliliters" or "millilitre" or "millilitres" -%}{%- assign _rq_metric = true -%}
+  {%- when "dl" or "deciliter" or "deciliters" -%}{%- assign _rq_metric = true -%}
+  {%- when "l" or "liter" or "liters" or "litre" or "litres" -%}{%- assign _rq_metric = true -%}
+{%- endcase -%}
+{%- if include.qty_max and include.qty_max > include.qty -%}
+  {%- assign _rq_values = _rq_values | push: include.qty_max -%}
+{%- endif -%}
+{%- capture _rq_text -%}
+{%- for _rq_v in _rq_values -%}
+  {%- if forloop.index > 1 -%}–{%- endif -%}
+  {%- if _rq_metric -%}{{ _rq_v | round: 2 }}{%- continue -%}{%- endif -%}
+  {%- assign _rq_w = _rq_v | floor -%}
+  {%- assign _rq_f = _rq_v | minus: _rq_w | times: 1000 | round -%}
+  {%- case _rq_f -%}
+    {%- when 0 -%}{{ _rq_w }}
+    {%- when 125 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅛
+    {%- when 167 or 166 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅙
+    {%- when 200 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅕
+    {%- when 250 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}¼
+    {%- when 333 or 334 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅓
+    {%- when 375 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅜
+    {%- when 500 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}½
+    {%- when 625 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅝
+    {%- when 667 or 666 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅔
+    {%- when 750 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}¾
+    {%- when 875 -%}{% if _rq_w > 0 %}{{ _rq_w }}{% endif %}⅞
+    {%- else -%}{{ _rq_v | round: 2 }}
+  {%- endcase -%}
+{%- endfor -%}
+{%- endcapture -%}
+<span class="recipe-qty {{ include.class | default: '' }}" data-recipe-qty data-qty="{{ include.qty }}"{% if include.qty_max %} data-qty-max="{{ include.qty_max }}"{% endif %} data-unit="{{ _rq_unit | escape }}"{% if include.grams_per_cup %} data-grams-per-cup="{{ include.grams_per_cup }}"{% endif %}{% if include.weigh == false %} data-weigh="false"{% endif %}{% if include.scale == false %} data-scale="false"{% endif %}>{{ _rq_text | strip }}{% if _rq_unit != "" %} {{ _rq_unit | escape }}{% endif %}</span>
+{%- endif -%}

data/_includes/components/recipe-ratio.html

@@ -0,0 +1,151 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-ratio
+  Path:        _includes/components/recipe-ratio.html
+  Purpose:     The formula behind the recipe — every ingredient reduced to a
+               weight and a percentage of one reference ingredient. This is the
+               baker's-percentage table bread, pastry and sauce recipes are
+               really built on, and it is what lets a reader rebuild the recipe
+               at any size instead of only at multiples of the printed one.
+  Params:      recipe (doc, optional, default: page)
+               basis (string, optional, default: page.ratio_basis) — the
+                 ingredient that counts as 100%; matched as a substring, so
+                 "flour" covers "bread flour" + "whole-wheat flour"
+               heading (string, optional, default: "Ratio")
+               heading_level (string, optional, default: "h2")
+  Depends on:  components/recipe-grams.html, components/recipe-qty.html,
+               _data/ingredient_densities.yml, _sass/components/_recipe.scss
+  Notes:       Percentages are computed at BUILD time, so the table is right
+               with JavaScript disabled and never drifts from the ingredient
+               list. They are also scale-invariant — only the weight column
+               moves when the reader rescales. Ingredients that cannot be
+               resolved to a weight (a clove of garlic, "1 egg", a volume with
+               no density) are listed without a percentage rather than guessed
+               at. Set `ratio: false` on an ingredient to leave it out, or
+               author `baker_percent:` to pin a value.
+{%- endcomment -%}
+{%- assign _rr_r = include.recipe | default: page -%}
+{%- assign _rr_basis = include.basis | default: _rr_r.ratio_basis -%}
+{%- assign _rr_ingredients = _rr_r.ingredients -%}
+{%- if _rr_ingredients == nil or _rr_ingredients.size == 0 or _rr_basis == nil -%}
+  {%- comment -%} recipe-ratio: needs `ingredients` and a `ratio_basis` — skipping render {%- endcomment -%}
+{%- else -%}
+{%- assign _rr_basis_needle = _rr_basis | downcase | strip -%}
+{%- assign _rr_hl = include.heading_level | default: "h2" -%}
+
+{%- comment -%} Flatten grouped ingredients into one list. {%- endcomment -%}
+{%- assign _rr_flat = "" | split: "" -%}
+{%- for _rr_entry in _rr_ingredients -%}
+  {%- if _rr_entry.items -%}
+    {%- for _rr_i in _rr_entry.items -%}{%- assign _rr_flat = _rr_flat | push: _rr_i -%}{%- endfor -%}
+  {%- else -%}
+    {%- assign _rr_flat = _rr_flat | push: _rr_entry -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- comment -%} Pass 1: total the basis weight and the batch weight. {%- endcomment -%}
+{%- assign _rr_basis_grams = 0 -%}
+{%- assign _rr_total_grams = 0 -%}
+{%- assign _rr_weighed = 0 -%}
+{%- for _rr_i in _rr_flat -%}
+  {%- if _rr_i.ratio == false -%}{%- continue -%}{%- endif -%}
+  {%- assign _rr_slug = _rr_i.item | default: "" | downcase | strip | replace: " ", "-" -%}
+  {%- assign _rr_gpc = _rr_i.grams_per_cup | default: site.data.ingredient_densities[_rr_slug] -%}
+  {%- capture _rr_g -%}{%- include components/recipe-grams.html qty=_rr_i.qty unit=_rr_i.unit grams_per_cup=_rr_gpc -%}{%- endcapture -%}
+  {%- assign _rr_g = _rr_g | strip -%}
+  {%- if _rr_g != "" -%}
+    {%- assign _rr_weighed = _rr_weighed | plus: 1 -%}
+    {%- assign _rr_total_grams = _rr_total_grams | plus: _rr_g -%}
+    {%- assign _rr_name = _rr_i.item | default: "" | downcase -%}
+    {%- if _rr_name contains _rr_basis_needle -%}
+      {%- assign _rr_basis_grams = _rr_basis_grams | plus: _rr_g -%}
+    {%- endif -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- if _rr_weighed < 2 or _rr_basis_grams <= 0 -%}
+  {%- comment -%} recipe-ratio: fewer than two weighable ingredients, or the basis "{{ _rr_basis }}" matched nothing — skipping render {%- endcomment -%}
+{%- else -%}
+<section class="recipe-ratio">
+  <{{ _rr_hl }} class="recipe-section-heading">
+    <i class="bi bi-percent me-2" aria-hidden="true"></i>{{ include.heading | default: "Ratio" }}
+  </{{ _rr_hl }}>
+  <p class="recipe-ratio-intro text-body-secondary">
+    Every weight below is a percentage of the {{ _rr_basis | escape }}
+    {%- if _rr_r.ratio %}, which gives this recipe its <strong>{{ _rr_r.ratio | escape }}</strong> ratio{% endif -%}.
+    Rescale the recipe and the weights follow; the percentages are what stay true.
+  </p>
+  <div class="table-responsive">
+    <table class="table table-sm recipe-ratio-table align-middle">
+      <thead>
+        <tr>
+          <th scope="col">Ingredient</th>
+          <th scope="col" class="text-end">Weight</th>
+          <th scope="col" class="text-end">% of {{ _rr_basis | escape }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {%- for _rr_i in _rr_flat -%}
+          {%- if _rr_i.ratio == false -%}{%- continue -%}{%- endif -%}
+          {%- assign _rr_slug = _rr_i.item | default: "" | downcase | strip | replace: " ", "-" -%}
+          {%- assign _rr_gpc = _rr_i.grams_per_cup | default: site.data.ingredient_densities[_rr_slug] -%}
+          {%- capture _rr_g -%}{%- include components/recipe-grams.html qty=_rr_i.qty unit=_rr_i.unit grams_per_cup=_rr_gpc -%}{%- endcapture -%}
+          {%- assign _rr_g = _rr_g | strip -%}
+        <tr>
+          <th scope="row" class="fw-normal">{{ _rr_i.item | escape }}{% if _rr_i.optional %} <span class="text-body-secondary small">(optional)</span>{% endif %}</th>
+          <td class="text-end">
+            {%- if _rr_g != "" -%}
+              {%- include components/recipe-qty.html qty=_rr_g unit="g" -%}
+            {%- else -%}
+              <span class="text-body-secondary">—</span>
+            {%- endif -%}
+          </td>
+          <td class="text-end">
+            {%- if _rr_i.baker_percent -%}
+              {{ _rr_i.baker_percent }}%
+            {%- elsif _rr_g != "" -%}
+              {%- assign _rr_pct = _rr_g | times: 100.0 | divided_by: _rr_basis_grams -%}
+              {%- assign _rr_pct_i = _rr_pct | round -%}
+              {%- if _rr_pct == _rr_pct_i -%}{{ _rr_pct_i }}{%- else -%}{{ _rr_pct | round: 1 }}{%- endif -%}%
+            {%- else -%}
+              <span class="text-body-secondary">—</span>
+            {%- endif -%}
+          </td>
+        </tr>
+        {%- endfor -%}
+      </tbody>
+      <tfoot>
+        <tr>
+          <th scope="row">Total weighed</th>
+          <td class="text-end">{%- include components/recipe-qty.html qty=_rr_total_grams unit="g" -%}</td>
+          <td class="text-end">
+            {%- assign _rr_tpct = _rr_total_grams | times: 100.0 | divided_by: _rr_basis_grams -%}
+            {%- assign _rr_tpct_i = _rr_tpct | round -%}
+            {%- if _rr_tpct == _rr_tpct_i -%}{{ _rr_tpct_i }}{%- else -%}{{ _rr_tpct | round: 1 }}{%- endif -%}%
+          </td>
+        </tr>
+        {%- if _rr_r.yield.amount and _rr_r.yield.amount > 0 -%}
+        {%- assign _rr_per_unit = _rr_total_grams | divided_by: _rr_r.yield.amount | round: 1 -%}
+        {%- comment -%} Naive singular for the row label: "slices" → "slice". {%- endcomment -%}
+        {%- assign _rr_yu = _rr_r.yield.singular | default: _rr_r.yield.unit | default: "serving" | strip -%}
+        {%- unless _rr_r.yield.singular -%}
+          {%- if _rr_yu.size > 1 -%}
+            {%- assign _rr_tail = _rr_yu | slice: -1 -%}
+            {%- if _rr_tail == "s" -%}
+              {%- assign _rr_cut = _rr_yu.size | minus: 1 -%}
+              {%- assign _rr_yu = _rr_yu | slice: 0, _rr_cut -%}
+            {%- endif -%}
+          {%- endif -%}
+        {%- endunless -%}
+        <tr>
+          <th scope="row">Per {{ _rr_yu | escape }}</th>
+          <td class="text-end">{%- include components/recipe-qty.html qty=_rr_per_unit unit="g" scale=false -%}</td>
+          <td class="text-end"><span class="text-body-secondary">—</span></td>
+        </tr>
+        {%- endif -%}
+      </tfoot>
+    </table>
+  </div>
+</section>
+{%- endif -%}
+{%- endif -%}

data/_includes/components/recipe-scaler.html

@@ -0,0 +1,73 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-scaler
+  Path:        _includes/components/recipe-scaler.html
+  Purpose:     The control bar that drives every quantity on a recipe page —
+               scale the yield up or down, and switch the whole recipe between
+               the units it was written in, metric, and US customary.
+  Params:      base_yield (number, optional, default: page.yield.amount, then 1)
+               yield_unit (string, optional, default: page.yield.unit, then
+                 "servings")
+               recipe_id (string, optional, default: page.slug) — key the
+                 remembered scale is stored under
+               units (bool, optional, default: true) — false hides the unit
+                 switch (for a recipe that is already all-metric, say)
+               class (string, optional, default: "")
+  Depends on:  assets/js/recipe-scaler.js, _sass/components/_recipe.scss
+  Notes:       Progressive enhancement: with JavaScript off the controls are
+               hidden (.recipe-scaler is display:none until the script marks it
+               ready) and the page still shows every amount exactly as written.
+               The status paragraph is an aria-live region so screen-reader
+               users hear "Scaled to 24 cookies" rather than silently changing
+               numbers underneath them.
+{%- endcomment -%}
+{%- assign _rsc_base = include.base_yield | default: page.yield.amount | default: 1 -%}
+{%- assign _rsc_unit = include.yield_unit | default: page.yield.unit | default: "servings" -%}
+{%- assign _rsc_id = include.recipe_id | default: page.slug | default: "recipe" -%}
+{%- assign _rsc_show_units = true -%}
+{%- if include.units == false -%}{%- assign _rsc_show_units = false -%}{%- endif -%}
+<div class="recipe-scaler {{ include.class | default: '' }}" data-recipe-scaler data-base-yield="{{ _rsc_base }}" data-yield-unit="{{ _rsc_unit | escape }}" data-recipe-id="{{ _rsc_id | escape }}" hidden>
+  <div class="recipe-scaler-group">
+    <span class="recipe-scaler-label" id="{{ _rsc_id }}-scale-label">Scale</span>
+    <div class="input-group input-group-sm recipe-scaler-stepper">
+      <button class="btn btn-outline-secondary" type="button" data-recipe-step="-1" aria-label="Decrease {{ _rsc_unit | escape }}">
+        <i class="bi bi-dash-lg" aria-hidden="true"></i>
+      </button>
+      <input class="form-control text-center" type="number" inputmode="decimal" min="0.25" step="1"
+             value="{{ _rsc_base }}" data-recipe-yield-input
+             aria-labelledby="{{ _rsc_id }}-scale-label" aria-describedby="{{ _rsc_id }}-yield-unit">
+      <span class="input-group-text" id="{{ _rsc_id }}-yield-unit" data-recipe-yield-unit>{{ _rsc_unit | escape }}</span>
+      <button class="btn btn-outline-secondary" type="button" data-recipe-step="1" aria-label="Increase {{ _rsc_unit | escape }}">
+        <i class="bi bi-plus-lg" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+
+  <div class="recipe-scaler-group">
+    <div class="btn-group btn-group-sm" role="group" aria-label="Quick scale">
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="0.5">½×</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="1">1×</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="2">2×</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="3">3×</button>
+    </div>
+  </div>
+
+  {%- if _rsc_show_units -%}
+  <div class="recipe-scaler-group">
+    <span class="recipe-scaler-label" id="{{ _rsc_id }}-units-label">Units</span>
+    <div class="btn-group btn-group-sm" role="group" aria-labelledby="{{ _rsc_id }}-units-label">
+      <button type="button" class="btn btn-outline-secondary" data-recipe-units="original" title="Show every amount exactly as the recipe was written">As written</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-units="metric" title="Grams, millilitres and °C — volumes become weights wherever a density is known">Metric</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-units="us" title="Cups, spoons, ounces and °F">US</button>
+    </div>
+  </div>
+  {%- endif -%}
+
+  <div class="recipe-scaler-group recipe-scaler-group--reset">
+    <button type="button" class="btn btn-sm btn-link" data-recipe-reset>
+      <i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset
+    </button>
+  </div>
+
+  <p class="visually-hidden" role="status" aria-live="polite" data-recipe-status></p>
+</div>

data/_includes/components/recipe-steps.html

@@ -0,0 +1,86 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-steps
+  Path:        _includes/components/recipe-steps.html
+  Purpose:     The numbered method for one recipe — optionally split into
+               sections ("Day 1", "Assembly"), with per-step timings,
+               convertible temperatures, and step photos.
+  Params:      steps (array, optional, default: page.steps)
+               heading (string, optional, default: "Method")
+               heading_level (string, optional, default: "h2")
+  Depends on:  components/recipe-temp.html, components/recipe-duration.html,
+               _sass/components/_recipe.scss
+  Notes:       A step is either a plain string or a hash of
+               {text, title, time, temp_f, temp_c, image, image_alt, note}.
+               Sections are {section, items} hashes; numbering continues across
+               them via the <ol start> attribute so "step 7" means step 7 no
+               matter which section it lives in. Step text is markdownified, so
+               links and emphasis work. itemprop="recipeInstructions" marks
+               each step for schema.org.
+{%- endcomment -%}
+{%- assign _rs_steps = include.steps | default: page.steps -%}
+{%- if _rs_steps == nil or _rs_steps.size == 0 -%}
+  {%- comment -%} recipe-steps: no `steps` front matter — skipping render {%- endcomment -%}
+{%- else -%}
+{%- assign _rs_hl = include.heading_level | default: "h2" -%}
+{%- assign _rs_sub = _rs_hl | remove: "h" | plus: 1 -%}
+{%- assign _rs_n = 0 -%}
+<section class="recipe-steps">
+  <{{ _rs_hl }} class="recipe-section-heading">
+    <i class="bi bi-list-ol me-2" aria-hidden="true"></i>{{ include.heading | default: "Method" }}
+  </{{ _rs_hl }}>
+
+  {%- for _rs_entry in _rs_steps -%}
+    {%- if _rs_entry.items -%}
+      {%- assign _rs_section = _rs_entry.section | default: _rs_entry.group | default: _rs_entry.title -%}
+      {%- assign _rs_loop_steps = _rs_entry.items -%}
+    {%- else -%}
+      {%- assign _rs_section = nil -%}
+      {%- assign _rs_loop_steps = "" | split: "" | push: _rs_entry -%}
+    {%- endif -%}
+
+    {%- if _rs_section -%}
+  <h{{ _rs_sub }} class="recipe-steps-section-title">{{ _rs_section | escape }}</h{{ _rs_sub }}>
+    {%- endif -%}
+
+  <ol class="recipe-step-list" start="{{ _rs_n | plus: 1 }}">
+    {%- for _rs_s in _rs_loop_steps -%}
+      {%- assign _rs_n = _rs_n | plus: 1 -%}
+      {%- if _rs_s.text or _rs_s.title or _rs_s.image -%}
+        {%- assign _rs_text = _rs_s.text -%}
+      {%- else -%}
+        {%- assign _rs_text = _rs_s -%}
+      {%- endif -%}
+    <li class="recipe-step" itemprop="recipeInstructions">
+      {%- if _rs_s.title -%}
+      <p class="recipe-step-title">{{ _rs_s.title | escape }}</p>
+      {%- endif -%}
+      {%- if _rs_text -%}
+      <div class="recipe-step-text">{{ _rs_text | markdownify }}</div>
+      {%- endif -%}
+      {%- if _rs_s.time or _rs_s.temp_f or _rs_s.temp_c -%}
+      <p class="recipe-step-facts">
+        {%- if _rs_s.time -%}
+          {%- capture _rs_dur -%}{%- include components/recipe-duration.html minutes=_rs_s.time -%}{%- endcapture -%}
+        <span class="recipe-step-fact"><i class="bi bi-stopwatch me-1" aria-hidden="true"></i>{{ _rs_dur | strip }}</span>
+        {%- endif -%}
+        {%- if _rs_s.temp_f or _rs_s.temp_c -%}
+        <span class="recipe-step-fact"><i class="bi bi-thermometer-half me-1" aria-hidden="true"></i>{%- include components/recipe-temp.html f=_rs_s.temp_f c=_rs_s.temp_c -%}</span>
+        {%- endif -%}
+      </p>
+      {%- endif -%}
+      {%- if _rs_s.image -%}
+      <figure class="recipe-step-figure">
+        <img src="{{ _rs_s.image | relative_url }}" alt="{{ _rs_s.image_alt | default: '' | escape }}" loading="lazy" decoding="async" class="img-fluid rounded">
+        {%- if _rs_s.caption -%}<figcaption class="small text-body-secondary mt-1">{{ _rs_s.caption | escape }}</figcaption>{%- endif -%}
+      </figure>
+      {%- endif -%}
+      {%- if _rs_s.note -%}
+      <p class="recipe-step-note small">{{ _rs_s.note | escape }}</p>
+      {%- endif -%}
+    </li>
+    {%- endfor -%}
+  </ol>
+  {%- endfor -%}
+</section>
+{%- endif -%}