jekyll-theme-zer0 1.29.0 → 1.31.0

data/_layouts/article.html

@@ -2,7 +2,7 @@
 # Features: ZER0-019, ZER0-035, ZER0-064
 layout: default
 ---
-<!--
+{% comment %}
   ===================================================================
   ARTICLE LAYOUT - Blog Post and Article Display with Post Type Support
   ===================================================================
@@ -43,7 +43,7 @@ layout: default
   - site.giscus configuration for comment system
   - Bootstrap 5 components
   ===================================================================
--->
+{% endcomment %}
 
 {% comment %}
   Determine post type and (article-local) sidebar visibility.
@@ -76,7 +76,12 @@ layout: default
   {% endif %}
 {% endif %}
 
-<article id="main" class="post h-entry" role="main" itemscope itemtype="https://schema.org/BlogPosting">
+{% comment %} No main role and no generic main id on this element: root.html already
+     provides the page's single <main id="main-content"> landmark, and a main role here
+     both duplicated it and suppressed this element's native `article` landmark (issue
+     #484, the same class of defect as #299). The generic id had no referents either —
+     the skip link targets #main-content. Asserted by test/visual/core/landmarks.spec.js. {% endcomment %}
+<article class="post h-entry" itemscope itemtype="https://schema.org/BlogPosting">
   
   {% comment %} ================================ {% endcomment %}
   {% comment %} BREAKING NEWS ALERT BANNER      {% endcomment %}
@@ -93,9 +98,9 @@ layout: default
   </div>
   {% endif %}
   
-  <!-- ================================ -->
-  <!-- ARTICLE HEADER                   -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} ARTICLE HEADER                   {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <header class="post-header mb-4">
     
     {% comment %} Post Type Badge {% endcomment %}
@@ -125,9 +130,9 @@ layout: default
     <p class="lead text-muted">{{ page.sub-title }}</p>
     {% endif %}
     
-    <!-- Post Metadata -->
+    {% comment %} Post Metadata {% endcomment %}
     <div class="post-meta text-muted mb-3">
-      <!-- Author -->
+      {% comment %} Author {% endcomment %}
       {% if page.author %}
         <span class="post-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
           {% include components/author-card.html author=page.author style="inline" name_itemprop="name" %}
@@ -135,7 +140,7 @@ layout: default
         <span class="mx-2">•</span>
       {% endif %}
       
-      <!-- Publication Date -->
+      {% comment %} Publication Date {% endcomment %}
       {% if page.date %}
         <time class="post-date dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
           <i class="bi bi-calendar me-1"></i>
@@ -144,7 +149,7 @@ layout: default
         <span class="mx-2">•</span>
       {% endif %}
       
-      <!-- Reading Time -->
+      {% comment %} Reading Time {% endcomment %}
       {% assign words = content | number_of_words %}
       {% assign minutes = words | divided_by: 200 %}
       {% if minutes < 1 %}{% assign minutes = 1 %}{% endif %}
@@ -153,12 +158,12 @@ layout: default
         {{ minutes }} min read
       </span>
       
-      <!-- Page Views -->
+      {% comment %} Page Views {% endcomment %}
       {% comment %} The badge ships hidden and carries its own leading separator,
          so a page with no count yet leaves no dangling "•" in the meta row. {% endcomment %}
       {% include components/page-views.html separator=true %}
       
-      <!-- Last Modified -->
+      {% comment %} Last Modified {% endcomment %}
       {% if page.lastmod %}
         <span class="mx-2">•</span>
         <span class="post-updated" itemprop="dateModified" content="{{ page.lastmod | date_to_xmlschema }}">
@@ -168,7 +173,7 @@ layout: default
       {% endif %}
     </div>
     
-    <!-- Category Link -->
+    {% comment %} Category Link {% endcomment %}
     {% comment %} Category base is configurable (`category_base`, default `/news`).
        Only link the badge when that category index page actually exists in the
        build; on a remote-theme Pages consumer the category section is
@@ -199,7 +204,7 @@ layout: default
     </div>
     {% endif %}
 
-    <!-- Tags -->
+    {% comment %} Tags {% endcomment %}
     {% comment %} Only link tag badges when a tags index page actually exists in
        the build (configurable via `tags_page`, default `/tags/`). On a
        remote-theme Pages consumer the tags page is plugin/page-generated and
@@ -234,6 +239,10 @@ layout: default
     post_type defaults (issue #303).
     Nested ifs keep the "only when page.preview exists" guard intact (Liquid has
     no parentheses, so a flat `a or b and c` would misgroup).
+    The hero is the above-the-fold LCP element, so it loads eagerly at high
+    priority (the include defaults to lazy); its box is reserved in CSS by
+    `.featured-hero img` (components/_ui-enhancements.scss), not by width/height
+    attributes, because preview assets vary in shape (issue #485).
   {% endcomment %}
   {% assign show_hero = false %}
   {% if page.preview %}
@@ -247,7 +256,10 @@ layout: default
        src=page.preview 
        alt=page.title 
        class="w-100 rounded-3 shadow" 
-       style="max-height: 500px; object-fit: cover;" 
+       style="max-height: 500px; object-fit: cover;"
+       loading="eager"
+       fetchpriority="high"
+       decoding="async"
     %}
     {% if page.preview_caption %}
     <figcaption class="text-muted small mt-2 text-center">{{ page.preview_caption }}</figcaption>
@@ -374,9 +386,9 @@ layout: default
   </aside>
   {% endif %}
   
-  <!-- ================================ -->
-  <!-- ARTICLE CONTENT                  -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} ARTICLE CONTENT                  {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <div class="post-content e-content {% if post_type == 'featured' %}fs-5{% endif %}" itemprop="articleBody">
     {{ content }}
   </div>
@@ -419,9 +431,9 @@ layout: default
   </aside>
   {% endif %}
   
-  <!-- ================================ -->
-  <!-- AUTHOR BIO SECTION               -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} AUTHOR BIO SECTION               {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {% comment %}
     "About the Author" is honored when the post has an author and the
     `author_profile` front-matter flag is not false (defaults to true for the
@@ -432,9 +444,9 @@ layout: default
     {% include components/author-bio.html author=page.author %}
   {% endif %}
   
-  <!-- ================================ -->
-  <!-- RELATED POSTS SECTION            -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} RELATED POSTS SECTION            {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {% if page.tags.size > 0 %}
     {% assign related_posts = "" | split: "" %}
     {% for tag in page.tags %}
@@ -449,9 +461,14 @@ layout: default
     
     {% if related_posts.size > 0 %}
       <aside class="related-posts my-5 pt-4 border-top">
-        <h3 class="h5 mb-3">
+        {%- comment -%}
+          h2, not h3: this aside is a sibling of "About the Author" (also h2),
+          not a child of it. The old h3 also made every card title below it an
+          h6, a two-level jump (#436). Size is held by .h5.
+        {%- endcomment -%}
+        <h2 class="h5 mb-3">
           <i class="bi bi-journal-text me-2"></i>Related Posts
-        </h3>
+        </h2>
         <div class="row row-cols-1 row-cols-md-3 g-3">
           {% for rpost in related_posts %}
             <div class="col">
@@ -464,15 +481,15 @@ layout: default
                   {% endif %}
                   <a href="{{ rpost.url | relative_url }}" class="text-decoration-none">
                     {% assign rpost_img = rpost.preview | default: site.teaser %}
-                    {% include components/preview-image.html src=rpost_img alt=rpost.title class="card-img-top" %}
+                    {% include components/preview-image.html src=rpost_img alt=rpost.title class="card-img-top" width="1536" height="1024" %}
                   </a>
                 </div>
                 <div class="card-body">
-                  <h6 class="card-title mb-1">
+                  <h3 class="h6 card-title mb-1">
                     <a href="{{ rpost.url | relative_url }}" class="text-decoration-none text-body-emphasis">
                       {{ rpost.title | truncate: 60 }}
                     </a>
-                  </h6>
+                  </h3>
                   <small class="text-muted">
                     <i class="bi bi-calendar me-1"></i>{{ rpost.date | date: "%b %d, %Y" }}
                   </small>
@@ -485,12 +502,12 @@ layout: default
     {% endif %}
   {% endif %}
   
-  <!-- ================================ -->
-  <!-- POST NAVIGATION                  -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} POST NAVIGATION                  {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <nav class="post-navigation my-5 pt-4 border-top" aria-label="Post navigation">
     <div class="row g-3">
-      <!-- Previous Post -->
+      {% comment %} Previous Post {% endcomment %}
       <div class="col-md-6">
         {% if page.previous %}
           <a href="{{ page.previous.url | relative_url }}" class="post-nav-card post-nav-card--prev">
@@ -513,7 +530,7 @@ layout: default
         {% endif %}
       </div>
       
-      <!-- Next Post -->
+      {% comment %} Next Post {% endcomment %}
       <div class="col-md-6">
         {% if page.next %}
           <a href="{{ page.next.url | relative_url }}" class="post-nav-card post-nav-card--next">
@@ -538,9 +555,9 @@ layout: default
     </div>
   </nav>
   
-  <!-- ================================ -->
-  <!-- COMMENT SYSTEM                   -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} COMMENT SYSTEM                   {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {% if page.comments != false and site.giscus.enabled %}
     <section class="post-comments mt-5 pt-4 border-top" id="comments">
       <h2 class="h4 mb-4">

data/_layouts/author.html

@@ -66,9 +66,9 @@ hide_intro: true
 {% assign latest_date = nil %}
 {% for doc in author_docs %}{% if doc.date %}{% assign latest_date = doc.date %}{% break %}{% endif %}{% endfor %}
 
-<!-- ========================== -->
-<!-- BREADCRUMB                 -->
-<!-- ========================== -->
+{% comment %} ========================== {% endcomment %}
+{% comment %} BREADCRUMB                 {% endcomment %}
+{% comment %} ========================== {% endcomment %}
 {%- comment -%}
   Only link the /authors/ breadcrumb crumb when that index page actually exists
   in the build. A pure remote-theme Pages consumer doesn't get the
@@ -98,9 +98,9 @@ hide_intro: true
   </ol>
 </nav>
 
-<!-- ========================== -->
-<!-- PROFILE HERO               -->
-<!-- ========================== -->
+{% comment %} ========================== {% endcomment %}
+{% comment %} PROFILE HERO               {% endcomment %}
+{% comment %} ========================== {% endcomment %}
 <header class="author-hero card border-0 shadow-sm mb-4" itemscope itemtype="https://schema.org/Person">
   <div class="card-body p-4 p-md-5">
     <div class="d-flex flex-column flex-sm-row align-items-center align-items-sm-start gap-4">
@@ -118,14 +118,14 @@ hide_intro: true
         {% if author_data.tagline %}<p class="author-hero__tagline lead mb-2" itemprop="slogan">{{ author_data.tagline }}</p>{% endif %}
         {% if author_data.bio %}<p class="text-body-secondary mb-3" itemprop="description">{{ author_data.bio }}</p>{% endif %}
 
-        <!-- Hero meta: location + latest activity -->
+        {% comment %} Hero meta: location + latest activity {% endcomment %}
         <div class="author-hero__meta d-flex flex-wrap justify-content-center justify-content-sm-start gap-3 text-body-secondary small mb-3">
           {% if author_data.location %}<span itemprop="homeLocation"><i class="bi bi-geo-alt me-1" aria-hidden="true"></i>{{ author_data.location }}</span>{% endif %}
           <span><i class="bi bi-collection me-1" aria-hidden="true"></i>{{ author_docs.size }} contribution{% unless author_docs.size == 1 %}s{% endunless %}</span>
           {% if latest_date %}<span><i class="bi bi-clock-history me-1" aria-hidden="true"></i>Last active {{ latest_date | date: "%b %Y" }}</span>{% endif %}
         </div>
 
-        <!-- Expertise chips -->
+        {% comment %} Expertise chips {% endcomment %}
         {% assign hero_chips = author_data.topics | default: author_data.expertise %}
         {% if hero_chips %}
           <div class="author-expertise d-flex flex-wrap justify-content-center justify-content-sm-start gap-1 mb-3">
@@ -135,7 +135,7 @@ hide_intro: true
           </div>
         {% endif %}
 
-        <!-- Social links -->
+        {% comment %} Social links {% endcomment %}
         <div class="author-social d-flex flex-wrap justify-content-center justify-content-sm-start gap-2">
           {% if author_data.github %}<a href="https://github.com/{{ author_data.github }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" itemprop="sameAs"><i class="bi bi-github me-1" aria-hidden="true"></i>GitHub</a>{% endif %}
           {% if author_data.twitter %}<a href="https://x.com/{{ author_data.twitter }}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener" aria-label="X" itemprop="sameAs"><i class="bi bi-twitter-x me-1" aria-hidden="true"></i>X</a>{% endif %}
@@ -155,14 +155,14 @@ hide_intro: true
 </header>
 
 {% if author_docs.size > 0 %}
-<!-- ========================== -->
-<!-- INTERACTIVE CONTENT HUB    -->
-<!-- ========================== -->
+{% comment %} ========================== {% endcomment %}
+{% comment %} INTERACTIVE CONTENT HUB    {% endcomment %}
+{% comment %} ========================== {% endcomment %}
 <section class="author-content" data-author-profile>
 
   <h2 class="visually-hidden">Contributions by {{ author_name }}</h2>
 
-  <!-- Stats dashboard = interactive type filters (each card filters the grid) -->
+  {% comment %} Stats dashboard = interactive type filters (each card filters the grid) {% endcomment %}
   <div class="author-stats" role="group" aria-label="Filter contributions by type">
     <button type="button" class="author-stat is-active" data-filter="all" aria-pressed="true">
       <span class="author-stat__num">{{ author_docs.size }}</span>
@@ -188,7 +188,7 @@ hide_intro: true
     {% endfor %}
   </div>
 
-  <!-- Controls: search + sort + live result count -->
+  {% comment %} Controls: search + sort + live result count {% endcomment %}
   <div class="author-controls d-flex flex-column flex-md-row gap-2 align-items-stretch align-items-md-center mt-3">
     <div class="author-search flex-grow-1 position-relative">
       <i class="bi bi-search author-search__icon" aria-hidden="true"></i>
@@ -208,7 +208,7 @@ hide_intro: true
     </div>
   </div>
 
-  <!-- Topic / tag cloud (clickable filters) -->
+  {% comment %} Topic / tag cloud (clickable filters) {% endcomment %}
   {% if unique_tags.size > 0 %}
   <div class="author-tagcloud mt-3" role="group" aria-label="Filter by topic">
     <span class="author-tagcloud__label text-body-secondary small me-1"><i class="bi bi-tags me-1" aria-hidden="true"></i>Topics:</span>
@@ -218,12 +218,12 @@ hide_intro: true
   </div>
   {% endif %}
 
-  <!-- Live result count (announced to screen readers) -->
+  {% comment %} Live result count (announced to screen readers) {% endcomment %}
   <p class="author-resultcount text-body-secondary small mt-3 mb-2" data-author-count aria-live="polite">
     Showing {{ author_docs.size }} of {{ author_docs.size }}
   </p>
 
-  <!-- Content grid -->
+  {% comment %} Content grid {% endcomment %}
   <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="author-grid" data-author-grid>
     {% for doc in author_docs %}
       {% assign dtags = doc.tags | join: "|" | downcase %}
@@ -237,7 +237,7 @@ hide_intro: true
     {% endfor %}
   </div>
 
-  <!-- No-results state (shown by JS when filters match nothing) -->
+  {% comment %} No-results state (shown by JS when filters match nothing) {% endcomment %}
   <div class="author-noresults text-center py-5 d-none" data-author-noresults>
     <i class="bi bi-search fs-1 text-muted" aria-hidden="true"></i>
     <p class="text-muted mt-3 mb-2">No contributions match your filters.</p>
@@ -245,7 +245,7 @@ hide_intro: true
   </div>
 </section>
 
-<!-- Structured data: this author's contributions as a CollectionPage / ItemList -->
+{% comment %} Structured data: this author's contributions as a CollectionPage / ItemList {% endcomment %}
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",
@@ -280,7 +280,7 @@ hide_intro: true
    body content (e.g. the Guest profile, which is a contribution guide). {% endcomment %}
 {% assign page_body = content | strip %}
 {% if page_body == "" %}
-<!-- Empty state -->
+{% comment %} Empty state {% endcomment %}
 <div class="text-center py-5">
   <i class="bi bi-journal-x fs-1 text-muted" aria-hidden="true"></i>
   <p class="text-muted mt-3">No published content from this author yet.</p>

data/_layouts/authors.html

@@ -2,7 +2,7 @@
 # Features: ZER0-019, ZER0-061
 layout: default
 ---
-<!--
+{% comment %}
   ===================================================================
   AUTHORS INDEX LAYOUT - Directory of all author profiles
   ===================================================================
@@ -24,7 +24,7 @@ layout: default
   - _data/authors.yml
   - components/author-card.html (style="compact")
   ===================================================================
--->
+{% endcomment %}
 
 <header class="authors-index-header mb-5">
   <div class="d-flex align-items-center mb-3">

data/_layouts/book-abc.html

@@ -22,9 +22,9 @@ layout: root
 {%- assign _first = page.alphabet | first -%}
 
 <article class="book-abc" itemscope itemtype="https://schema.org/Book">
-  <!-- ================================ -->
-  <!-- COVER HERO                       -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} COVER HERO                       {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <header class="book-hero zer0-bg-hero py-5">
     <div class="container-xl">
       <div class="row g-5 align-items-center justify-content-center">
@@ -67,27 +67,27 @@ layout: root
 
   <div class="container-xl py-5">
 
-    <!-- ================================ -->
-    <!-- A–Z QUICK JUMP                   -->
-    <!-- ================================ -->
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} A–Z QUICK JUMP                   {% endcomment %}
+    {% comment %} ================================ {% endcomment %}
     <nav class="abc-jump" aria-label="Jump to a letter">
       {%- for _e in page.alphabet -%}
       <a class="abc-jump-link" href="#letter-{{ _e.letter | downcase }}">{{ _e.letter }}</a>
       {%- endfor -%}
     </nav>
 
-    <!-- ================================ -->
-    <!-- THE ALPHABET BOARD               -->
-    <!-- ================================ -->
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} THE ALPHABET BOARD               {% endcomment %}
+    {% comment %} ================================ {% endcomment %}
     <div class="abc-board abc-style--{{ page.art_style | default: 'isometric-tech-toy' }}">
       {%- for _e in page.alphabet -%}
         {%- include components/abc-letter.html entry=_e -%}
       {%- endfor -%}
     </div>
 
-    <!-- ================================ -->
-    <!-- AI COLOPHON                      -->
-    <!-- ================================ -->
+    {% comment %} ================================ {% endcomment %}
+    {% comment %} AI COLOPHON                      {% endcomment %}
+    {% comment %} ================================ {% endcomment %}
     {%- if page.art_style_prompt or page.generator -%}
     <aside class="book-colophon card border-0 bg-body-tertiary mt-5 mx-auto" style="max-width: var(--zer0-book-measure);">
       <div class="card-body">

data/_layouts/book-story.html

@@ -20,9 +20,9 @@ layout: root
 {%- assign _book_page = site.books | where: "book", _slug | where: "layout", "book" | first -%}
 
 <article class="book-story container-xl py-4 py-md-5" itemscope itemtype="https://schema.org/Chapter">
-  <!-- ================================ -->
-  <!-- STORY HEADER                     -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} STORY HEADER                     {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <header class="book-story-header text-center mb-4 mb-md-5">
     {%- if _book_page -%}
     <nav aria-label="Book">
@@ -40,9 +40,9 @@ layout: root
     {%- endif -%}
   </header>
 
-  <!-- ================================ -->
-  <!-- STORY BODY                       -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} STORY BODY                       {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <div class="book-story-content" itemprop="text">
     {{ content }}
   </div>
@@ -51,16 +51,16 @@ layout: root
   <p class="book-the-end fs-4 mt-5">The End</p>
   {%- endunless -%}
 
-  <!-- ================================ -->
-  <!-- STORY NAVIGATION                 -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} STORY NAVIGATION                 {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- if page.chapter -%}
     {%- include components/book-nav.html book=_slug chapter=page.chapter -%}
   {%- endif -%}
 
-  <!-- ================================ -->
-  <!-- ILLUSTRATION COLOPHON            -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} ILLUSTRATION COLOPHON            {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   {%- if page.illustrations and page.illustrations.size > 0 -%}
   <details class="book-colophon mt-4">
     <summary class="small"><i class="bi bi-stars me-1" aria-hidden="true"></i>How the illustrations in this story were made</summary>
@@ -79,9 +79,9 @@ layout: root
   </details>
   {%- endif -%}
 
-  <!-- ================================ -->
-  <!-- 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/book.html

@@ -21,9 +21,9 @@ layout: root
 {%- assign _cover = page.cover_image | default: page.preview -%}
 
 <article class="book-landing" itemscope itemtype="https://schema.org/Book">
-  <!-- ================================ -->
-  <!-- COVER HERO                       -->
-  <!-- ================================ -->
+  {% comment %} ================================ {% endcomment %}
+  {% comment %} COVER HERO                       {% endcomment %}
+  {% comment %} ================================ {% endcomment %}
   <header class="book-hero zer0-bg-hero py-5">
     <div class="container-xl">
       <div class="row g-5 align-items-center justify-content-center">
@@ -69,9 +69,9 @@ layout: root
     <div class="row justify-content-center">
       <div class="col-lg-9 col-xl-8">
 
-        <!-- ================================ -->
-        <!-- ABOUT THIS BOOK (page body)      -->
-        <!-- ================================ -->
+        {% comment %} ================================ {% endcomment %}
+        {% comment %} ABOUT THIS BOOK (page body)      {% endcomment %}
+        {% comment %} ================================ {% endcomment %}
         {%- assign _body = content | strip -%}
         {%- if _body != "" -%}
         <section class="book-about mb-5">
@@ -79,14 +79,14 @@ layout: root
         </section>
         {%- endif -%}
 
-        <!-- ================================ -->
-        <!-- TABLE OF CONTENTS                -->
-        <!-- ================================ -->
+        {% comment %} ================================ {% endcomment %}
+        {% comment %} TABLE OF CONTENTS                {% endcomment %}
+        {% comment %} ================================ {% endcomment %}
         {%- include components/book-toc.html book=_slug -%}
 
-        <!-- ================================ -->
-        <!-- AI COLOPHON                      -->
-        <!-- ================================ -->
+        {% comment %} ================================ {% endcomment %}
+        {% comment %} AI COLOPHON                      {% endcomment %}
+        {% comment %} ================================ {% endcomment %}
         {%- if page.illustration_style or page.generator -%}
         <aside class="book-colophon card border-0 bg-body-tertiary mt-5">
           <div class="card-body">