jekyll-theme-zer0 1.27.0 → 1.29.0

data/_includes/components/data-card.html

@@ -0,0 +1,95 @@
+{%- comment -%}
+  ===================================================================
+  DATA-CARD — one generic, data-driven Bootstrap card
+  ===================================================================
+
+  Path: _includes/components/data-card.html
+  Purpose: Render ONE card from a plain data hash so hub dashboards,
+           fleet registries, service grids, and link boards can be
+           data-driven instead of hand-written Bootstrap markup.
+           Usually invoked via components/card-grid.html.
+
+  Parameters:
+    item          (hash, required) — the card data (see schema below)
+    heading_level (string) — heading tag for the title, default "h3"
+    heading_class (string) — classes for the heading, default "h5"
+    card_class    (string) — extra classes on the .card element
+
+  Item schema (every key optional except title):
+    title         card heading text
+    url           makes the title a link
+    external      true → the title link opens in a new tab
+    description   body copy (plain text or inline HTML)
+    icon          Bootstrap Icons class shown before the title (e.g. "bi-robot")
+    image         image path/URL rendered via components/preview-image.html
+    image_alt     alt text for the image (defaults to title)
+    badge         short status label rendered next to the title
+    badge_variant Bootstrap color suffix for the badge (default "secondary")
+    badge_title   tooltip for the badge
+    meta          array of { icon, text } pills rendered under the body
+    buttons       array of { label, url, icon, variant, external } footer actions
+    footer        small muted footer text (rendered when no buttons)
+
+  Example (_data/projects.yml + a page):
+    {% for p in site.data.projects %}
+      {% include components/data-card.html item=p %}
+    {% endfor %}
+  ===================================================================
+{%- endcomment -%}
+{%- assign _dc = include.item -%}
+{%- assign _dc_heading = include.heading_level | default: "h3" -%}
+{%- assign _dc_heading_class = include.heading_class | default: "h5" -%}
+<div class="card h-100 zer0-data-card {{ include.card_class }}">
+  {%- if _dc.image -%}
+    {%- assign _dc_img_alt = _dc.image_alt | default: _dc.title -%}
+    {%- if _dc.url -%}<a href="{{ _dc.url | relative_url }}" tabindex="-1" aria-hidden="true">{%- endif -%}
+    {%- include components/preview-image.html src=_dc.image alt=_dc_img_alt class="card-img-top" style="height: 160px; object-fit: cover;" -%}
+    {%- if _dc.url -%}</a>{%- endif -%}
+  {%- endif -%}
+  <div class="card-body d-flex flex-column">
+    <{{ _dc_heading }} class="card-title {{ _dc_heading_class }} mb-2 d-flex align-items-center">
+      {%- if _dc.icon %}<i class="bi {{ _dc.icon }} me-2" aria-hidden="true"></i>{% endif -%}
+      <span class="flex-grow-1">
+        {%- if _dc.url -%}
+          <a href="{{ _dc.url | relative_url }}" class="text-decoration-none text-body-emphasis"
+             {%- if _dc.external %} target="_blank" rel="noopener"{% endif %}>{{ _dc.title }}</a>
+        {%- else -%}
+          {{ _dc.title }}
+        {%- endif -%}
+      </span>
+      {%- if _dc.badge %}
+      <span class="badge text-bg-{{ _dc.badge_variant | default: 'secondary' }} ms-2"
+            {%- if _dc.badge_title %} title="{{ _dc.badge_title | escape }}"{% endif %}>{{ _dc.badge }}</span>
+      {%- endif %}
+    </{{ _dc_heading }}>
+    {%- if _dc.description %}
+    <p class="card-text text-body-secondary mb-2">{{ _dc.description }}</p>
+    {%- endif %}
+    {%- if _dc.meta and _dc.meta.size > 0 %}
+    <div class="d-flex flex-wrap gap-2 mt-auto pt-2">
+      {%- for m in _dc.meta %}
+      <span class="badge rounded-pill text-bg-light border text-body-secondary fw-normal">
+        {%- if m.icon %}<i class="bi {{ m.icon }} me-1" aria-hidden="true"></i>{% endif -%}
+        {{ m.text }}
+      </span>
+      {%- endfor %}
+    </div>
+    {%- endif %}
+  </div>
+  {%- if _dc.buttons and _dc.buttons.size > 0 %}
+  <div class="card-footer bg-transparent d-flex flex-wrap gap-2">
+    {%- for b in _dc.buttons %}
+    <a class="btn btn-sm btn-{{ b.variant | default: 'outline-primary' }}"
+       href="{{ b.url | relative_url }}"
+       {%- if b.external %} target="_blank" rel="noopener"{% endif %}>
+      {%- if b.icon %}<i class="bi {{ b.icon }} me-1" aria-hidden="true"></i>{% endif -%}
+      {{ b.label }}
+    </a>
+    {%- endfor %}
+  </div>
+  {%- elsif _dc.footer %}
+  <div class="card-footer bg-transparent">
+    <small class="text-body-secondary">{{ _dc.footer }}</small>
+  </div>
+  {%- endif %}
+</div>

data/_includes/components/halfmoon.html

@@ -9,8 +9,11 @@
                page (settings offcanvas + theme-controls-bar).
   params:      class (string, optional, default "") — extra btn-group classes,
                e.g. "w-100" to fill the parent.
+  config:      site.color_mode_lock: true removes the control entirely — the
+               site pins one mode and visitor switching is disabled
+               (halfmoon.js + core/color-mode-init.html enforce the same).
  -->
-
+{% unless site.color_mode_lock %}
 <div class="btn-group bd-theme-switch {{ include.class | default: '' }}" role="group" aria-label="Color mode">
   <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1" data-bs-theme-value="light" aria-pressed="false">
     <svg class="bi flex-shrink-0" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#sun-fill"></use></svg>
@@ -25,3 +28,4 @@
     <span>Auto</span>
   </button>
 </div>
+{% endunless %}

data/_includes/components/info-section.html

@@ -7,13 +7,14 @@
   File: info-section.html
   Path: _includes/components/info-section.html
   Purpose: Unified settings offcanvas panel with three tabs —
-           Appearance (color mode, skin, backgrounds, primary color),
+           Appearance (language, color mode, skin, backgrounds, primary color),
            Site (environment, theme & build info, admin links) and
            Developer (page location, metadata, source shortcuts).
 
   Dependencies:
   - Bootstrap 5 Offcanvas, Tabs
   - _includes/components/env-detect.html (sets is_production/build_env)
+  - _includes/components/language-toggle.html (panel variant — Language)
   - _includes/components/halfmoon.html (color-mode segmented control)
   - _includes/components/background-settings.html (skin + backgrounds)
   - _includes/components/env-switcher.html
@@ -44,9 +45,9 @@
   <!-- Offcanvas Header -->
   <div class="offcanvas-header border-bottom pb-0 d-block">
     <div class="d-flex align-items-center justify-content-between mb-2">
-      <h5 class="offcanvas-title" id="infoSectionLabel">
+      <h2 class="offcanvas-title h5" id="infoSectionLabel">
         <i class="bi bi-gear-wide-connected me-2" aria-hidden="true"></i>Settings
-      </h5>
+      </h2>
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
 
@@ -82,6 +83,10 @@
       <!-- Appearance Tab — everything that changes how the site looks -->
       <div class="tab-pane fade show active" id="appearance-pane" role="tabpanel" aria-labelledby="appearance-tab" tabindex="0">
 
+        <!-- Language — renders its own heading, and nothing at all when
+             site.translation is disabled. NOT cached: page-dependent. -->
+        {% include components/language-toggle.html variant="panel" %}
+
         <!-- Color Mode -->
         <div class="mb-4">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">

data/_includes/components/language-toggle.html

@@ -2,24 +2,61 @@
 {%- comment -%}
   Component:   language-toggle
   Path:        _includes/components/language-toggle.html
-  Purpose:     Navbar dropdown that switches between the English original and
-               its machine-generated translations (scripts/translate.rb).
-               Shows the source language plus every configured target
-               language; targets without a generated translation for the
-               current page render as disabled entries.
-  Params:      none — reads page.lang / page.url / page.translation_source_url
-               and the generated _data/i18n/manifest.yml.
+  Purpose:     Switches between the English original and its machine-generated
+               translations (scripts/translate.rb). Shows the source language
+               plus every configured target language. Every entry is a live
+               link: a target without a generated translation for the current
+               page falls back to the source page and is explained by one
+               footnote (it used to render as a disabled entry — see T-038).
+  Params:      variant (string, optional, default "navbar")
+                 - "navbar" — compact dropdown for the header utility cluster
+                 - "panel"  — self-contained "Language" section for the
+                              Settings offcanvas (components/info-section.html),
+                              rendered as an always-visible list of choices
+                              with its own <h6> heading
+  Reads:       page.lang / page.url / page.translation_source_url and the
+               generated _data/i18n/manifest.yml.
   Depends on:  site.translation.* config, site.data.i18n.manifest,
                _data/i18n/languages.yml (display names), core/i18n.html,
-               Bootstrap 5 dropdown, Bootstrap Icons (bi-translate)
+               Bootstrap 5 dropdown (navbar variant only), Bootstrap Icons
+               (bi-translate)
   Notes:       Renders nothing when translation is disabled or no target
                languages are configured. The chosen language is remembered in
                localStorage("zer0-lang") for future UX (no auto-redirect).
                Must NOT be include_cached — the menu is page-dependent.
+               The theme ships the "panel" variant (the navbar is reserved for
+               main navigation); "navbar" stays for consumers that prefer the
+               header dropdown.
+
+               MENU CONTRACT (T-038 / #406) — shared by both variants:
+                 * No DISABLED rows. A target language without a generated
+                   translation is still a link; it goes to the source-language
+                   page and still records the preference in zer0-lang, so the
+                   menu never contains a dead end.
+                 * The current language is marked with a check icon and a
+                   subtle tint — NOT Bootstrap's `.active` primary fill, which
+                   read as a selected nav item rather than "you are here".
+                 * Machine-generated translations carry a small "auto" chip.
+                   The source language never does (a human wrote it), and
+                   neither do untranslated rows (nothing was generated).
+                 * The per-row "(Not yet translated)" text is replaced by ONE
+                   footnote under a divider, referenced from each untranslated
+                   row via aria-describedby. Per-row text was the single
+                   biggest contributor to menu width.
+               Trigger changes (icon-only, no caret) apply to the navbar
+               variant only — the panel has an <h6> heading, not a button.
+
+               New ui keys (lang_machine_translated, lang_machine_translated_title,
+               lang_untranslated_note) live in _data/ui-text.yml `en`. core/i18n.html
+               REPLACES the whole `ui` map on a translated page rather than merging
+               it, so until scripts/translate.rb regenerates _data/i18n/<lang>.yml
+               these keys are absent there — every use below therefore carries a
+               literal `| default:` fallback. Do not remove them.
 {%- endcomment -%}
 {%- assign _lt_langs = site.translation.languages -%}
 {%- if site.translation.enabled and _lt_langs and _lt_langs.size > 0 -%}
 {%- include core/i18n.html -%}
+{%- assign _lt_variant = include.variant | default: 'navbar' -%}
 {%- assign _lt_source = site.translation.source_lang | default: 'en' -%}
 {%- assign _lt_current = page.lang | default: _lt_source -%}
 {%- if _lt_current == _lt_source -%}
@@ -30,25 +67,117 @@
 {%- assign _lt_entry = site.data.i18n.manifest.pages[_lt_src_url] -%}
 {%- assign _lt_names = site.data.i18n.languages -%}
 {%- assign _lt_source_name = _lt_names[_lt_source].native | default: _lt_source -%}
+{%- comment -%}
+  Display name of the language being read, for the trigger's title/aria — the
+  icon-only button has no visible text, so the accessible name has to carry it.
+{%- endcomment -%}
+{%- if _lt_current == _lt_source -%}
+  {%- assign _lt_current_name = _lt_source_name -%}
+{%- else -%}
+  {%- assign _lt_current_name = _lt_names[_lt_current].native | default: _lt_current -%}
+{%- endif -%}
+{%- comment -%}
+  Does ANY target language lack a translation of this page? Drives whether the
+  footnote + divider render at all — an all-translated menu shows neither.
+  A target we are currently reading is by definition translated.
+{%- endcomment -%}
+{%- assign _lt_untranslated = 0 -%}
+{%- for _lt_l in _lt_langs -%}
+  {%- unless _lt_l == _lt_current or _lt_entry[_lt_l] -%}
+    {%- assign _lt_untranslated = _lt_untranslated | plus: 1 -%}
+  {%- endunless -%}
+{%- endfor -%}
+{%- assign _lt_note_id = 'zer0-lang-untranslated-note' -%}
+{%- assign _lt_auto_label = ui.lang_machine_translated | default: 'auto' -%}
+{%- assign _lt_auto_title = ui.lang_machine_translated_title | default: 'Machine-generated translation' -%}
+{%- assign _lt_note_text = ui.lang_untranslated_note | default: 'Marked languages are not yet translated — those links open the original.' -%}
+{%- assign _lt_fallback_url = _lt_src_url | default: '/' | relative_url -%}
+{%- if _lt_variant == 'panel' -%}
+<div class="mb-4 nav-lang-panel" id="zer0-lang-toggle">
+    <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+        <i class="bi bi-translate me-1" aria-hidden="true"></i>{{ ui.lang_toggle_label | default: "Language" }}
+    </h6>
+    <div class="list-group nav-lang-options" role="group" aria-label="{{ ui.lang_toggle_aria | default: 'Change language' }}">
+        {%- if _lt_current == _lt_source %}
+        <span class="list-group-item nav-lang-item is-current" aria-current="true">
+            <span class="nav-lang-code">{{ _lt_source | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_source_name }}</span>
+            <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+        </span>
+        {%- else %}
+        <a class="list-group-item list-group-item-action nav-lang-item" data-lang="{{ _lt_source }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}">
+            <span class="nav-lang-code">{{ _lt_source | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_source_name }}</span>
+        </a>
+        {%- endif %}
+        {%- for _lt_lang in _lt_langs -%}
+        {%- assign _lt_name = _lt_names[_lt_lang].native | default: _lt_lang -%}
+        {%- assign _lt_t = _lt_entry[_lt_lang] %}
+        {%- if _lt_current == _lt_lang %}
+        <span class="list-group-item nav-lang-item is-current" aria-current="true">
+            <span class="nav-lang-code">{{ _lt_lang | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_name }}</span>
+            <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+            <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+        </span>
+        {%- elsif _lt_t %}
+        <a class="list-group-item list-group-item-action nav-lang-item" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_lang }}" href="{{ _lt_t.url | relative_url }}">
+            <span class="nav-lang-code">{{ _lt_lang | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_name }}</span>
+            <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+        </a>
+        {%- else %}
+        {%- comment -%}
+          No translation yet — still a LINK, not a disabled row. It goes to the
+          source page and records the preference, so the reader lands on real
+          content instead of a dead entry. hreflang describes the DESTINATION,
+          which is the source language, not the one that was clicked.
+        {%- endcomment -%}
+        <a class="list-group-item list-group-item-action nav-lang-item is-untranslated" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}" aria-describedby="{{ _lt_note_id }}-panel">
+            <span class="nav-lang-code">{{ _lt_lang | slice: 0, 2 | upcase }}</span>
+            <span class="nav-lang-name">{{ _lt_name }}</span>
+            <span class="nav-lang-mark" aria-hidden="true">*</span>
+        </a>
+        {%- endif %}
+        {%- endfor %}
+    </div>
+    {%- if _lt_untranslated > 0 %}
+    <hr class="nav-lang-divider">
+    <p class="nav-lang-note" id="{{ _lt_note_id }}-panel">{{ _lt_note_text }}</p>
+    {%- endif %}
+</div>
+{%- else -%}
 <div class="dropdown nav-lang-toggle" id="zer0-lang-toggle">
+    {%- comment -%}
+      Icon-only, square, and caret-free. `dropdown-toggle` is what draws the
+      Bootstrap caret; it is NOT what wires the dropdown — Bootstrap binds on
+      [data-bs-toggle="dropdown"], so dropping the class costs no behaviour.
+      The visible EN/FR label is gone at every width (it was already hidden
+      below xl), so title + aria-label are the only accessible name and both
+      name the language being read.
+    {%- endcomment -%}
     <button
-        class="btn nav-lang-button dropdown-toggle"
+        class="btn nav-lang-button"
         type="button"
         id="langToggleButton"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         aria-label="{{ ui.lang_toggle_aria | default: 'Change language' }}"
-        title="{{ ui.lang_toggle_label | default: 'Language' }}"
+        title="{{ ui.lang_toggle_label | default: 'Language' }}: {{ _lt_current_name }}"
     >
         <i class="{{ site.default_icon }} bi-translate" aria-hidden="true"></i>
-        <span class="nav-link-text d-none d-xl-inline ms-1 text-uppercase">{{ _lt_current | slice: 0, 2 }}</span>
     </button>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="langToggleButton">
+    <ul class="dropdown-menu dropdown-menu-end nav-lang-menu" aria-labelledby="langToggleButton">
         <li>
             {%- if _lt_current == _lt_source %}
-            <span class="dropdown-item active" aria-current="true">{{ _lt_source_name }}</span>
+            <span class="dropdown-item nav-lang-item is-current" aria-current="true">
+                <span class="nav-lang-name">{{ _lt_source_name }}</span>
+                <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+            </span>
             {%- else %}
-            <a class="dropdown-item" data-lang="{{ _lt_source }}" hreflang="{{ _lt_source }}" href="{{ _lt_src_url | default: '/' | relative_url }}">{{ _lt_source_name }}</a>
+            <a class="dropdown-item nav-lang-item" data-lang="{{ _lt_source }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}">
+                <span class="nav-lang-name">{{ _lt_source_name }}</span>
+            </a>
             {%- endif %}
         </li>
         {%- for _lt_lang in _lt_langs -%}
@@ -56,23 +185,41 @@
         {%- assign _lt_t = _lt_entry[_lt_lang] %}
         <li>
             {%- if _lt_current == _lt_lang %}
-            <span class="dropdown-item active" aria-current="true">{{ _lt_name }}</span>
+            <span class="dropdown-item nav-lang-item is-current" aria-current="true">
+                <span class="nav-lang-name">{{ _lt_name }}</span>
+                <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+                <i class="bi bi-check2 nav-lang-check" aria-hidden="true"></i>
+            </span>
             {%- elsif _lt_t %}
-            <a class="dropdown-item" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_lang }}" href="{{ _lt_t.url | relative_url }}">{{ _lt_name }}</a>
+            <a class="dropdown-item nav-lang-item" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_lang }}" href="{{ _lt_t.url | relative_url }}">
+                <span class="nav-lang-name">{{ _lt_name }}</span>
+                <span class="nav-lang-auto" title="{{ _lt_auto_title }}">{{ _lt_auto_label }}</span>
+            </a>
             {%- else %}
-            <span class="dropdown-item disabled" aria-disabled="true" title="{{ ui.lang_not_available | default: 'Not yet translated' }}">{{ _lt_name }} <small class="text-body-secondary">({{ ui.lang_not_available | default: 'Not yet translated' }})</small></span>
+            {%- comment -%} See the panel variant above — link, never a dead row. {%- endcomment -%}
+            <a class="dropdown-item nav-lang-item is-untranslated" data-lang="{{ _lt_lang }}" hreflang="{{ _lt_source }}" href="{{ _lt_fallback_url }}" aria-describedby="{{ _lt_note_id }}">
+                <span class="nav-lang-name">{{ _lt_name }}</span>
+                <span class="nav-lang-mark" aria-hidden="true">*</span>
+            </a>
             {%- endif %}
         </li>
         {%- endfor %}
+        {%- if _lt_untranslated > 0 %}
+        <li><hr class="dropdown-divider"></li>
+        <li><p class="nav-lang-note" id="{{ _lt_note_id }}">{{ _lt_note_text }}</p></li>
+        {%- endif %}
     </ul>
 </div>
+{%- endif -%}
 <script>
   // Remember the visitor's language pick (no auto-redirect — just preference).
+  // Delegated at document level so it covers both variants and stays correct
+  // if a consumer renders the component more than once per page.
   (function () {
-    var toggle = document.getElementById('zer0-lang-toggle');
-    if (!toggle) return;
-    toggle.addEventListener('click', function (event) {
-      var item = event.target.closest('a.dropdown-item[data-lang]');
+    if (window.__zer0LangPrefWired) return;
+    window.__zer0LangPrefWired = true;
+    document.addEventListener('click', function (event) {
+      var item = event.target.closest('#zer0-lang-toggle a[data-lang]');
       if (!item) return;
       try { localStorage.setItem('zer0-lang', item.getAttribute('data-lang')); } catch (e) { /* private mode */ }
     });

data/_includes/components/page-feedback.html

@@ -103,6 +103,14 @@
       <!-- Step 1 — request type -->
       <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.
+        {%- endcomment -%}
         {%- assign pf_group = "" -%}
         {%- for t in site.data.feedback_types -%}
           {%- if t.group != pf_group -%}
@@ -124,6 +132,54 @@
             </span>
           </button>
           {%- if forloop.last -%}</div>{%- endif -%}
+        {%- else -%}
+          {%- comment -%}
+            _data/feedback_types.yml is optional for consumers (remote_theme
+            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
+            directive.
+          {%- endcomment -%}
+          <p class="pf-types-group">This page</p>
+          <div class="pf-types-grid" role="radiogroup" aria-label="This page">
+            <button type="button" class="pf-type" role="radio" aria-checked="false"
+                    data-pf-type-id="fix-page" tabindex="0">
+              <i class="bi bi-bug pf-type-icon" aria-hidden="true"></i>
+              <span class="pf-type-text">
+                <span class="pf-type-label">Report a problem</span>
+                <span class="pf-type-desc">A typo, broken link, wrong information, or something rendering badly</span>
+              </span>
+            </button>
+            <button type="button" class="pf-type" role="radio" aria-checked="false"
+                    data-pf-type-id="improve-page" tabindex="-1">
+              <i class="bi bi-stars pf-type-icon" aria-hidden="true"></i>
+              <span class="pf-type-text">
+                <span class="pf-type-label">Improve this page</span>
+                <span class="pf-type-desc">Polish the copy, structure, or presentation</span>
+              </span>
+            </button>
+          </div>
+          <p class="pf-types-group">The site</p>
+          <div class="pf-types-grid" role="radiogroup" aria-label="The site">
+            <button type="button" class="pf-type" role="radio" aria-checked="false"
+                    data-pf-type-id="feature" tabindex="-1">
+              <i class="bi bi-lightbulb pf-type-icon" aria-hidden="true"></i>
+              <span class="pf-type-text">
+                <span class="pf-type-label">Suggest a feature</span>
+                <span class="pf-type-desc">An idea that would make the site more useful</span>
+              </span>
+            </button>
+            <button type="button" class="pf-type" role="radio" aria-checked="false"
+                    data-pf-type-id="question" tabindex="-1">
+              <i class="bi bi-question-circle pf-type-icon" aria-hidden="true"></i>
+              <span class="pf-type-text">
+                <span class="pf-type-label">Ask a question</span>
+                <span class="pf-type-desc">Something unclear that is not exactly a bug</span>
+              </span>
+            </button>
+          </div>
         {%- endfor -%}
       </fieldset>
 
@@ -219,9 +275,16 @@
 }
 </script>
 
-<!-- Request-type taxonomy (from _data/feedback_types.yml) -->
+<!-- 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) -->
 <script id="pageFeedbackTypes" type="application/json">
-{{ site.data.feedback_types | jsonify }}
+{% 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?"}
+]{% endif %}
 </script>
 
 <!-- Live page context (build-time front matter; runtime detail added by JS) -->

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 -%}
+
+<!-- Page-view counter configuration consumed by assets/js/page-views.js -->
+<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/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 -%}