jekyll-theme-zer0 1.29.0 → 1.30.0

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,7 +30,7 @@
   <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">
     <h2 class="offcanvas-title h5" id="zer0BgCustomizerLabel">
@@ -40,7 +40,7 @@
   </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

data/_includes/components/config-editor.html

@@ -1,4 +1,4 @@
-<!--
+{% comment %}
   ===================================================================
   CONFIG EDITOR — Form-based configuration builder
   ===================================================================
@@ -11,15 +11,15 @@
   Dependencies: Bootstrap 5.3, assets/js/config-utility.js
   Data source: site.* variables pre-populate fields
   ===================================================================
--->
+{% endcomment %}
 
 <div id="configEditor">
   <div class="row">
 
-    <!-- ── Left: Form ────────────────────────────────────────────────── -->
+    {% comment %} ── Left: Form ────────────────────────────────────────────────── {% endcomment %}
     <div class="col-lg-6 mb-4 mb-lg-0">
 
-      <!-- Site Identity -->
+      {% comment %} Site Identity {% endcomment %}
       <div class="card mb-3">
         <div class="card-header">
           <i class="bi bi-person-badge me-1"></i> Site Identity
@@ -53,7 +53,7 @@
         </div>
       </div>
 
-      <!-- GitHub -->
+      {% comment %} GitHub {% endcomment %}
       <div class="card mb-3">
         <div class="card-header">
           <i class="bi bi-github me-1"></i> GitHub
@@ -79,7 +79,7 @@
         </div>
       </div>
 
-      <!-- URLs & Deployment -->
+      {% comment %} URLs & Deployment {% endcomment %}
       <div class="card mb-3">
         <div class="card-header">
           <i class="bi bi-link-45deg me-1"></i> URLs &amp; Deployment
@@ -121,7 +121,7 @@
         </div>
       </div>
 
-      <!-- Personalization -->
+      {% comment %} Personalization {% endcomment %}
       <div class="card mb-3">
         <div class="card-header">
           <i class="bi bi-palette me-1"></i> Personalization
@@ -151,7 +151,7 @@
         </div>
       </div>
 
-      <!-- Analytics -->
+      {% comment %} Analytics {% endcomment %}
       <div class="card mb-3">
         <div class="card-header">
           <i class="bi bi-graph-up me-1"></i> Analytics
@@ -174,9 +174,9 @@
         </div>
       </div>
 
-    </div><!-- /col form -->
+    </div>{% comment %} /col form {% endcomment %}
 
-    <!-- ── Right: Live YAML Preview ──────────────────────────────────── -->
+    {% comment %} ── Right: Live YAML Preview ──────────────────────────────────── {% endcomment %}
     <div class="col-lg-6">
       <div class="sticky-top" style="top:80px">
         <div class="card">
@@ -201,7 +201,7 @@
           <strong>Tip:</strong> Changes are reflected instantly in the preview. Download the file and replace your project's <code>_config.yml</code>, then restart your dev server.
         </div>
       </div>
-    </div><!-- /col preview -->
+    </div>{% comment %} /col preview {% endcomment %}
 
-  </div><!-- /row -->
+  </div>{% comment %} /row {% endcomment %}
 </div>