jekyll-theme-zer0 1.28.0 → 1.30.0

data/_includes/stats/stats-categories.html

@@ -1,8 +1,8 @@
 {% comment %} Feature: ZER0-043 {% endcomment %}
-<!-- ================================================ -->
-<!-- CATEGORIES ANALYSIS SECTION                     -->
-<!-- Top categories with post counts                 -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} CATEGORIES ANALYSIS SECTION                     {% endcomment %}
+{% comment %} Top categories with post counts                 {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div id="categories" class="card shadow-sm h-100">
   <div class="card-header bg-primary-subtle">
     <div class="d-flex align-items-center justify-content-between">
@@ -18,7 +18,7 @@
   <div class="card-body p-0">
     {% if site.data.content_statistics.categories and site.data.content_statistics.categories.size > 0 %}
       
-      <!-- Categories List -->
+      {% comment %} Categories List {% endcomment %}
       <div class="list-group list-group-flush stats-taxonomy-list">
         {% for category in site.data.content_statistics.categories %}
           <div class="list-group-item d-flex justify-content-between align-items-center{% if forloop.index > 15 %} d-none stats-category-extra{% endif %}">
@@ -50,7 +50,7 @@
         {% endfor %}
       </div>
       
-      <!-- Show More Button if there are more categories -->
+      {% comment %} Show More Button if there are more categories {% endcomment %}
       {% if site.data.content_statistics.categories.size > 15 %}
         <div class="card-footer text-center">
           <button class="btn btn-outline-primary btn-sm"
@@ -67,7 +67,7 @@
       
     {% else %}
       
-      <!-- No Categories Available -->
+      {% comment %} No Categories Available {% endcomment %}
       <div class="text-center py-5">
         <i class="bi bi-folder-x display-4 text-muted mb-3"></i>
         <h5 class="text-muted">No categories found</h5>
@@ -77,7 +77,7 @@
     {% endif %}
   </div>
   
-  <!-- Categories Summary Footer -->
+  {% comment %} Categories Summary Footer {% endcomment %}
   {% if site.data.content_statistics.categories and site.data.content_statistics.categories.size > 0 %}
     <div class="card-footer">
       <div class="row text-center">

data/_includes/stats/stats-header.html

@@ -1,28 +1,28 @@
 {% comment %} Feature: ZER0-043 {% endcomment %}
-<!-- ================================================ -->
-<!-- STATS PAGE HEADER                               -->
-<!-- Title, description, and metadata display        -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} STATS PAGE HEADER                               {% endcomment %}
+{% comment %} Title, description, and metadata display        {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="row mb-5">
   <div class="col-12">
     <div class="text-center mb-4">
-      <!-- Header Icon with Bootstrap classes -->
+      {% comment %} Header Icon with Bootstrap classes {% endcomment %}
       <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle rounded-circle p-4 mb-4 shadow-lg stats-header-icon">
         <i class="bi bi-graph-up fs-1 text-primary stats-icon-rotate"></i>
       </div>
       
-      <!-- Title with Bootstrap typography -->
+      {% comment %} Title with Bootstrap typography {% endcomment %}
       <h1 class="display-3 mb-3 fw-bold text-primary">
         {{ page.title | default: "Site Statistics Portal" }}
       </h1>
       
-      <!-- Description with Bootstrap lead class -->
+      {% comment %} Description with Bootstrap lead class {% endcomment %}
       <p class="lead mb-4 fs-4">
         {{ page.description | default: "Comprehensive analytics and insights from the knowledge base" }}
       </p>
     </div>
     
-    <!-- Last updated reflects build-time stats (generated_at or site.time) -->
+    {% comment %} Last updated reflects build-time stats (generated_at or site.time) {% endcomment %}
     {% if site.data.content_statistics %}
       {% assign stats_last_updated = site.data.content_statistics.generated_at | default: site.time %}
       <div class="alert alert-info shadow-sm d-flex align-items-center justify-content-between" role="alert">
@@ -59,13 +59,13 @@
   </div>
 </div>
 
-<!-- ================================================ -->
-<!-- STATS NAVIGATION BREADCRUMBS                    -->
-<!-- Quick navigation within the stats page          -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} STATS NAVIGATION BREADCRUMBS                    {% endcomment %}
+{% comment %} Quick navigation within the stats page          {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="row mb-5">
   <div class="col-12">
-    <!-- Bootstrap breadcrumb -->
+    {% comment %} Bootstrap breadcrumb {% endcomment %}
     <nav aria-label="Statistics navigation">
       <ol class="breadcrumb p-3 rounded shadow-sm">
         <li class="breadcrumb-item">
@@ -79,7 +79,7 @@
       </ol>
     </nav>
     
-    <!-- Quick Jump Navigation using Bootstrap button group -->
+    {% comment %} Quick Jump Navigation using Bootstrap button group {% endcomment %}
     {% if site.data.content_statistics %}
       <div class="text-center">
         <div class="btn-group btn-group-lg shadow-sm d-flex flex-wrap gap-2" role="group" aria-label="Statistics navigation">

data/_includes/stats/stats-metrics.html

@@ -11,7 +11,7 @@
       <div class="card-body">
         <div class="row g-4">
           
-          <!-- Content Overview Column -->
+          {% comment %} Content Overview Column {% endcomment %}
           <div class="col-md-4">
             <div class="h-100 p-3 bg-body-secondary rounded">
               <h5 class="text-primary mb-3">
@@ -42,7 +42,7 @@
             </div>
           </div>
           
-          <!-- Top Performers Column -->
+          {% comment %} Top Performers Column {% endcomment %}
           <div class="col-md-4">
             <div class="h-100 p-3 bg-body-secondary rounded">
               <h5 class="text-success mb-3">
@@ -67,7 +67,7 @@
                 </div>
               {% endif %}
               
-              <!-- Content Distribution -->
+              {% comment %} Content Distribution {% endcomment %}
               <div class="mb-3">
                 <strong>Content Distribution:</strong><br>
                 {% if site.data.content_statistics.categories and site.data.content_statistics.categories.size > 0 %}
@@ -92,14 +92,14 @@
             </div>
           </div>
           
-          <!-- Data Health Column -->
+          {% comment %} Data Health Column {% endcomment %}
           <div class="col-md-4">
             <div class="h-100 p-3 bg-body-secondary rounded">
               <h5 class="text-warning-emphasis mb-3">
                 <i class="bi bi-heart-pulse me-2"></i> Data Health
               </h5>
               
-              <!-- Last Update Status -->
+              {% comment %} Last Update Status {% endcomment %}
               <div class="mb-3">
                 <strong>Last Updated:</strong><br>
                 {% if site.data.content_statistics.generated_at %}
@@ -111,7 +111,7 @@
                 {% endif %}
               </div>
               
-              <!-- Data Completeness -->
+              {% comment %} Data Completeness {% endcomment %}
               <div class="mb-3">
                 <strong>Data Completeness:</strong><br>
                 {% assign completeness_score = 0 %}
@@ -146,7 +146,7 @@
                 <small class="text-muted">Overall data quality</small>
               </div>
               
-              <!-- Refresh Instructions -->
+              {% comment %} Refresh Instructions {% endcomment %}
               {% unless site.data.content_statistics %}
                 <div class="alert alert-warning alert-sm p-2" role="alert">
                   <small>
@@ -161,7 +161,7 @@
         </div>
       </div>
       
-      <!-- Action Buttons Footer -->
+      {% comment %} Action Buttons Footer {% endcomment %}
       <div class="card-footer text-center">
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-outline-primary" onclick="window.print()">
@@ -179,17 +179,17 @@
   </div>
 </div>
 
-<!-- ================================================ -->
-<!-- HELP MODAL                                      -->
-<!-- Information about statistics and data sources   -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} HELP MODAL                                      {% endcomment %}
+{% comment %} Information about statistics and data sources   {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header bg-body border-bottom">
-        <h5 class="modal-title" id="helpModalLabel">
+        <h2 class="modal-title h5" id="helpModalLabel">
           <i class="bi bi-question-circle"></i> Statistics Help
-        </h5>
+        </h2>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">

data/_includes/stats/stats-no-data.html

@@ -1,11 +1,11 @@
-<!-- ================================================ -->
-<!-- NO DATA AVAILABLE SECTION                       -->
-<!-- Error state when statistics are not generated   -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} NO DATA AVAILABLE SECTION                       {% endcomment %}
+{% comment %} Error state when statistics are not generated   {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="row justify-content-center">
   <div class="col-lg-8">
     
-    <!-- Main Alert -->
+    {% comment %} Main Alert {% endcomment %}
     <div class="alert alert-warning shadow-sm" role="alert">
       <div class="text-center py-4">
         <i class="bi bi-exclamation-triangle display-1 text-warning-emphasis mb-4"></i>
@@ -16,7 +16,7 @@
       </div>
     </div>
     
-    <!-- Instructions Card -->
+    {% comment %} Instructions Card {% endcomment %}
     <div class="card shadow-sm mb-4">
       <div class="card-header bg-primary-subtle">
         <h4 class="mb-0 text-primary-emphasis">
@@ -56,7 +56,7 @@
       </div>
     </div>
     
-    <!-- Alternative Setup Information -->
+    {% comment %} Alternative Setup Information {% endcomment %}
     <div class="card shadow-sm mb-4">
       <div class="card-header bg-info-subtle">
         <h4 class="mb-0 text-info-emphasis">
@@ -90,7 +90,7 @@
       </div>
     </div>
     
-    <!-- Troubleshooting -->
+    {% comment %} Troubleshooting {% endcomment %}
     <div class="card shadow-sm">
       <div class="card-header bg-secondary-subtle">
         <h4 class="mb-0 text-secondary-emphasis">
@@ -136,10 +136,10 @@
   </div>
 </div>
 
-<!-- ================================================ -->
-<!-- NO DATA PAGE ACTIONS                            -->
-<!-- Additional helpful actions                      -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} NO DATA PAGE ACTIONS                            {% endcomment %}
+{% comment %} Additional helpful actions                      {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="row justify-content-center mt-4">
   <div class="col-lg-8">
     <div class="text-center">

data/_includes/stats/stats-overview.html

@@ -1,6 +1,6 @@
 {% comment %} Feature: ZER0-043 {% endcomment %}
 <div id="overview" class="mb-5">
-  <!-- Section Header -->
+  {% comment %} Section Header {% endcomment %}
   <div class="text-center mb-4">
     <h2 class="display-5 fw-bold text-primary mb-3">
       <i class="bi bi-speedometer2 me-2"></i>
@@ -11,10 +11,10 @@
     </p>
   </div>
 
-  <!-- Stats Cards Grid -->
+  {% comment %} Stats Cards Grid {% endcomment %}
   <div class="row g-4">
   
-  <!-- Total Posts Card -->
+  {% comment %} Total Posts Card {% endcomment %}
   <div class="col-lg-3 col-md-6">
     <div class="card h-100 shadow-sm stats-card">
       <div class="card-body text-center p-4">
@@ -33,7 +33,7 @@
     </div>
   </div>
 
-  <!-- Total Categories Card -->
+  {% comment %} Total Categories Card {% endcomment %}
   <div class="col-lg-3 col-md-6">
     <div class="card h-100 shadow-sm stats-card">
       <div class="card-body text-center p-4">
@@ -52,7 +52,7 @@
     </div>
   </div>
 
-  <!-- Total Tags Card -->
+  {% comment %} Total Tags Card {% endcomment %}
   <div class="col-lg-3 col-md-6">
     <div class="card h-100 shadow-sm stats-card">
       <div class="card-body text-center p-4">
@@ -71,7 +71,7 @@
     </div>
   </div>
 
-  <!-- Total Words Card -->
+  {% comment %} Total Words Card {% endcomment %}
   <div class="col-lg-3 col-md-6">
     <div class="card h-100 shadow-sm stats-card">
       <div class="card-body text-center p-4">

data/_includes/stats/stats-tags.html

@@ -1,8 +1,8 @@
 {% comment %} Feature: ZER0-043 {% endcomment %}
-<!-- ================================================ -->
-<!-- TAGS ANALYSIS SECTION                           -->
-<!-- Top tags with usage counts                      -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} TAGS ANALYSIS SECTION                           {% endcomment %}
+{% comment %} Top tags with usage counts                      {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div id="tags" class="card shadow-sm h-100">
   <div class="card-header bg-success-subtle">
     <div class="d-flex align-items-center justify-content-between">
@@ -18,7 +18,7 @@
   <div class="card-body p-0">
     {% if site.data.content_statistics.tags and site.data.content_statistics.tags.size > 0 %}
       
-      <!-- Tags List -->
+      {% comment %} Tags List {% endcomment %}
       <div class="list-group list-group-flush stats-taxonomy-list">
         {% for tag in site.data.content_statistics.tags %}
           <div class="list-group-item d-flex justify-content-between align-items-center{% if forloop.index > 15 %} d-none stats-tag-extra{% endif %}">
@@ -66,7 +66,7 @@
         {% endunless %}
       {% endif %}
       
-      <!-- Tag Cloud Section -->
+      {% comment %} Tag Cloud Section {% endcomment %}
       <div class="card-footer">
         <h6 class="mb-3 fw-bold">
           <i class="bi bi-cloud"></i> Tag Cloud
@@ -100,7 +100,7 @@
       
     {% else %}
       
-      <!-- No Tags Available -->
+      {% comment %} No Tags Available {% endcomment %}
       <div class="text-center py-5">
         <i class="bi bi-tags-fill display-4 text-muted mb-3"></i>
         <h5 class="text-muted">No tags found</h5>
@@ -110,7 +110,7 @@
     {% endif %}
   </div>
   
-  <!-- Tags Summary Footer -->
+  {% comment %} Tags Summary Footer {% endcomment %}
   {% if site.data.content_statistics.tags and site.data.content_statistics.tags.size > 0 %}
     <div class="card-footer">
       <div class="row text-center">

data/_layouts/404.html

@@ -2,7 +2,7 @@
 # Feature: ZER0-047
 layout: root
 ---
-<!--
+{% comment %}
   ===================================================================
   404 LAYOUT - Not-found page with unconfigured-site setup mode
   ===================================================================
@@ -30,14 +30,14 @@ layout: root
   Extra content: anything in the stub page's body renders below the
   standard 404 content ({{ content }} at the bottom).
   ===================================================================
--->
+{% endcomment %}
 
 {% include components/setup-check.html %}
 
 {% if site_needs_setup %}
-<!-- ================================================================== -->
-<!-- SETUP MODE: Site is not yet configured — guide the user            -->
-<!-- ================================================================== -->
+{% comment %} ================================================================== {% endcomment %}
+{% comment %} SETUP MODE: Site is not yet configured — guide the user            {% endcomment %}
+{% comment %} ================================================================== {% endcomment %}
 <div class="container-lg py-5">
   <div class="text-center mb-5">
     <i class="bi bi-gear-wide-connected display-1 text-primary"></i>
@@ -48,7 +48,7 @@ layout: root
     </p>
   </div>
 
-  <!-- Quick-detect: user site vs project site -->
+  {% comment %} Quick-detect: user site vs project site {% endcomment %}
   <div class="row justify-content-center mb-4">
     <div class="col-lg-8">
       <div class="alert alert-info d-flex align-items-start" role="alert">
@@ -69,7 +69,7 @@ layout: root
     </div>
   </div>
 
-  <!-- Step-by-step setup instructions -->
+  {% comment %} Step-by-step setup instructions {% endcomment %}
   <div class="row justify-content-center">
     <div class="col-lg-8">
 
@@ -170,7 +170,7 @@ git push origin main</code></pre>
         </div>
       </div>
 
-      <!-- Resources -->
+      {% comment %} Resources {% endcomment %}
       <div class="text-center mt-4">
         <a href="https://github.com/bamr87/zer0-mistakes" class="btn btn-dark me-2" target="_blank" rel="noopener">
           <i class="bi bi-github me-1"></i> Theme Repository
@@ -188,9 +188,9 @@ git push origin main</code></pre>
 </div>
 
 {% else %}
-<!-- ================================================================== -->
-<!-- NORMAL 404: Site is configured — show standard error page          -->
-<!-- ================================================================== -->
+{% comment %} ================================================================== {% endcomment %}
+{% comment %} NORMAL 404: Site is configured — show standard error page          {% endcomment %}
+{% comment %} ================================================================== {% endcomment %}
 <div class="container text-center mt-5">
   <h1 class="display-1 text-danger">404</h1>
 
@@ -227,33 +227,47 @@ git push origin main</code></pre>
   </div>
 
   <a class="btn btn-danger mt-4" href="{{ '/' | relative_url }}">Return to Homepage</a>
-  {% if site.github_user and site.repository_name %}
+  {%- comment -%}
+    Report the dead URL through the page-feedback widget rather than through a
+    third hand-rolled issue-URL builder. This page used to encode its own
+    title and body — a two-line report with no page context, no environment,
+    and no captured errors — which is exactly the report a maintainer cannot
+    act on. Pre-typed `fix-page`; the missing URL rides in as `extra`, and the
+    widget attaches the rest (UPS-FB-09).
+
+    Still a real link, so it works with the widget disabled or JavaScript off:
+    page-feedback.js intercepts [data-pf-open] only when it is running.
+  {%- endcomment -%}
+  {% assign _404_repo = site.repository | default: site.github_user | append: '/' | append: site.repository_name %}
+  {% if site.page_feedback.enabled and _404_repo != '/' %}
   <div class="mt-3">
-    {% capture _issue_title %}404 Error{% endcapture %}
-    {% capture _issue_body %}I encountered a 404 error on this site. Please investigate.{% endcapture %}
     <a id="github-issue-link"
        class="btn btn-secondary"
-       href="https://github.com/{{ site.github_user }}/{{ site.repository_name }}/issues/new?title={{ _issue_title | uri_escape }}&body={{ _issue_body | uri_escape }}"
+       href="https://github.com/{{ _404_repo }}/issues/new?template=page_improvement.yml&labels=page-feedback"
+       data-pf-open
+       data-pf-type="fix-page"
        target="_blank"
        rel="noopener noreferrer">
-      Submit an Issue on GitHub
+      Report this broken link
     </a>
   </div>
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      var githubIssueLink = document.getElementById('github-issue-link');
-      if (!githubIssueLink) return;
-      var currentUrl = window.location.href;
-      var repoSlug = '{{ site.github_user }}/{{ site.repository_name }}';
-      githubIssueLink.href = 'https://github.com/' + repoSlug + '/issues/new?title=' + encodeURIComponent('404 Error on ' + currentUrl) + '&body=' + encodeURIComponent('I encountered a 404 error on the following page: ' + currentUrl + '. Please investigate.');
-    });
+    // The widget cannot know which URL 404'd — this page can. Hand it over as
+    // the pre-filled description the moment the reader opens the dialog.
+    document.addEventListener('click', function (event) {
+      var trigger = event.target.closest && event.target.closest('#github-issue-link');
+      if (!trigger || !window.zer0PageFeedback) return;
+      var missing = window.location.href;
+      trigger.setAttribute('data-pf-description',
+        'This URL returned 404: ' + missing + (document.referrer ? '\nLinked from: ' + document.referrer : ''));
+    }, true);
   </script>
   {% endif %}
 </div>
 {% endif %}
 
 {% if content != blank %}
-<!-- Extra content from the consumer's 404 stub body -->
+{% comment %} Extra content from the consumer's 404 stub body {% endcomment %}
 <div class="container mt-4">
   {{ content }}
 </div>

data/_layouts/README.md

@@ -18,6 +18,8 @@ root.html (base template)
 ├── landing.html (landing pages)
 ├── book.html (book landing page - cover hero + table of contents)
 ├── book-story.html (immersive picture-book story pages)
+├── cookbook.html (cookbook landing page - cover + recipe index by course)
+├── recipe.html (one recipe - fact bar, scaler, ingredients, method, ratio)
 ├── stats.html (statistics dashboard)
 └── index.html (search pages)
 ```

data/_layouts/admin.html

@@ -2,7 +2,7 @@
 # Features: ZER0-019, ZER0-050
 layout: root
 ---
-<!--
+{% comment %}
   ===================================================================
   ADMIN LAYOUT - Administrative and configuration page layout
   ===================================================================
@@ -36,7 +36,7 @@ layout: root
   - Bootstrap 5 grid, offcanvas, nav components
   - Bootstrap Icons
   ===================================================================
--->
+{% endcomment %}
 
 {% comment %} ════════════════════════════════════════════════════════ {% endcomment %}
 {% comment %} ADMIN NAV DATA                                          {% endcomment %}
@@ -46,13 +46,13 @@ layout: root
 
 {% assign show_sidebar = page.admin_nav | default: true %}
 
-<!-- ================================================ -->
-<!-- ADMIN PAGE HEADER                                -->
-<!-- Breadcrumbs + title bar (no author/read-time)    -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} ADMIN PAGE HEADER                                {% endcomment %}
+{% comment %} Breadcrumbs + title bar (no author/read-time)    {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="bg-body-tertiary border-bottom">
   <div class="container-xxl py-3">
-    <!-- Breadcrumbs -->
+    {% comment %} Breadcrumbs {% endcomment %}
     <nav aria-label="breadcrumb">
       <ol class="breadcrumb mb-2 small">
         <li class="breadcrumb-item"><a href="{{ '/' | relative_url }}"><i class="bi bi-house-door"></i> Home</a></li>
@@ -61,9 +61,9 @@ layout: root
       </ol>
     </nav>
 
-    <!-- Title row -->
+    {% comment %} Title row {% endcomment %}
     <div class="d-flex align-items-center">
-      <!-- Mobile sidebar toggle -->
+      {% comment %} Mobile sidebar toggle {% endcomment %}
       {% if show_sidebar %}
       <button class="btn btn-outline-secondary me-3 d-lg-none"
               type="button"
@@ -90,7 +90,7 @@ layout: root
         {% endif %}
       </div>
 
-      <!-- Page-level action buttons (from front matter admin_actions) -->
+      {% comment %} Page-level action buttons (from front matter admin_actions) {% endcomment %}
       {% if page.admin_actions %}
       <div class="d-none d-md-flex gap-2 ms-3">
         {% for action in page.admin_actions %}
@@ -106,20 +106,20 @@ layout: root
   </div>
 </div>
 
-<!-- ================================================ -->
-<!-- MAIN LAYOUT: SIDEBAR + CONTENT                   -->
-<!-- ================================================ -->
+{% comment %} ================================================ {% endcomment %}
+{% comment %} MAIN LAYOUT: SIDEBAR + CONTENT                   {% endcomment %}
+{% comment %} ================================================ {% endcomment %}
 <div class="container-xxl py-4">
   <div class="row">
 
     {% if show_sidebar %}
-    <!-- ════════════════════════════════ -->
-    <!-- ADMIN SIDEBAR                   -->
-    <!-- Desktop: sticky column           -->
-    <!-- Mobile: offcanvas                -->
-    <!-- ════════════════════════════════ -->
+    {% comment %} ════════════════════════════════ {% endcomment %}
+    {% comment %} ADMIN SIDEBAR                   {% endcomment %}
+    {% comment %} Desktop: sticky column           {% endcomment %}
+    {% comment %} Mobile: offcanvas                {% endcomment %}
+    {% comment %} ════════════════════════════════ {% endcomment %}
 
-    <!-- Desktop sidebar (lg+) -->
+    {% comment %} Desktop sidebar (lg+) {% endcomment %}
     <div class="col-lg-3 d-none d-lg-block">
       <div class="position-sticky" style="top: 5rem;">
         <nav class="admin-sidebar" aria-label="Admin navigation">
@@ -131,13 +131,13 @@ layout: root
       </div>
     </div>
 
-    <!-- Mobile offcanvas sidebar -->
+    {% comment %} Mobile offcanvas sidebar {% endcomment %}
     <div class="offcanvas offcanvas-start d-lg-none" tabindex="-1"
          id="adminSidebar" aria-labelledby="adminSidebarLabel">
       <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="adminSidebarLabel">
+        <h2 class="offcanvas-title h5" id="adminSidebarLabel">
           <i class="bi bi-sliders me-1"></i> Administration
-        </h5>
+        </h2>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
       <div class="offcanvas-body">
@@ -145,7 +145,7 @@ layout: root
       </div>
     </div>
 
-    <!-- Main content area (with sidebar) -->
+    {% comment %} Main content area (with sidebar) {% endcomment %}
     <div class="col-lg-9">
       <div id="admin-content">
         {{ content }}
@@ -154,7 +154,7 @@ layout: root
 
     {% else %}
 
-    <!-- Full-width content (no sidebar) -->
+    {% comment %} Full-width content (no sidebar) {% endcomment %}
     <div class="col-12">
       <div id="admin-content">
         {{ content }}