jekyll-theme-zer0 1.28.0 → 1.30.0

data/_includes/components/admin-tabs.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-050 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   ADMIN TABS — Reusable tabbed interface for admin pages
   ===================================================================
@@ -30,7 +30,7 @@
   Dependencies: Bootstrap 5 tab/nav components, Bootstrap Icons
   Used by: Admin pages (config.md, theme.md, navigation.md, etc.)
   ===================================================================
--->
+{% endcomment %}
 
 {% assign tab_prefix = include.id | default: "admin" %}
 {% assign tab_list = include.tabs | split: "|" %}

data/_includes/components/ai-chat.html

@@ -14,9 +14,11 @@
     - Renders nothing unless ai_chat.enabled AND a usable auth path
       exists: proxy mode with a deployed proxy (proxy_ready: true,
       recommended) or direct mode with a non-empty api_key.
-    - Proxy mode keeps the Anthropic key server-side (see
-      templates/deploy/chat-proxy/). Direct mode sends the key from the
-      browser (visible in page source) — local development only.
+    - Proxy mode keeps the provider key server-side (see
+      templates/deploy/chat-proxy/) and can answer with Claude or Grok
+      (ai_chat.provider; the proxy's CHAT_PROVIDER wins). Direct mode
+      sends an Anthropic key from the browser (visible in page source) —
+      local development only, Claude only.
     - GitHub actions: github.mode "url" opens pre-filled github.com
       forms (no token anywhere); "proxy" creates issues/PRs through the
       proxy's GitHub endpoints with a server-side token. Creation always
@@ -63,7 +65,7 @@
   {% assign local_edit_flag = true %}
 {% endif %}
 
-<!-- AI Chat Toggle Button -->
+{% comment %} AI Chat Toggle Button {% endcomment %}
 <button id="aiChatToggle"
         class="ai-chat-toggle btn btn-primary rounded-circle shadow-lg"
         type="button"
@@ -74,14 +76,14 @@
   <i class="bi bi-x-lg ai-chat-icon-close d-none" aria-hidden="true"></i>
 </button>
 
-<!-- AI Chat Panel -->
+{% comment %} AI Chat Panel {% endcomment %}
 <div id="aiChatPanel"
      class="ai-chat-panel shadow-lg rounded-3"
      role="dialog"
      aria-labelledby="aiChatTitle"
      aria-hidden="true">
 
-  <!-- Chat Header -->
+  {% comment %} Chat Header {% endcomment %}
   <div class="ai-chat-header d-flex align-items-center justify-content-between p-3">
     <div class="d-flex align-items-center gap-2">
       <i class="bi {{ site.ai_chat.icon | default: 'bi-robot' }} fs-5" aria-hidden="true"></i>
@@ -95,13 +97,13 @@
     </button>
   </div>
 
-  <!-- Chat Messages -->
+  {% comment %} Chat Messages {% endcomment %}
   <div id="aiChatMessages" class="ai-chat-messages p-3" role="log" aria-live="polite">
-    <!-- Welcome message inserted by JS -->
+    {% comment %} Welcome message inserted by JS {% endcomment %}
   </div>
 
   {% if gh_enabled %}
-  <!-- Quick actions (GitHub-backed flows) -->
+  {% comment %} Quick actions (GitHub-backed flows) {% endcomment %}
   <div class="ai-chat-chips px-3 pb-2 d-flex gap-2 flex-wrap">
     <button type="button"
             class="ai-chat-chip btn btn-sm btn-outline-secondary rounded-pill"
@@ -123,7 +125,7 @@
   </div>
   {% endif %}
 
-  <!-- Chat Input -->
+  {% comment %} Chat Input {% endcomment %}
   <div class="ai-chat-input p-3">
     <form id="aiChatForm" class="d-flex gap-2" autocomplete="off">
       <label for="aiChatInput" class="visually-hidden">Chat message</label>
@@ -146,7 +148,7 @@
   </div>
 </div>
 
-<!-- Page Context Data (generated by Jekyll at build time) -->
+{% comment %} Page Context Data (generated by Jekyll at build time) {% endcomment %}
 <script id="aiChatPageContext" type="application/json">
 {
   "page_title": {{ page.title | default: site.title | jsonify }},
@@ -179,6 +181,7 @@
 <script id="aiChatConfig" type="application/json">
 {
   "endpoint": {{ site.ai_chat.endpoint | default: "/api/chat" | jsonify }},
+  "provider": {{ site.ai_chat.provider | default: "anthropic" | jsonify }},
   "authMode": {{ ai_auth_mode | jsonify }},
   "apiKey": {{ site.ai_chat.api_key | jsonify }},
   "anthropicVersion": {{ site.ai_chat.anthropic_version | default: "2023-06-01" | jsonify }},

data/_includes/components/analytics-dashboard.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   ANALYTICS DASHBOARD — PostHog & tracking configuration overview
   ===================================================================
@@ -11,11 +11,11 @@
   Dependencies: Bootstrap 5 card/table/badge, site.posthog config
   Used by: pages/_about/settings/analytics.md
   ===================================================================
--->
+{% endcomment %}
 
 {% assign ph = site.posthog %}
 
-<!-- Status cards -->
+{% comment %} Status cards {% endcomment %}
 <div class="row g-3 mb-4">
   <div class="col-6 col-lg-3">
     <div class="card text-center h-100 {% if ph.enabled %}border-success{% else %}border-warning{% endif %}">
@@ -55,10 +55,10 @@
   </div>
 </div>
 
-<!-- Configuration Details -->
+{% comment %} Configuration Details {% endcomment %}
 <div class="row g-4">
 
-  <!-- PostHog Settings -->
+  {% comment %} PostHog Settings {% endcomment %}
   <div class="col-lg-6">
     <div class="card h-100">
       <div class="card-header"><i class="bi bi-gear me-1"></i> PostHog Configuration</div>
@@ -105,7 +105,7 @@
     </div>
   </div>
 
-  <!-- Privacy & Compliance -->
+  {% comment %} Privacy & Compliance {% endcomment %}
   <div class="col-lg-6">
     <div class="card h-100">
       <div class="card-header"><i class="bi bi-shield-lock me-1"></i> Privacy & Compliance</div>
@@ -162,7 +162,7 @@
   </div>
 </div>
 
-<!-- Custom Events -->
+{% comment %} Custom Events {% endcomment %}
 {% if ph.custom_events %}
 <h5 class="mt-4 mb-3"><i class="bi bi-lightning me-1"></i> Custom Event Tracking</h5>
 <div class="row g-3">
@@ -221,7 +221,7 @@
 </div>
 {% endif %}
 
-<!-- External Links -->
+{% comment %} External Links {% endcomment %}
 <div class="mt-4">
   <a href="https://us.posthog.com" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm me-2">
     <i class="bi bi-box-arrow-up-right me-1"></i> Open PostHog Dashboard

data/_includes/components/author-bio.html

@@ -73,7 +73,7 @@
     <i class="bi bi-person-badge me-2" aria-hidden="true"></i>{{ bio_heading }}
   </h2>
 
-  {% include components/author-card.html author=include.author style="full" %}
+  {% include components/author-card.html author=include.author style="full" heading_level=3 %}
 
   {% if show_profile_link and bio_profile_url %}
     <div class="mt-3">

data/_includes/components/author-card.html

@@ -192,10 +192,18 @@
         {% endif %}
       {% endif %}
       <div class="flex-grow-1">
-        <h5 class="card-title mb-1" itemprop="name">
+        {%- comment -%}
+          Level is a PARAMETER, size is not. This card renders under an <h2> in
+          author-bio.html and under different ancestors elsewhere, so a
+          hardcoded level cannot be correct everywhere -- picking <h5> for its
+          font-size is what produced the h2 -> h5 skip in issue #436. The
+          default keeps the historic level for any caller that does not say.
+        {%- endcomment -%}
+        {%- assign _ac_level = include.heading_level | default: 5 -%}
+        <h{{ _ac_level }} class="h5 card-title mb-1" itemprop="name">
           {%- if profile_url -%}<a href="{{ profile_url }}" class="text-decoration-none text-reset" itemprop="url">{{ author_name }}</a>{%- else -%}{{ author_name }}{%- endif -%}
           {%- if author_data.ai -%} <span class="badge author-ai-badge align-middle" title="AI author persona"><i class="bi bi-robot me-1" aria-hidden="true"></i>AI</span>{%- endif -%}
-        </h5>
+        </h{{ _ac_level }}>
         {% if author_data.role %}<p class="text-primary mb-2" itemprop="jobTitle">{{ author_data.role }}</p>{% endif %}
         {% if author_data.tagline %}<p class="author-tagline fst-italic text-body-secondary mb-2">{{ author_data.tagline }}</p>{% endif %}
         {% if show_bio and author_data.bio %}<p class="card-text text-muted" itemprop="description">{{ author_data.bio }}</p>{% endif %}

data/_includes/components/author-eeat.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-054 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   AUTHOR E-E-A-T BLOCK - Experience, Expertise, Authority, Trust
   ===================================================================
@@ -21,7 +21,7 @@
   - _data/authors.yml: Author data
   - Bootstrap 5 utility classes
   ===================================================================
--->
+{% endcomment %}
 
 {% assign author_key = include.author_key | default: "bamr87" %}
 {% assign author = site.data.authors[author_key] %}
@@ -36,7 +36,7 @@
 {% if author %}
 
 {% if eeat_style == "banner" %}
-<!-- E-E-A-T Author Banner -->
+{% comment %} E-E-A-T Author Banner {% endcomment %}
 <div class="bg-body-secondary border-top border-bottom py-4 mt-5" itemscope itemtype="https://schema.org/Person">
   <div class="container-xl px-4 px-md-5">
     <div class="row align-items-center g-3">
@@ -91,7 +91,7 @@
 </div>
 
 {% elsif eeat_style == "card" %}
-<!-- E-E-A-T Author Card -->
+{% comment %} E-E-A-T Author Card {% endcomment %}
 <div class="card border-0 shadow-sm" itemscope itemtype="https://schema.org/Person">
   <div class="card-body p-4">
     <div class="d-flex align-items-start">

data/_includes/components/background-customizer.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-065 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   BACKGROUND CUSTOMIZER — fffuel-style background settings panel
   ===================================================================
@@ -14,12 +14,12 @@
     - _sass/theme/_backgrounds.scss (CSS custom properties)
     - Bootstrap 5 offcanvas + form components
   ===================================================================
--->
+{% endcomment %}
 
 {% assign skins = "air,aqua,contrast,dark,dirt,neon,mint,plum,sunrise" | split: "," %}
 {% assign current_skin = site.theme_skin | default: "dark" %}
 
-<!-- Floating toggle button -->
+{% comment %} Floating toggle button {% endcomment %}
 <button class="btn btn-sm btn-outline-secondary position-fixed bottom-0 end-0 m-3 rounded-circle"
         style="z-index: 1090; width: 40px; height: 40px;"
         type="button"
@@ -30,17 +30,17 @@
   <i class="bi bi-palette2"></i>
 </button>
 
-<!-- Offcanvas panel -->
+{% comment %} Offcanvas panel {% endcomment %}
 <div class="offcanvas offcanvas-end" tabindex="-1" id="zer0BgCustomizer" aria-labelledby="zer0BgCustomizerLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="zer0BgCustomizerLabel">
+    <h2 class="offcanvas-title h5" id="zer0BgCustomizerLabel">
       <i class="bi bi-palette2 me-2"></i>Background Settings
-    </h5>
+    </h2>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
 
   <div class="offcanvas-body">
-    <!-- Skin selector -->
+    {% comment %} Skin selector {% endcomment %}
     <div class="mb-4">
       <label class="form-label fw-semibold">Theme Skin</label>
       <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons">
@@ -56,7 +56,7 @@
 
     <hr>
 
-    <!-- Background toggle -->
+    {% comment %} Background toggle {% endcomment %}
     <div class="mb-3">
       <div class="form-check form-switch">
         <input class="form-check-input" type="checkbox" id="zer0BgToggle" checked>
@@ -66,7 +66,7 @@
 
     <hr>
 
-    <!-- Opacity sliders -->
+    {% comment %} Opacity sliders {% endcomment %}
     <div class="mb-3">
       <label class="form-label" for="zer0GradientOpacity">Gradient opacity</label>
       <input type="range" class="form-range" id="zer0GradientOpacity"
@@ -96,7 +96,7 @@
   </div>
 </div>
 
-<!-- Customizer interaction logic -->
+{% comment %} Customizer interaction logic {% endcomment %}
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   if (typeof zer0Bg === "undefined") return;

data/_includes/components/background-image.html

@@ -0,0 +1,114 @@
+{% comment %} Feature: ZER0-004 {% endcomment %}
+{% comment %}
+  BACKGROUND IMAGE - Cover art painted as a CSS background, announced correctly
+
+  Sibling to components/preview-image.html. Reach for THIS one when the art is
+  painted as a CSS background on an otherwise empty box; reach for
+  preview-image.html when the art is an <img> in the content flow.
+
+  WHY THIS EXISTS. A CSS background is invisible to assistive technology. A box
+  painted with cover art and nothing else announces nothing at all, so the
+  reader is told there is an element and never told what it shows. The fix is
+  role="img" plus an aria-label, which makes the box a single graphic with a
+  name. The theme already did this by hand in three places
+  (components/abc-letter.html, layouts/article.html rating stars,
+  components/theme-customizer.html) without it being a named convention.
+
+  TWO BRANCHES, and the second is not optional:
+
+    real image   -> role="img" aria-label="..."   (a graphic with a name)
+    decorative   -> aria-hidden="true", and NO role and NO aria-label
+
+  Combining aria-hidden with role="img" is worse than either alone: it
+  announces a graphic and then hides it. A gradient placeholder carries no
+  information the surrounding text does not already carry, so it is hidden.
+
+  Usage:
+    {%- include components/background-image.html
+       src=post.preview
+       alt=post.title
+       class="card-cover"
+       style="height: 180px;"
+    -%}
+
+    {%- comment -%} decorative fallback: omit alt, or pass decorative=true {%- endcomment -%}
+    {%- include components/background-image.html class="card-cover card-cover-empty" -%}
+
+  Params:
+    src         - image path (optional; omit for the decorative branch)
+    alt         - accessible name; REQUIRED for the real-image branch
+    class       - CSS classes on the box (default: "bg-cover")
+    style       - extra inline style, appended after the background shorthand
+    decorative  - force the decorative branch even when src is present
+    tag         - element name (default: div)
+
+  Path convention is preview-image.html's, duplicated rather than extracted:
+  it is ~14 lines of Liquid, and a third shared include to save them buys less
+  than it costs in indirection. preview-image.html remains the source of the
+  convention -- change it there first.
+    - /images/previews/x.png        -> /assets/images/previews/x.png
+    - /assets/images/previews/x.png -> unchanged
+    - https://example.com/x.png     -> unchanged (external URL)
+
+  DO NOT apply this to a box that wraps text. role="img" makes the element a
+  single graphic and its descendants stop being exposed -- so putting it on
+  _includes/content/intro.html, which paints a background AND wraps the page
+  <h1>, would delete the heading from the accessibility tree.
+{% endcomment %}
+{%- assign bgi_src = include.src -%}
+{%- assign bgi_alt = include.alt -%}
+{%- assign bgi_class = include.class | default: "bg-cover" -%}
+{%- assign bgi_style = include.style -%}
+{%- assign bgi_tag = include.tag | default: "div" -%}
+
+{%- comment -%} Decorative is the DEFAULT, and the real-image branch has to earn
+    it: an image AND a name AND no explicit decorative flag. Written as a
+    positive test on purpose -- the failure mode of getting this backwards is
+    role="img" aria-label="", an unnamed graphic, which is worse for a screen
+    reader than either branch done right. Falling back to aria-hidden is safe.
+
+    NOTE: `x == blank` does NOT match nil in Liquid 4 -- blank matches empty
+    strings and collections only. An earlier version of this file tested
+    `bgi_src == blank` and every decorative call rendered as an unnamed
+    graphic. Test truthiness AND emptiness, both. {%- endcomment -%}
+{%- assign bgi_decorative = true -%}
+{%- if include.decorative != true -%}
+  {%- if bgi_src and bgi_src != "" -%}
+    {%- if bgi_alt and bgi_alt != "" -%}
+      {%- assign bgi_decorative = false -%}
+    {%- endif -%}
+  {%- endif -%}
+{%- endif -%}
+
+{%- comment -%} Path resolution -- see preview-image.html {%- endcomment -%}
+{%- assign bgi_assets_prefix = site.preview_images.assets_prefix | default: '/assets' -%}
+{%- assign bgi_auto_prefix = site.preview_images.auto_prefix | default: true -%}
+{%- if bgi_src == nil or bgi_src == "" -%}
+  {%- assign bgi_final_src = nil -%}
+{%- elsif bgi_src contains '://' -%}
+  {%- assign bgi_final_src = bgi_src -%}
+{%- elsif bgi_auto_prefix and bgi_src != blank -%}
+  {%- if bgi_src contains bgi_assets_prefix -%}
+    {%- assign bgi_final_src = bgi_src | relative_url -%}
+  {%- else -%}
+    {%- assign bgi_final_src = bgi_assets_prefix | append: bgi_src | relative_url -%}
+  {%- endif -%}
+{%- elsif bgi_src != blank -%}
+  {%- assign bgi_final_src = bgi_src | relative_url -%}
+{%- endif -%}
+
+{%- comment -%} One capture for the whole attribute value, so "is there a style
+    at all" is a single test. `!= blank` would not do here: a capture that
+    produced nothing is an empty string, and "" == blank is true, but the
+    surrounding whitespace control makes that fragile to edit. Compare to ""
+    explicitly. {%- endcomment -%}
+{%- capture bgi_background -%}
+{%- if bgi_final_src %}background-image: url('{{ bgi_final_src }}'); background-size: cover; background-position: center;{% endif %}{{ bgi_style }}
+{%- endcapture -%}
+{%- assign bgi_background = bgi_background | strip -%}
+
+{%- if bgi_decorative -%}
+<{{ bgi_tag }} class="{{ bgi_class }}" aria-hidden="true"{% if bgi_background != "" %} style="{{ bgi_background }}"{% endif %}></{{ bgi_tag }}>
+{%- else -%}
+<{{ bgi_tag }} class="{{ bgi_class }}" role="img" aria-label="{{ bgi_alt | escape }}"{% if bgi_background != "" %} style="{{ bgi_background }}"{% endif %}></{{ bgi_tag }}>
+{%- endif -%}

data/_includes/components/background-settings.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-077 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   BACKGROUND SETTINGS — fffuel-style background controls (tab content)
   ===================================================================
@@ -17,32 +17,33 @@
   Section headings match the h6 pattern used by the parent
   info-section.html so the Appearance tab reads as one surface.
   ===================================================================
--->
+{% endcomment %}
 
 {% assign skins = "air,aqua,contrast,dark,dirt,neon,mint,plum,sunrise" | split: "," %}
 {% assign current_skin = site.theme_skin | default: "dark" %}
 
-<!-- Skin selector -->
+{% comment %} Skin selector {% endcomment %}
 <div class="mb-4">
-  <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+  <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
     <i class="bi bi-palette2 me-1" aria-hidden="true"></i>Theme Skin
-  </h6>
+  </h3>
   <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons" role="group" aria-label="Theme skin">
     {% for skin in skins %}
     <button class="btn btn-sm btn-outline-primary{% if skin == current_skin %} active{% endif %}"
             data-skin="{{ skin }}"
-            type="button">
+            type="button"
+            aria-pressed="{% if skin == current_skin %}true{% else %}false{% endif %}">
       {{ skin | capitalize }}
     </button>
     {% endfor %}
   </div>
 </div>
 
-<!-- SVG background toggle + layer opacity -->
+{% comment %} SVG background toggle + layer opacity {% endcomment %}
 <div class="mb-4">
-  <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+  <h3 class="h6 text-body-secondary small text-uppercase fw-semibold mb-2">
     <i class="bi bi-image me-1" aria-hidden="true"></i>Background
-  </h6>
+  </h3>
 
   <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded mb-3">
     <label class="form-check-label" for="zer0BgToggle">SVG backgrounds</label>
@@ -83,18 +84,32 @@
   </button>
 </div>
 
-<!-- Customizer interaction logic -->
+{% comment %} Customizer interaction logic {% endcomment %}
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   if (typeof zer0Bg === "undefined") return;
 
   // Skin buttons
+  // `.active` is a Bootstrap visual class and carries no accessibility
+  // semantics, so selection is also exposed via aria-pressed (WCAG 4.1.2),
+  // matching the sibling color-mode group. Both are set in one place so no
+  // code path can leave them disagreeing.
+  function markActiveSkinButton(btn) {
+    document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) {
+      b.classList.remove("active");
+      b.setAttribute("aria-pressed", "false");
+    });
+    if (btn) {
+      btn.classList.add("active");
+      btn.setAttribute("aria-pressed", "true");
+    }
+  }
+
   document.querySelectorAll("#zer0SkinButtons [data-skin]").forEach(function (btn) {
     btn.addEventListener("click", function () {
       var skin = this.getAttribute("data-skin");
       zer0Bg.setSkin(skin);
-      document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
-      this.classList.add("active");
+      markActiveSkinButton(this);
     });
   });
 
@@ -128,9 +143,7 @@ document.addEventListener("DOMContentLoaded", function () {
       document.getElementById(id + "Val").textContent = defaults[id];
     });
     toggle.checked = true;
-    document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
-    var active = document.querySelector('#zer0SkinButtons [data-skin="{{ current_skin }}"]');
-    if (active) active.classList.add("active");
+    markActiveSkinButton(document.querySelector('#zer0SkinButtons [data-skin="{{ current_skin }}"]'));
   });
 });
 </script>

data/_includes/components/collection-manager.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   COLLECTION MANAGER — Jekyll collections overview
   ===================================================================
@@ -11,9 +11,9 @@
   Dependencies: Bootstrap 5 table/card/badge, site.collections
   Used by: pages/_about/settings/collections.md
   ===================================================================
--->
+{% endcomment %}
 
-<!-- Summary cards -->
+{% comment %} Summary cards {% endcomment %}
 <div class="row g-3 mb-4">
   <div class="col-6 col-lg-3">
     <div class="card text-center h-100 border-primary">
@@ -61,7 +61,7 @@
   </div>
 </div>
 
-<!-- Collections table -->
+{% comment %} Collections table {% endcomment %}
 <div class="table-responsive">
   <table class="table table-hover align-middle">
     <thead class="table-dark">
@@ -104,7 +104,7 @@
   </table>
 </div>
 
-<!-- Collection defaults from _config.yml -->
+{% comment %} Collection defaults from _config.yml {% endcomment %}
 <h5 class="mt-4 mb-3"><i class="bi bi-sliders me-1"></i> Collection Defaults</h5>
 <div class="accordion" id="collDefaultsAccordion">
   {% for collection in site.collections %}

data/_includes/components/component-showcase.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-071 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   COMPONENT SHOWCASE - Live Bootstrap 5 demo gallery
   ===================================================================
@@ -33,12 +33,12 @@
         showcase safe for remote-theme consumers who may lack /docs/, /posts/,
         /categories/, /tags/, or /docs/customization/.
   ===================================================================
--->
+{% endcomment %}
 {% assign sections = include.sections | default: "alerts,buttons,badges,cards,accordion,tabs,progress,breadcrumbs,table,tooltips,list-group" %}
 {% assign section_list = sections | split: "," %}
 
 {% if section_list contains "alerts" %}
-<!-- ===== ALERTS ===== -->
+{% comment %} ===== ALERTS ===== {% endcomment %}
 <h3 id="showcase-alerts">Alerts</h3>
 <p>Contextual feedback messages for user actions and system status:</p>
 <div class="row g-3 mb-4">
@@ -70,7 +70,7 @@
 {% endif %}
 
 {% if section_list contains "buttons" %}
-<!-- ===== BUTTONS ===== -->
+{% comment %} ===== BUTTONS ===== {% endcomment %}
 <h3 id="showcase-buttons">Buttons</h3>
 <p>A complete button system with contextual colors, outlines, and sizes:</p>
 <div class="mb-4">
@@ -102,7 +102,7 @@
 {% endif %}
 
 {% if section_list contains "badges" %}
-<!-- ===== BADGES ===== -->
+{% comment %} ===== BADGES ===== {% endcomment %}
 <h3 id="showcase-badges">Badges</h3>
 <p>Contextual labels, status indicators, and notification counters:</p>
 <div class="mb-4">
@@ -132,7 +132,7 @@
 {% endif %}
 
 {% if section_list contains "cards" %}
-<!-- ===== CARDS ===== -->
+{% comment %} ===== CARDS ===== {% endcomment %}
 <h3 id="showcase-cards">Cards</h3>
 <p>Responsive card layouts — the building block of post listings, feature displays, and documentation:</p>
 <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
@@ -191,7 +191,7 @@
 {% endif %}
 
 {% if section_list contains "accordion" %}
-<!-- ===== ACCORDION ===== -->
+{% comment %} ===== ACCORDION ===== {% endcomment %}
 <h3 id="showcase-accordion">Accordion</h3>
 <p>Collapsible content sections — ideal for FAQs and detailed documentation:</p>
 <div class="accordion mb-4" id="showcaseAccordion">
@@ -235,7 +235,7 @@
 {% endif %}
 
 {% if section_list contains "tabs" %}
-<!-- ===== TABS ===== -->
+{% comment %} ===== TABS ===== {% endcomment %}
 <h3 id="showcase-tabs">Tabs</h3>
 <p>Tabbed content panels for organizing related information:</p>
 <ul class="nav nav-tabs mb-0" id="showcaseTabs" role="tablist">
@@ -281,7 +281,7 @@ theme: jekyll-theme-zer0</code></pre>
 {% endif %}
 
 {% if section_list contains "progress" %}
-<!-- ===== PROGRESS BARS ===== -->
+{% comment %} ===== PROGRESS BARS ===== {% endcomment %}
 <h3 id="showcase-progress">Progress Bars</h3>
 <p>Visual indicators for build status, completion tracking, and loading states:</p>
 <div class="mb-4">
@@ -325,7 +325,7 @@ theme: jekyll-theme-zer0</code></pre>
 {% endif %}
 
 {% if section_list contains "breadcrumbs" %}
-<!-- ===== BREADCRUMBS ===== -->
+{% comment %} ===== BREADCRUMBS ===== {% endcomment %}
 <h3 id="showcase-breadcrumbs">Breadcrumbs</h3>
 <p>Hierarchical navigation trail showing current page position:</p>
 {% comment %} Existence-guard the demo breadcrumb links so they never 404 on
@@ -357,7 +357,7 @@ theme: jekyll-theme-zer0</code></pre>
 {% endif %}
 
 {% if section_list contains "table" %}
-<!-- ===== TABLE ===== -->
+{% comment %} ===== TABLE ===== {% endcomment %}
 <h3 id="showcase-table">Responsive Table</h3>
 <p>Styled tables with Bootstrap — all Markdown tables automatically receive Bootstrap styling:</p>
 <div class="table-responsive mb-4">
@@ -407,7 +407,7 @@ theme: jekyll-theme-zer0</code></pre>
 {% endif %}
 
 {% if section_list contains "tooltips" %}
-<!-- ===== TOOLTIPS ===== -->
+{% comment %} ===== TOOLTIPS ===== {% endcomment %}
 <h3 id="showcase-tooltips">Tooltips</h3>
 <p>Interactive hints and contextual information on hover:</p>
 <div class="d-flex flex-wrap gap-3 mb-4">
@@ -436,7 +436,7 @@ document.addEventListener('DOMContentLoaded', () => {
 {% endif %}
 
 {% if section_list contains "list-group" %}
-<!-- ===== LIST GROUP ===== -->
+{% comment %} ===== LIST GROUP ===== {% endcomment %}
 <h3 id="showcase-list-group">List Group</h3>
 <p>Organized content lists with icons, badges, and action states:</p>
 {% comment %} Existence-guard the demo list-group links (issue #219). Each target