jekyll-theme-zer0 1.28.0 → 1.30.0

data/_includes/components/page-feedback.html

@@ -61,24 +61,34 @@
 {%- assign pf_theme = site.theme | default: site.remote_theme | default: "" -%}
 
 {%- if pf_show_fab -%}
-<!-- Global feedback FAB (page-invariant; opens the modal) -->
-<button type="button"
-        id="pageFeedbackFab"
-        class="pf-fab btn shadow-lg position-fixed"
-        data-pf-open
-        aria-haspopup="dialog"
-        aria-controls="pageFeedbackModal"
-        title="{{ site.page_feedback.fab_label | default: 'Improve this page' | escape }}"
-        aria-label="{{ site.page_feedback.fab_label | default: 'Improve this page' | escape }}">
+{% comment %} Global feedback FAB (page-invariant; opens the modal) {% endcomment %}
+{%- comment -%}
+  An anchor, not a button, and the href is load-bearing: the widget now
+  delegates issue assembly to assets/js/fleet-feedback.js, so if that script
+  fails to load (or JavaScript is off entirely) the FAB still reaches the
+  issue form instead of becoming a decorative circle. page-feedback.js
+  intercepts [data-pf-open] and opens the richer modal when it is running.
+{%- endcomment -%}
+<a id="pageFeedbackFab"
+   class="pf-fab btn shadow-lg position-fixed"
+   href="https://github.com/{{ pf_repo }}/issues/new?template=page_improvement.yml&labels=page-feedback"
+   role="button"
+   data-pf-open
+   target="_blank"
+   rel="noopener noreferrer"
+   aria-haspopup="dialog"
+   aria-controls="pageFeedbackModal"
+   title="{{ site.page_feedback.fab_label | default: 'Improve this page' | escape }}"
+   aria-label="{{ site.page_feedback.fab_label | default: 'Improve this page' | escape }}">
   <i class="bi {{ site.page_feedback.fab_icon | default: 'bi-megaphone' }}" aria-hidden="true"></i>
-</button>
+</a>
 {%- endif -%}
 
-<!-- Feedback modal (self-contained overlay; controlled by page-feedback.js).
+{% comment %} Feedback modal (self-contained overlay; controlled by page-feedback.js).
      `position-fixed` is required, not cosmetic: it opts this <body> child out of
      the .zer0-bg-body flattening rule (_sass/theme/_backgrounds.scss) that would
      otherwise force position:relative; z-index:1 and let the cookie banner steal
-     the dialog's clicks. -->
+     the dialog's clicks. {% endcomment %}
 <div class="pf-overlay position-fixed" id="pageFeedbackModal" role="dialog" aria-modal="true"
      aria-labelledby="pfTitle" aria-describedby="pfIntro" hidden>
   <div class="pf-dialog shadow-lg" role="document">
@@ -100,16 +110,18 @@
 
     <form id="pfForm" class="pf-body" novalidate>
 
-      <!-- Step 1 — request type -->
+      {% comment %} Step 1 — request type {% endcomment %}
       <fieldset class="pf-field pf-types">
         <legend class="pf-legend">What kind of feedback?</legend>
         {%- comment -%}
           _data/feedback_types.yml is optional for consumers (remote_theme
           cannot ship _data). Without it the widget falls back to a minimal
           generic taxonomy (see pf_fallback_types below) instead of rendering
-          an empty selector. The fallback entries carry no GitHub labels and
-          no agent directive — labels must exist in the target repo or GitHub
-          silently drops them from prefilled issue URLs.
+          an empty selector. The fallback carries the four fleet-taxonomy
+          labels (bug/docs/feature/question) and no agent directive: a label
+          the consumer repo does not have is silently dropped by GitHub, so
+          naming them costs nothing and makes the issue pipeline-eligible the
+          moment the feedback fan-out creates them.
         {%- endcomment -%}
         {%- assign pf_group = "" -%}
         {%- for t in site.data.feedback_types -%}
@@ -138,8 +150,7 @@
             cannot ship _data). Without it, render this minimal generic
             taxonomy instead of an empty selector. Ids/markup must stay in
             sync with the fallback JSON in the #pageFeedbackTypes script
-            below. Fallback entries carry no GitHub labels (labels must exist
-            in the target repo or GitHub silently drops them) and no agent
+            below, which carries the fleet-taxonomy labels and no agent
             directive.
           {%- endcomment -%}
           <p class="pf-types-group">This page</p>
@@ -183,7 +194,7 @@
         {%- endfor -%}
       </fieldset>
 
-      <!-- Step 2 — description -->
+      {% comment %} Step 2 — description {% endcomment %}
       <div class="pf-field">
         <label for="pfDescription" class="pf-label">Describe it</label>
         <textarea id="pfDescription" class="form-control" rows="4"
@@ -194,14 +205,14 @@
         </p>
       </div>
 
-      <!-- Step 3 — what gets attached -->
+      {% comment %} Step 3 — what gets attached {% endcomment %}
       <details class="pf-field pf-context" id="pfContextWrap">
         <summary class="pf-summary">
           <i class="bi bi-paperclip me-1" aria-hidden="true"></i>What gets attached
           <span class="pf-context-count" id="pfContextCount"></span>
         </summary>
         <ul class="pf-context-list" id="pfContextList" aria-live="polite">
-          <!-- page title / url / path filled in by JS -->
+          {% comment %} page title / url / path filled in by JS {% endcomment %}
         </ul>
 
         {%- if site.page_feedback.capture_logs -%}
@@ -221,7 +232,7 @@
       </details>
 
       {%- if pf_ai_available -%}
-      <!-- Step 4 — optional AI review (proxy + Claude Code OAuth) -->
+      {% comment %} Step 4 — optional AI review (proxy + Claude Code OAuth) {% endcomment %}
       <div class="pf-field pf-ai" id="pfAiWrap">
         <div class="pf-ai-head">
           <button type="button" class="btn btn-sm btn-outline-primary" id="pfAnalyze">
@@ -253,7 +264,7 @@
   </div>
 </div>
 
-<!-- Widget configuration consumed by assets/js/page-feedback.js -->
+{% comment %} Widget configuration consumed by assets/js/page-feedback.js {% endcomment %}
 <script id="pageFeedbackConfig" type="application/json">
 {
   "enabled": true,
@@ -275,19 +286,19 @@
 }
 </script>
 
-<!-- Request-type taxonomy (from _data/feedback_types.yml; generic fallback
+{% comment %} Request-type taxonomy (from _data/feedback_types.yml; generic fallback
      when the site ships no data file — keep in sync with the fallback markup
-     in the pf-types fieldset above) -->
+     in the pf-types fieldset above) {% endcomment %}
 <script id="pageFeedbackTypes" type="application/json">
 {% if site.data.feedback_types %}{{ site.data.feedback_types | jsonify }}{% else %}[
-  {"id":"fix-page","label":"Report a problem","icon":"bi-bug","group":"This page","scope":"page","description":"A typo, broken link, wrong information, or something rendering badly","labels":[],"agent":false,"placeholder":"What is wrong, where on the page, and what did you expect instead?"},
-  {"id":"improve-page","label":"Improve this page","icon":"bi-stars","group":"This page","scope":"page","description":"Polish the copy, structure, or presentation","labels":[],"agent":false,"placeholder":"What would make this page clearer, tighter, or more useful?"},
-  {"id":"feature","label":"Suggest a feature","icon":"bi-lightbulb","group":"The site","scope":"site","description":"An idea that would make the site more useful","labels":[],"agent":false,"placeholder":"Describe the feature and the problem it would solve."},
-  {"id":"question","label":"Ask a question","icon":"bi-question-circle","group":"The site","scope":"site","description":"Something unclear that is not exactly a bug","labels":[],"agent":false,"placeholder":"What would you like to know?"}
+  {"id":"fix-page","label":"Report a problem","icon":"bi-bug","group":"This page","scope":"page","description":"A typo, broken link, wrong information, or something rendering badly","labels":["bug"],"agent":false,"placeholder":"What is wrong, where on the page, and what did you expect instead?"},
+  {"id":"improve-page","label":"Improve this page","icon":"bi-stars","group":"This page","scope":"page","description":"Polish the copy, structure, or presentation","labels":["docs"],"agent":false,"placeholder":"What would make this page clearer, tighter, or more useful?"},
+  {"id":"feature","label":"Suggest a feature","icon":"bi-lightbulb","group":"The site","scope":"site","description":"An idea that would make the site more useful","labels":["feature"],"agent":false,"placeholder":"Describe the feature and the problem it would solve."},
+  {"id":"question","label":"Ask a question","icon":"bi-question-circle","group":"The site","scope":"site","description":"Something unclear that is not exactly a bug","labels":["question"],"agent":false,"placeholder":"What would you like to know?"}
 ]{% endif %}
 </script>
 
-<!-- Live page context (build-time front matter; runtime detail added by JS) -->
+{% comment %} Live page context (build-time front matter; runtime detail added by JS) {% endcomment %}
 <script id="pageFeedbackContext" type="application/json">
 {
   "title": {{ page.title | default: site.title | jsonify }},
@@ -310,6 +321,10 @@
 }
 </script>
 
+{% comment %} The shared fleet builder must be parsed before the widget: page-feedback.js
+     reads window.FleetFeedbackCore at load and bails without it. Both are `defer`, and
+     deferred scripts execute in document order, so this ordering is the dependency. {% endcomment %}
+<script defer src="{{ '/assets/js/fleet-feedback.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/page-feedback.js' | relative_url }}"></script>
 
 {%- endunless -%}

data/_includes/components/page-views-init.html

@@ -0,0 +1,55 @@
+{% comment %} Feature: ZER0-083 {% endcomment %}
+{%- comment -%}
+  Component:   page-views-init
+  Path:        _includes/components/page-views-init.html
+  Purpose:     Bootstrap the page-view counter — inject its configuration and
+               load the behaviour. Renders no visible markup; the badge lives
+               in components/page-views.html.
+  Params:      none — configured via site.page_views
+  Depends on:  assets/js/page-views.js
+  Included by: _includes/core/head.html (once per page)
+  Notes:       Split from the badge include on purpose: the badge may appear
+               many times on a page, this must appear exactly once.
+{%- endcomment -%}
+
+{%- unless site.page_views.enabled -%}{%- comment -%} counter disabled {%- endcomment -%}
+{%- else -%}
+{%- comment -%}
+  `respect_dnt` / `respect_gpc` / `require_consent` default to the PostHog
+  privacy block so a site configures its privacy posture once. Liquid's
+  `default` filter treats `false` as "missing", so each flag is resolved with
+  an if-tag instead — otherwise an explicit `false` would silently flip true.
+{%- endcomment -%}
+{%- assign pv_dnt = true -%}
+{%- if site.page_views.respect_dnt == false -%}{%- assign pv_dnt = false -%}{%- endif -%}
+{%- assign pv_gpc = true -%}
+{%- if site.page_views.respect_gpc == false -%}{%- assign pv_gpc = false -%}{%- endif -%}
+{%- assign pv_consent = false -%}
+{%- if site.page_views.require_consent -%}{%- assign pv_consent = true -%}{%- endif -%}
+{%- assign pv_track = true -%}
+{%- if site.page_views.track == false -%}{%- assign pv_track = false -%}{%- endif -%}
+{%- assign pv_fallback = false -%}
+{%- if site.page_views.fallback_local -%}{%- assign pv_fallback = true -%}{%- endif -%}
+
+{% comment %} Page-view counter configuration consumed by assets/js/page-views.js {% endcomment %}
+<script id="pageViewsConfig" type="application/json">
+{
+  "enabled": true,
+  "provider": {{ site.page_views.provider | default: "local" | jsonify }},
+  "endpoint": {{ site.page_views.endpoint | default: "" | jsonify }},
+  "method": {{ site.page_views.method | default: "POST" | jsonify }},
+  "countKey": {{ site.page_views.count_key | default: "views" | jsonify }},
+  "dedupe": {{ site.page_views.dedupe | default: "session" | jsonify }},
+  "maxEntries": {{ site.page_views.max_entries | default: 500 }},
+  "track": {{ pv_track | jsonify }},
+  "respectDnt": {{ pv_dnt | jsonify }},
+  "respectGpc": {{ pv_gpc | jsonify }},
+  "requireConsent": {{ pv_consent | jsonify }},
+  "fallbackLocal": {{ pv_fallback | jsonify }},
+  "baseurl": {{ site.baseurl | default: "" | jsonify }},
+  "labelOne": {{ site.page_views.label_one | default: "view" | jsonify }},
+  "labelOther": {{ site.page_views.label_other | default: "views" | jsonify }}
+}
+</script>
+<script defer src="{{ '/assets/js/page-views.js' | relative_url }}"></script>
+{%- endunless -%}

data/_includes/components/page-views.html

@@ -0,0 +1,33 @@
+{% comment %} Feature: ZER0-083 {% endcomment %}
+{%- comment -%}
+  Component:   page-views
+  Path:        _includes/components/page-views.html
+  Purpose:     Inline "N views" badge for a page. Ships hidden and is revealed
+               by assets/js/page-views.js once a count is known, so a page
+               with no data never flashes "0 views".
+  Params:      url        (string, optional, default: page.url) — page to show
+               class      (string, optional, default: "")       — extra classes
+               icon       (string, optional, default: "bi-eye")
+               separator  (bool,   optional, default: false)    — render a
+                          leading "•" INSIDE the badge, so the separator hides
+                          with it in a meta row
+  Depends on:  components/page-views-init.html (config + behaviour, loaded once
+               from core/head.html), _sass/components/_page-views.scss
+  Notes:       Safe to include more than once per page — each badge resolves
+               its own `data-page-views` path. Paths are site-relative and
+               baseurl-free (page.url); page-views.js normalizes the runtime
+               location the same way.
+{%- endcomment -%}
+
+{%- unless site.page_views.enabled -%}{%- comment -%} counter disabled {%- endcomment -%}
+{%- else -%}
+{%- assign pv_path = include.url | default: page.url -%}
+{%- assign pv_class = include.class | default: "" -%}
+{%- assign pv_icon = include.icon | default: "bi-eye" -%}
+<span class="page-views{% if pv_class != "" %} {{ pv_class }}{% endif %}" data-page-views="{{ pv_path | escape }}" hidden>
+  {%- if include.separator -%}<span class="page-views__sep mx-2" aria-hidden="true">•</span>{%- endif -%}
+  <i class="bi {{ pv_icon }} me-1" aria-hidden="true"></i>
+  <span class="page-views__count" data-page-views-count>0</span>
+  <span class="page-views__label" data-page-views-label>{{ site.page_views.label_other | default: "views" }}</span>
+</span>
+{%- endunless -%}

data/_includes/components/post-card.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   POST CARD COMPONENT - Reusable blog post card
   ===================================================================
@@ -41,7 +41,7 @@
   - site.public_folder for image paths
   - site.teaser for fallback image
   ===================================================================
--->
+{% endcomment %}
 
 {% comment %} Parameter defaults {% endcomment %}
 {% assign show_category = include.show_category | default: true %}
@@ -70,44 +70,44 @@
 {% if render_col %}<div class="col">{% endif %}
   <div class="card h-100 post-card border-0 shadow-sm {{ card_class }}">
     
-    <!-- ====================== -->
-    <!-- CARD IMAGE & BADGES    -->
-    <!-- ====================== -->
+    {% comment %} ====================== {% endcomment %}
+    {% comment %} CARD IMAGE & BADGES    {% endcomment %}
+    {% comment %} ====================== {% endcomment %}
     <div class="position-relative">
-      <!-- Breaking News Badge -->
+      {% comment %} Breaking News Badge {% endcomment %}
       {% if include.post.breaking %}
         <span class="badge bg-danger position-absolute top-0 start-0 m-2 z-1">
           <i class="bi bi-lightning-fill me-1"></i>Breaking
         </span>
       {% endif %}
       
-      <!-- Featured Badge -->
+      {% comment %} Featured Badge {% endcomment %}
       {% if include.post.featured %}
         <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2 z-1">
           <i class="bi bi-star-fill me-1"></i>Featured
         </span>
       {% endif %}
       
-      <!-- Post Type Badge -->
+      {% comment %} Post Type Badge {% endcomment %}
       {% if show_post_type and include.post.post_type and include.post.post_type != "standard" and include.post.post_type != "featured" and include.post.post_type != "breaking" %}
         <span class="position-absolute bottom-0 start-0 m-2 z-1">
           {% include components/post-type-badge.html post_type=include.post.post_type %}
         </span>
       {% endif %}
       
-      <!-- Preview Image -->
+      {% comment %} Preview Image {% endcomment %}
       <a href="{{ include.post.url | relative_url }}" class="text-decoration-none">
         {% assign card_img = include.post.preview | default: site.teaser %}
         {% include components/preview-image.html src=card_img alt=include.post.title class="card-img-top" %}
       </a>
     </div>
     
-    <!-- ====================== -->
-    <!-- CARD BODY              -->
-    <!-- ====================== -->
+    {% comment %} ====================== {% endcomment %}
+    {% comment %} CARD BODY              {% endcomment %}
+    {% comment %} ====================== {% endcomment %}
     <div class="card-body d-flex flex-column">
       
-      <!-- Category Badge -->
+      {% comment %} Category Badge {% endcomment %}
       {% comment %} Category base is configurable (`category_base`, default `/news`).
          Only link the badge when that category index page exists in the build;
          otherwise render a plain badge so remote-theme consumers (whose category
@@ -135,7 +135,7 @@
         </div>
       {% endif %}
       
-      <!-- Post Title -->
+      {% comment %} Post Title {% endcomment %}
       <h5 class="card-title mb-2">
         <a href="{{ include.post.url | relative_url }}" 
            class="text-decoration-none text-body-emphasis stretched-link">
@@ -143,14 +143,14 @@
         </a>
       </h5>
       
-      <!-- Subtitle if available -->
+      {% comment %} Subtitle if available {% endcomment %}
       {% if include.post.sub-title %}
         <p class="card-subtitle text-muted small mb-2">
           {{ include.post.sub-title }}
         </p>
       {% endif %}
       
-      <!-- Post Excerpt -->
+      {% comment %} Post Excerpt {% endcomment %}
       {% if show_excerpt %}
         <p class="card-text text-muted small flex-grow-1">
           {{ include.post.excerpt | strip_html | truncate: 120 }}
@@ -159,13 +159,13 @@
       
     </div>
     
-    <!-- ====================== -->
-    <!-- CARD FOOTER            -->
-    <!-- ====================== -->
+    {% comment %} ====================== {% endcomment %}
+    {% comment %} CARD FOOTER            {% endcomment %}
+    {% comment %} ====================== {% endcomment %}
     <div class="card-footer bg-transparent border-top-0">
       <div class="d-flex justify-content-between align-items-center small text-muted">
         
-        <!-- Left: Author & Date -->
+        {% comment %} Left: Author & Date {% endcomment %}
         <div>
           {% if show_author and include.post.author %}
             <span class="me-2">
@@ -177,7 +177,7 @@
           </span>
         </div>
         
-        <!-- Right: Reading Time -->
+        {% comment %} Right: Reading Time {% endcomment %}
         {% if show_reading_time %}
           <span>
             <i class="bi bi-clock me-1"></i>{{ reading_time }}
@@ -186,7 +186,7 @@
         
       </div>
       
-      <!-- Tags (compact) -->
+      {% comment %} Tags (compact) {% endcomment %}
       {% if include.post.tags.size > 0 %}
         <div class="mt-2">
           {% for tag in include.post.tags limit: 3 %}

data/_includes/components/post-type-badge.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-064 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   POST TYPE BADGE COMPONENT - Visual indicator for article types
   ===================================================================
@@ -29,7 +29,7 @@
   - Bootstrap 5 badge component
   - Bootstrap Icons
   ===================================================================
--->
+{% endcomment %}
 
 {% assign type = include.post_type | default: "standard" %}
 

data/_includes/components/powered-by.html

@@ -1,8 +1,8 @@
-<!-- 
+{% comment %} 
   file: powered-by.html
   path:_includes/powered-by.html
   description: This file is used to display the powered by section on the home page.
- -->
+ {% endcomment %}
 
 <div class="row row-cols-1 row-cols-md-3 g-4">
   {% for power in site.powered_by %}

data/_includes/components/preview-image.html

@@ -10,6 +10,12 @@
        style="height: 180px; object-fit: cover;" 
     -%}
   
+  WHICH INCLUDE: this one renders an <img> in the content flow. For cover art
+  painted as a CSS background on an otherwise empty box, use the sibling
+  components/background-image.html -- a background image is invisible to
+  assistive tech, so that case needs role="img" + aria-label (or aria-hidden
+  when purely decorative) rather than an alt attribute.
+
   Convention: Preview paths can omit the /assets/ prefix.
   The component will auto-prepend the assets_prefix from _config.yml.
   Examples:

data/_includes/components/quick-index.html

@@ -1,4 +1,4 @@
-<!-- Quick index of pages in the collection -->
+{% comment %} Quick index of pages in the collection {% endcomment %}
 {% if site.collections.pages %}
 <ul>
   <p>Quick Index</p>
@@ -10,7 +10,7 @@
 </ul>
 {% endif %}
 
-<!-- Post Categories -->
+{% comment %} Post Categories {% endcomment %}
 {% if page.sidebar == "searchCats" %}
 <div id="categories">
 </div>

data/_includes/components/recipe-card.html

@@ -0,0 +1,67 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-card
+  Path:        _includes/components/recipe-card.html
+  Purpose:     Index card for one recipe — photo, title, one-line description,
+               and the three facts a cook scans for: total time, what it makes,
+               and how hard it is.
+  Params:      recipe (document, required) — a `recipes` collection doc
+               heading_level (number, optional, default: 3) — the title's
+                 heading level, so a card never skips a level under whatever
+                 heading precedes it
+               class (string, optional, default: "")
+  Depends on:  components/preview-image.html, components/recipe-duration.html,
+               _sass/components/_recipe.scss (.recipe-card)
+  Notes:       Total time comes from `times.total` or prep + cook + rest, so
+               the card never disagrees with the recipe page. The whole card is
+               one link for a large tap target; the facts row is plain text so
+               it stays readable when images fail to load.
+{%- endcomment -%}
+{%- if include.recipe == nil -%}
+  {%- comment -%} ERROR: recipe-card requires `recipe` {%- endcomment -%}
+{%- else -%}
+{%- assign _rc_r = include.recipe -%}
+{%- assign _rc_img = _rc_r.image | default: _rc_r.preview | default: site.teaser -%}
+{%- assign _rc_prep = _rc_r.times.prep | default: 0 -%}
+{%- assign _rc_cook = _rc_r.times.cook | default: 0 -%}
+{%- assign _rc_rest = _rc_r.times.rest | default: 0 -%}
+{%- if _rc_r.times.total -%}
+  {%- assign _rc_total = _rc_r.times.total -%}
+{%- else -%}
+  {%- assign _rc_total = _rc_prep | plus: _rc_cook | plus: _rc_rest -%}
+{%- endif -%}
+{%- capture _rc_total_h -%}{%- include components/recipe-duration.html minutes=_rc_total -%}{%- endcapture -%}
+{%- assign _rc_total_h = _rc_total_h | strip -%}
+<article class="recipe-card h-100 {{ include.class | default: '' }}">
+  <a href="{{ _rc_r.url | relative_url }}" class="recipe-card-link d-flex flex-column h-100 text-decoration-none text-body">
+    {%- if _rc_img -%}
+    <div class="recipe-card-media">
+      {%- include components/preview-image.html src=_rc_img alt=_rc_r.title class="" -%}
+    </div>
+    {%- endif -%}
+    <div class="recipe-card-body">
+      {%- assign _rc_hl = include.heading_level | default: 3 -%}
+      <h{{ _rc_hl }} class="h5 recipe-card-title">{{ _rc_r.title }}</h{{ _rc_hl }}>
+      {%- if _rc_r.description -%}
+      <p class="recipe-card-description small text-body-secondary">{{ _rc_r.description | strip_html | truncate: 120 }}</p>
+      {%- endif -%}
+      <p class="recipe-card-facts small text-body-secondary mb-0">
+        {%- assign _rc_sep = false -%}
+        {%- if _rc_total_h != "" -%}
+          <span class="recipe-card-fact"><i class="bi bi-clock-history me-1" aria-hidden="true"></i>{{ _rc_total_h }}</span>
+          {%- assign _rc_sep = true -%}
+        {%- endif -%}
+        {%- if _rc_r.yield.amount -%}
+          {%- if _rc_sep %}<span class="mx-1" aria-hidden="true">•</span>{% endif -%}
+          <span class="recipe-card-fact"><i class="bi bi-pie-chart me-1" aria-hidden="true"></i>{{ _rc_r.yield.amount }} {{ _rc_r.yield.unit | default: "servings" | escape }}</span>
+          {%- assign _rc_sep = true -%}
+        {%- endif -%}
+        {%- if _rc_r.difficulty -%}
+          {%- if _rc_sep %}<span class="mx-1" aria-hidden="true">•</span>{% endif -%}
+          <span class="recipe-difficulty recipe-difficulty--{{ _rc_r.difficulty | downcase | strip }}">{{ _rc_r.difficulty | capitalize }}</span>
+        {%- endif -%}
+      </p>
+    </div>
+  </a>
+</article>
+{%- endif -%}

data/_includes/components/recipe-duration.html

@@ -0,0 +1,50 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-duration (value resolver — emits a bare string)
+  Path:        _includes/components/recipe-duration.html
+  Purpose:     Format a duration given in MINUTES, either for humans
+               ("1 hr 30 min") or as an ISO 8601 duration for schema.org
+               ("PT1H30M").
+  Params:      minutes (number, required)
+               format (string, optional, default: "human") — "human" | "iso"
+  Depends on:  nothing (pure Liquid arithmetic)
+  Notes:       Emits nothing for a missing or zero duration, so callers can
+               test the captured value and skip the whole row. Days are not
+               special-cased — a 3-day cure reads as "72 hr", which is how
+               recipes actually write long ferments.
+
+               Liquid `assign` writes to the GLOBAL scope even inside an
+               include, so a helper called several times from one caller will
+               clobber the caller's variables if the names collide. Every
+               variable here is therefore prefixed `_rd_`, and the other recipe
+               components use their own prefixes. Keep that up when editing.
+
+               Capture it (this comment is brace-free so it cannot self-execute):
+                 capture total -> include components/recipe-duration.html minutes=90
+{%- endcomment -%}
+{%- assign _rd_m = include.minutes -%}
+{%- if _rd_m == nil or _rd_m == "" or _rd_m <= 0 -%}
+  {%- comment -%} recipe-duration: no duration — emitting nothing {%- endcomment -%}
+{%- else -%}
+{%- assign _rd_total = _rd_m | round -%}
+{%- assign _rd_hours = _rd_total | divided_by: 60 -%}
+{%- assign _rd_mins = _rd_total | modulo: 60 -%}
+{%- if include.format == "iso" -%}
+PT{% if _rd_hours > 0 %}{{ _rd_hours }}H{% endif %}{% if _rd_mins > 0 %}{{ _rd_mins }}M{% endif %}
+{%- else -%}
+{%- comment -%}
+  Built by appending rather than by emitting the separator from inside an
+  `if`: Liquid treats a block whose body is only whitespace as blank and
+  drops it, which silently swallowed the space in "12 hr 45 min".
+{%- endcomment -%}
+{%- assign _rd_out = "" -%}
+{%- if _rd_hours > 0 -%}
+  {%- assign _rd_out = _rd_out | append: _rd_hours | append: " hr" -%}
+{%- endif -%}
+{%- if _rd_mins > 0 -%}
+  {%- if _rd_out != "" -%}{%- assign _rd_out = _rd_out | append: " " -%}{%- endif -%}
+  {%- assign _rd_out = _rd_out | append: _rd_mins | append: " min" -%}
+{%- endif -%}
+{{- _rd_out -}}
+{%- endif -%}
+{%- endif -%}

data/_includes/components/recipe-grams.html

@@ -0,0 +1,58 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-grams (value resolver — emits a bare number)
+  Path:        _includes/components/recipe-grams.html
+  Purpose:     Convert one recipe quantity to grams so ratio tables and
+               baker's percentages can be computed at BUILD time (no JS needed).
+  Params:      qty (number, required)            — the amount as authored
+               unit (string, optional)           — g, kg, oz, lb, ml, l, tsp,
+                                                   tbsp, cup, fl oz, pint, …
+               grams_per_cup (number, optional)  — density, required to convert
+                                                   a VOLUME into a weight
+  Depends on:  nothing (pure Liquid arithmetic)
+  Notes:       Outputs a bare number rounded to 1 decimal, or nothing at all
+               when the unit is unknown/countable ("clove", "egg") or a volume
+               with no density. Callers MUST treat empty output as "unknown".
+               Mirrors the unit table in assets/js/recipe-scaler.js — change
+               both together.
+
+               Liquid `assign` writes to the GLOBAL scope even inside an
+               include, so every variable here is prefixed `_rg_` to keep
+               repeated calls from clobbering the caller's own variables.
+
+               Capture it (this comment is brace-free so it cannot self-execute):
+                 capture grams -> include components/recipe-grams.html
+                                    qty=i.qty unit=i.unit grams_per_cup=density
+{%- endcomment -%}
+{%- if include.qty == nil or include.qty == "" -%}
+  {%- comment -%} ERROR: recipe-grams requires `qty` {%- endcomment -%}
+{%- else -%}
+{%- assign _rg_u = include.unit | default: "" | downcase | strip | replace: ".", "" | replace: "-", " " -%}
+{%- assign _rg_mass = 0 -%}
+{%- assign _rg_ml = 0 -%}
+{%- case _rg_u -%}
+  {%- when "g" or "gram" or "grams" or "gr" -%}{%- assign _rg_mass = 1 -%}
+  {%- when "kg" or "kilogram" or "kilograms" -%}{%- assign _rg_mass = 1000 -%}
+  {%- when "mg" or "milligram" or "milligrams" -%}{%- assign _rg_mass = 0.001 -%}
+  {%- when "oz" or "ounce" or "ounces" -%}{%- assign _rg_mass = 28.3495 -%}
+  {%- when "lb" or "lbs" or "pound" or "pounds" -%}{%- assign _rg_mass = 453.592 -%}
+  {%- when "ml" or "milliliter" or "milliliters" or "millilitre" or "millilitres" or "cc" -%}{%- assign _rg_ml = 1 -%}
+  {%- when "l" or "liter" or "liters" or "litre" or "litres" -%}{%- assign _rg_ml = 1000 -%}
+  {%- when "dl" or "deciliter" or "deciliters" -%}{%- assign _rg_ml = 100 -%}
+  {%- when "tsp" or "teaspoon" or "teaspoons" -%}{%- assign _rg_ml = 4.92892 -%}
+  {%- when "tbsp" or "tbs" or "tablespoon" or "tablespoons" -%}{%- assign _rg_ml = 14.7868 -%}
+  {%- when "cup" or "cups" -%}{%- assign _rg_ml = 236.588 -%}
+  {%- when "fl oz" or "floz" or "fluid ounce" or "fluid ounces" -%}{%- assign _rg_ml = 29.5735 -%}
+  {%- when "pint" or "pints" or "pt" -%}{%- assign _rg_ml = 473.176 -%}
+  {%- when "quart" or "quarts" or "qt" -%}{%- assign _rg_ml = 946.353 -%}
+  {%- when "gallon" or "gallons" or "gal" -%}{%- assign _rg_ml = 3785.41 -%}
+{%- endcase -%}
+{%- if _rg_mass > 0 -%}
+  {%- assign _rg_g = include.qty | times: _rg_mass -%}
+{{- _rg_g | round: 1 -}}
+{%- elsif _rg_ml > 0 and include.grams_per_cup -%}
+  {%- assign _rg_vol = include.qty | times: _rg_ml -%}
+  {%- assign _rg_g = _rg_vol | times: include.grams_per_cup | divided_by: 236.588 -%}
+{{- _rg_g | round: 1 -}}
+{%- endif -%}
+{%- endif -%}