jekyll-theme-zer0 1.29.0 → 1.31.0

data/_layouts/recipe.html

@@ -31,9 +31,9 @@ layout: default
 
 <article class="recipe" data-recipe data-recipe-id="{{ _rl_id }}">
 
-  <!-- ================================ -->
-  <!-- HEADER                           -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} HEADER                           {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <header class="recipe-header">
     {%- if _rl_cookbook or _rl_course_meta -%}
     <p class="recipe-eyebrow">
@@ -73,9 +73,9 @@ layout: default
     {%- endif -%}
   </header>
 
-  <!-- ================================ -->
-  <!-- HEADNOTE (the markdown body)     -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} HEADNOTE (the markdown body)     {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- assign _rl_body = content | strip -%}
   {%- if _rl_body != "" -%}
   <div class="recipe-headnote">
@@ -83,9 +83,9 @@ layout: default
   </div>
   {%- endif -%}
 
-  <!-- ================================ -->
-  <!-- FACT BAR + SCALER                -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} FACT BAR + SCALER                {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- include components/recipe-meta.html -%}
 
   {%- if _rl_show_scaler -%}
@@ -98,9 +98,9 @@ layout: default
   </noscript>
   {%- endif -%}
 
-  <!-- ================================ -->
-  <!-- INGREDIENTS + METHOD             -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} INGREDIENTS + METHOD             {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <div class="row g-4 g-lg-5 recipe-body">
     <div class="col-lg-5">
       {%- include components/recipe-ingredients.html id_prefix=_rl_id -%}
@@ -124,14 +124,14 @@ layout: default
     </div>
   </div>
 
-  <!-- ================================ -->
-  <!-- RATIO / FORMULA                  -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} RATIO / FORMULA                  {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- include components/recipe-ratio.html -%}
 
-  <!-- ================================ -->
-  <!-- NOTES                            -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} NOTES                            {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- if page.notes and page.notes.size > 0 -%}
   <section class="recipe-notes">
     <h2 class="recipe-section-heading">
@@ -145,14 +145,14 @@ layout: default
   </section>
   {%- endif -%}
 
-  <!-- ================================ -->
-  <!-- NUTRITION                        -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} NUTRITION                        {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- include components/recipe-nutrition.html -%}
 
-  <!-- ================================ -->
-  <!-- COMMENTS                         -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} COMMENTS                         {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- if page.comments and site.giscus.enabled -%}
   <section class="post-comments mt-5 pt-4 border-top" id="comments">
     <h2 class="h4 mb-4"><i class="bi bi-chat-dots me-2" aria-hidden="true"></i>Comments</h2>

data/_layouts/root.html

@@ -1,7 +1,7 @@
 ---
 # Features: ZER0-001, ZER0-019, ZER0-031, ZER0-060
 ---
-<!--
+{% comment %}
   ===================================================================
   ROOT LAYOUT - Base template for the Zer0 Mistakes Jekyll Theme
   ===================================================================
@@ -29,7 +29,7 @@
   Author: Amr Abdel-Motaleb
   Copyright: 2024 - it-journey.com | @bamr87
   ===================================================================
--->
+{% endcomment %}
 
 <!doctype html>
 {%- comment -%}
@@ -48,7 +48,20 @@
 {%- endif -%}
 <html lang="{{ page.lang | default: site.locale | slice: 0, 2 | default: 'en' }}" class="no-js" data-bs-theme="{{ _bs_theme }}" data-color-mode-default="{{ _cm }}" data-color-mode-lock="{{ site.color_mode_lock | default: false }}" data-theme-skin="{{ site.theme_skin | default: 'air' }}" data-zer0-bg="{{ site.theme_background.enabled | default: true }}">
     <head>
-        <!-- Progressive-enhancement hook: upgrade <html class="no-js"> to "js".
+        {%- comment -%} Character encoding MUST be the first thing in <head>: the HTML spec
+             only looks for it in the first 1024 bytes of the document, and
+             everything below (the no-js note, core/head.html's own banner,
+             Google Tag Manager, console-capture, page-views, mermaid, nanobar)
+             pushed it to byte ~4415 (issue #372). Past the limit the browser
+             stops looking and falls back to its locale default, mis-decoding
+             every non-ASCII byte until it re-parses — and this theme ships
+             UTF-8 throughout (fr/** translations, em-dashes, curly quotes).
+             It sits here rather than in core/head.html because that include is
+             not, and cannot be, the first thing in <head>.
+             Keep it first. Nothing may be emitted above it. {%- endcomment -%}
+        <meta charset="utf-8">
+
+        {% comment %} Progressive-enhancement hook: upgrade <html class="no-js"> to "js".
              MUST be the first child of <head>, inline, and neither `defer` nor
              `async` — it has to run before the first stylesheet is fetched or
              `html.js` rules would flash. It cannot live in core/head.html:
@@ -56,65 +69,70 @@
              "first in that include" is not "first in <head>".
              classList.replace() is a no-op when `no-js` is absent, so this is
              safe unconditionally. The served HTML keeps `no-js` on <html> so
-             the JS-disabled branch stays correct. -->
+             the JS-disabled branch stays correct. {% endcomment %}
         <script>document.documentElement.classList.replace("no-js", "js");</script>
 
-        <!-- =============================================== -->
-        <!-- HEAD SECTION: Meta tags, styles, and SEO setup -->
-        <!-- =============================================== -->
+        {% comment %} =============================================== {% endcomment %}
+        {% comment %} HEAD SECTION: Meta tags, styles, and SEO setup {% endcomment %}
+        {% comment %} =============================================== {% endcomment %}
 
-        <!-- Core site metadata, stylesheets, and external dependencies -->
+        {% comment %} Core site metadata, stylesheets, and external dependencies {% endcomment %}
         {% include core/head.html %}
 
-        <!-- Jekyll SEO plugin for enhanced search engine optimization -->
-        <!-- Documentation: https://github.com/jekyll/jekyll-seo-tag -->
+        {% comment %} Jekyll SEO plugin for enhanced search engine optimization {% endcomment %}
+        {% comment %} Documentation: https://github.com/jekyll/jekyll-seo-tag {% endcomment %}
         {% seo %}
 
-        <!-- fffuel-style SVG background config overrides -->
+        {% comment %} fffuel-style SVG background config overrides {% endcomment %}
         {% include components/svg-background.html zone="body" %}
     </head>
     
-    <body class="zer0-bg-body" data-bs-spy="scroll" data-bs-target="#TableOfContents">
-        <!-- ============================================== -->
-        <!-- BODY SECTION: Site structure and content area -->
-        <!-- ============================================== -->
-
-        <!-- Consumer hook: first thing inside <body> (e.g. GTM noscript).
-             Empty stub shipped by the theme; shadow _includes/custom/body-start.html to use. -->
+    {% comment %} No `data-bs-spy` here: the theme's own scroll spy
+         (assets/js/modules/navigation/scroll-spy.js) owns TOC highlighting.
+         Bootstrap's native ScrollSpy competed with it for the `.active` class
+         on `#TableOfContents a` (making the bolding jump), and also stripped
+         server-rendered `.active` classes off sidebar nav links. {% endcomment %}
+    <body class="zer0-bg-body">
+        {% comment %} ============================================== {% endcomment %}
+        {% comment %} BODY SECTION: Site structure and content area {% endcomment %}
+        {% comment %} ============================================== {% endcomment %}
+
+        {% comment %} Consumer hook: first thing inside <body> (e.g. GTM noscript).
+             Empty stub shipped by the theme; shadow _includes/custom/body-start.html to use. {% endcomment %}
         {% include custom/body-start.html %}
 
-        <!-- Inline SVG symbols for consistent iconography throughout the site -->
-        <!-- Page-invariant: cached once per build via jekyll-include-cache. -->
+        {% comment %} Inline SVG symbols for consistent iconography throughout the site {% endcomment %}
+        {% comment %} Page-invariant: cached once per build via jekyll-include-cache. {% endcomment %}
         {% include_cached components/svg.html %}
 
-        <!-- Google Tag Manager body code for analytics (if configured) -->
-        <!-- Note: Currently commented out - uncomment when GTM is needed -->
+        {% comment %} Google Tag Manager body code for analytics (if configured) {% endcomment %}
+        {% comment %} Note: Currently commented out - uncomment when GTM is needed {% endcomment %}
 
-        <!-- Main site header with navigation, branding, and search functionality -->
+        {% comment %} Main site header with navigation, branding, and search functionality {% endcomment %}
         {% include core/header.html %}
 
-        <!-- Optional unified mobile drawer (Browse / Menu / Settings tabs).
-             Enable with `navigation.unified_mobile_drawer: true` in _config.yml. -->
+        {% comment %} Optional unified mobile drawer (Browse / Menu / Settings tabs).
+             Enable with `navigation.unified_mobile_drawer: true` in _config.yml. {% endcomment %}
         {% include navigation/unified-drawer.html %}
 
-        <!-- Search modal (site-wide) — cached once per build PER LANGUAGE
+        {% comment %} Search modal (site-wide) — cached once per build PER LANGUAGE
              (the lang param keys the include-cache entry; page.lang is nil
-             on English pages, so they all still share a single render). -->
+             on English pages, so they all still share a single render). {% endcomment %}
         {% include_cached components/search-modal.html lang=page.lang %}
 
-        <!-- Keyboard shortcuts help modal (triggered by `?`) — cached per language. -->
+        {% comment %} Keyboard shortcuts help modal (triggered by `?`) — cached per language. {% endcomment %}
         {% include_cached components/shortcuts-modal.html lang=page.lang %}
 
-        <!-- Settings offcanvas (Appearance / Site / Developer tabs) -->
+        {% comment %} Settings offcanvas (Appearance / Site / Developer tabs) {% endcomment %}
         {% include components/info-section.html %}
 
-        <!-- Setup banner for unconfigured sites — page-invariant. -->
+        {% comment %} Setup banner for unconfigured sites — page-invariant. {% endcomment %}
         {% include_cached components/setup-banner.html %}
 
-        <!-- ======================== -->
-        <!-- MAIN CONTENT AREA        -->
-        <!-- ======================== -->
-        <!-- Skip-link target: keep a single, consistent #main-content anchor site-wide.
+        {% comment %} ======================== {% endcomment %}
+        {% comment %} MAIN CONTENT AREA        {% endcomment %}
+        {% comment %} ======================== {% endcomment %}
+        {% comment %} Skip-link target: keep a single, consistent #main-content anchor site-wide.
              This is the ONE <main> landmark per page — child layouts (default/section/
              news) must use non-landmark wrappers (<div>) inside it (issue #299) — so
              assistive tech, search engines, and AI content extractors can isolate the
@@ -126,60 +144,82 @@
              the next Tab returns the user to the header nav they just skipped
              (WCAG 2.4.1 Bypass Blocks). -1 keeps it out of the sequential Tab order
              while allowing programmatic focus. The focus ring it would otherwise
-             paint is suppressed in _sass/utilities/_focus.scss. -->
+             paint is suppressed in _sass/utilities/_focus.scss. {% endcomment %}
         <main id="main-content" tabindex="-1">
-            <!-- Machine-translation disclosure — renders only on generated
-                 translations (page.machine_translated); no-op elsewhere. -->
+            {% comment %} Machine-translation disclosure — renders only on generated
+                 translations (page.machine_translated); no-op elsewhere. {% endcomment %}
             {%- include components/translation-notice.html -%}
             {{ content }}
         </main>
 
-        <!-- ======================== -->
-        <!-- FOOTER AND SCRIPTS       -->
-        <!-- ======================== -->
+        {% comment %} ======================== {% endcomment %}
+        {% comment %} FOOTER AND SCRIPTS       {% endcomment %}
+        {% comment %} ======================== {% endcomment %}
         
-        <!-- Site footer with links, copyright, and additional navigation.
+        {% comment %} Site footer with links, copyright, and additional navigation.
              Page-invariant chrome is cached once per build; the page-dependent
              FAB/local-graph tail renders fresh per page (see core/footer-fabs.html).
              Build-time values inside (e.g. the copyright year from site.time) stay
              fresh: jekyll-include-cache stores in memory only (Jekyll 3.x has no
              Jekyll::Cache) and clears on every build's :pre_render hook — it never
-             persists to .jekyll-cache. -->
+             persists to .jekyll-cache. {% endcomment %}
         {%- include_cached core/footer.html lang=page.lang -%}
         {%- include core/footer-fabs.html -%}
 
-        <!-- Consumer hook: after the theme footer, before the consent banner.
+        {% comment %} Consumer hook: after the theme footer, before the consent banner.
              Empty stub shipped by the theme; shadow _includes/custom/footer.html to use.
              Deliberately OUTSIDE the cached footer include so page-dependent
-             consumer markup renders per page. -->
+             consumer markup renders per page. {% endcomment %}
         {%- include custom/footer.html -%}
 
-        <!-- Privacy-compliant cookie consent banner — page-invariant. -->
+        {% comment %} Privacy-compliant cookie consent banner — page-invariant. {% endcomment %}
         {%- include_cached components/cookie-consent.html -%}
 
-        <!-- AI Chat Assistant -->
+        {% comment %} AI Chat Assistant {% endcomment %}
         {%- include components/ai-chat.html -%}
 
-        <!-- Page-feedback capture widget ("Improve this page" → GitHub issue) -->
+        {% comment %} Page-feedback capture widget ("Improve this page" → GitHub issue) {% endcomment %}
         {%- include components/page-feedback.html -%}
 
-        <!-- JavaScript dependencies and custom scripts -->
+        {% comment %} JavaScript dependencies and custom scripts {% endcomment %}
         <div>
-            <!-- Search functionality -->
-            <!-- Note: Currently commented out - uncomment when search is implemented -->
+            {% comment %} Search functionality {% endcomment %}
+            {% comment %} Note: Currently commented out - uncomment when search is implemented {% endcomment %}
 
-            <!-- External JavaScript libraries and custom scripts — page-invariant.
+            {% comment %} External JavaScript libraries and custom scripts — page-invariant.
                  The "?v=" cache-buster (site.time) in js-cdn.html stays correct:
                  the include cache is in-memory and reset every build (see footer
-                 note above), so v= advances on each build, never frozen across deploys. -->
+                 note above), so v= advances on each build, never frozen across deploys. {% endcomment %}
             {% include_cached components/js-cdn.html %}
         </div>
 
-        <!-- Analytics Integration -->
+        {% comment %} Per-page scripts from frontmatter (#412):
+
+               ---
+               scripts:
+                 - /assets/js/notes-clipper.js
+               ---
+
+             The counterpart of `styles:` in _includes/core/head.html, loaded here
+             so a page script runs AFTER the theme's own bundle (js-cdn.html) and
+             can rely on the contracts it publishes — `zer0:code-block-ready`, for
+             one. Deferred, so it never blocks the parse. A single string is
+             accepted as well as a list; site-relative paths go through
+             relative_url, absolute URLs pass through untouched.
+
+             Emits NOTHING when the key is absent, so a page without `scripts:`
+             is byte-identical to its previous build — hence the `-%}` on both
+             the comment and the `endif`. {% endcomment -%}
+        {% if page.scripts %}{% assign page_scripts = page.scripts %}{% if page_scripts.first == nil %}{% assign page_scripts = page_scripts | split: "||" %}{% endif %}{% for script_src in page_scripts %}
+        <script defer src="{% if script_src contains '//' %}{{ script_src }}{% else %}{{ script_src | relative_url }}{% endif %}"></script>
+        {%- endfor %}
+        {% endif -%}
+
+        {% comment %} Analytics Integration {% endcomment %}
         {%- include analytics/posthog.html -%}
 
-        <!-- Consumer hook: last thing before </body> (site scripts, widgets).
-             Empty stub shipped by the theme; shadow _includes/custom/body-end.html to use. -->
+        {% comment %} Consumer hook: last thing before </body> (site scripts, widgets).
+             Empty stub shipped by the theme; shadow _includes/custom/body-end.html to use. {% endcomment %}
         {%- include custom/body-end.html -%}
     </body>
 </html>

data/_layouts/section.html

@@ -2,7 +2,7 @@
 # Features: ZER0-019, ZER0-063
 layout: root
 ---
-<!--
+{% comment %}
   ===================================================================
   SECTION LAYOUT - News Section with Collapsible Sub-Category Sidebar
   ===================================================================
@@ -40,7 +40,7 @@ layout: root
   - Bootstrap 5 grid, card, and offcanvas components
   - Bootstrap Icons
   ===================================================================
--->
+{% endcomment %}
 
 {% comment %} ================================ {% endcomment %}
 {% comment %} SECTION DISCOVERY LOGIC         {% endcomment %}
@@ -112,9 +112,9 @@ layout: root
 {% endfor %}
 {% assign sub_categories = sub_categories | sort %}
 
-<!-- ================================ -->
-<!-- SECTION HEADER                   -->
-<!-- ================================ -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} SECTION HEADER                   {% endcomment %}
+{% comment %} ================================ {% endcomment %}
 <div class="container-fluid bg-dark text-white py-3 mb-0">
   <div class="container-fluid px-4">
     <div class="row align-items-center">
@@ -147,7 +147,7 @@ layout: root
   </div>
 </div>
 
-<!-- Sub-navigation for other sections -->
+{% comment %} Sub-navigation for other sections {% endcomment %}
 <div class="container-fluid bg-body-tertiary border-bottom py-2 mb-4">
   <div class="container-fluid px-4">
     <nav class="nav nav-pills flex-nowrap overflow-auto" style="scrollbar-width: none;">
@@ -175,9 +175,9 @@ layout: root
 <div class="container-fluid px-4">
   <div class="row g-lg-4 section-layout">
     
-    <!-- ================================ -->
-    <!-- FIXED SIDEBAR COMPONENT          -->
-    <!-- ================================ -->
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} FIXED SIDEBAR COMPONENT          {% endcomment %}
+    {% comment %} ================================ {% endcomment %}
     <div class="col-lg-3 col-xl-2 section-layout-sidebar">
       {% include navigation/section-sidebar.html 
          section_posts=section_posts 
@@ -188,14 +188,14 @@ layout: root
       %}
     </div>
 
-    <!-- ================================ -->
-    <!-- MAIN CONTENT AREA                -->
-    <!-- ================================ -->
-    <!-- Not a <main>: root.html already provides the single <main id="main-content">
-         landmark; a nested <main> here would duplicate it (issue #299). -->
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} MAIN CONTENT AREA                {% endcomment %}
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} Not a <main>: root.html already provides the single <main id="main-content">
+         landmark; a nested <main> here would duplicate it (issue #299). {% endcomment %}
     <div class="col-lg-9 col-xl-10 section-layout-main">
       
-      <!-- Section Header -->
+      {% comment %} Section Header {% endcomment %}
       <header class="section-header mb-4">
         <div class="d-flex align-items-center mb-3">
           {% if page.icon %}
@@ -223,7 +223,7 @@ layout: root
       {% comment %} ================================ {% endcomment %}
       {% if section_style == "magazine" %}
 
-        <!-- Hero Section -->
+        {% comment %} Hero Section {% endcomment %}
         {% assign featured_in_section = section_posts | where: "featured", true | first %}
         {% unless featured_in_section %}
           {% assign featured_in_section = section_posts | first %}
@@ -274,7 +274,7 @@ layout: root
           </div>
         </section>
 
-        <!-- Sub-Category Sections -->
+        {% comment %} Sub-Category Sections {% endcomment %}
         {% for subcat in sub_categories limit: 5 %}
           {% assign subcat_posts = section_posts | where_exp: "post", "post.tags contains subcat" %}
           {% assign subcat_posts_filtered = "" | split: "" %}
@@ -340,7 +340,7 @@ layout: root
           {% endif %}
         {% endfor %}
 
-        <!-- All Posts Section -->
+        {% comment %} All Posts Section {% endcomment %}
         <section id="all-posts" class="all-posts-section mb-5 scroll-mt-5">
           <div class="d-flex justify-content-between align-items-center mb-4">
             <h3 class="h4 mb-0">
@@ -404,7 +404,7 @@ layout: root
       {% comment %} ================================ {% endcomment %}
       {% elsif section_style == "grid" %}
 
-        <!-- Topic Filter Pills -->
+        {% comment %} Topic Filter Pills {% endcomment %}
         <div class="topic-filters mb-4">
           <div class="d-flex flex-wrap gap-2 align-items-center">
             <span class="text-muted me-2">Filter:</span>
@@ -540,7 +540,7 @@ layout: root
       {% endif %}
 
       {% else %}
-        <!-- Empty state -->
+        {% comment %} Empty state {% endcomment %}
         <div class="text-center py-5">
           <i class="bi bi-inbox fs-1 text-muted"></i>
           <p class="text-muted mt-3">No articles in this section yet.</p>
@@ -550,9 +550,9 @@ layout: root
         </div>
       {% endif %}
 
-      <!-- ========================== -->
-      <!-- RELATED SECTIONS           -->
-      <!-- ========================== -->
+      {% comment %} ========================== {% endcomment %}
+      {% comment %} RELATED SECTIONS           {% endcomment %}
+      {% comment %} ========================== {% endcomment %}
       <aside class="related-sections mt-5 pt-4 border-top">
         <h3 class="h5 mb-3">
           <i class="bi bi-compass me-2"></i>Explore Other Sections

data/_layouts/setup.html

@@ -2,7 +2,7 @@
 # Features: ZER0-019, ZER0-067
 layout: root
 ---
-<!--
+{% comment %}
   ===================================================================
   SETUP LAYOUT - Onboarding and configuration pages
   ===================================================================
@@ -24,7 +24,7 @@ layout: root
     setup_step: 2        # optional, highlights step in progress bar
     setup_total: 4       # optional, total number of steps
   ===================================================================
--->
+{% endcomment %}
 
 {% include components/setup-check.html %}
 
@@ -45,7 +45,7 @@ layout: root
       {% endif %}
 
       {% if page.setup_step and page.setup_total %}
-      <!-- Progress indicator -->
+      {% comment %} Progress indicator {% endcomment %}
       <div class="mb-4">
         <div class="d-flex justify-content-between small text-body-secondary mb-1">
           <span>Step {{ page.setup_step }} of {{ page.setup_total }}</span>