jekyll-theme-zer0 1.30.0 → 1.31.1

data/_includes/components/cookie-consent.html

@@ -50,36 +50,36 @@ Usage: Include in root.html layout
 Configuration: Uses site.posthog settings from _config.yml
 {% endcomment %}
 
-<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 py-3 px-3 shadow-lg" hidden>
-  <div class="container-xl px-3 px-md-4">
-    <div class="row align-items-center g-2">
-      <div class="col-12 col-lg-8">
-        <p class="h6 fw-semibold mb-2 mb-lg-0">
-          <i class="bi bi-shield-check me-2" aria-hidden="true"></i>
-          We value your privacy
-        </p>
-        <p class="mb-2 mb-lg-0 small text-body-secondary">
-          This website uses cookies and similar technologies to enhance your browsing experience, analyze traffic, and provide personalized content.
-          {% assign cookie_page_urls = site.html_pages | map: "url" | join: "|" | prepend: "|" | append: "|" %}
-          {% if site.privacy_policy_url or cookie_page_urls contains "|/privacy-policy/|" or cookie_page_urls contains "|/privacy-policy|" %}
-            <a href="{{ site.privacy_policy_url | default: '/privacy-policy/' | relative_url }}" class="link-body-emphasis text-decoration-underline">Learn more in our Privacy Policy</a>.
-          {% endif %}
-        </p>
-      </div>
-      <div class="col-12 col-lg-4">
-        <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
-          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#cookieSettingsModal">
-            <i class="bi bi-gear me-1"></i>
-            Manage Cookies
-          </button>
-          <button type="button" class="btn btn-sm btn-secondary" id="rejectAllCookies">
-            Reject All
-          </button>
-          <button type="button" class="btn btn-sm btn-primary" id="acceptAllCookies">
-            Accept All
-          </button>
-        </div>
-      </div>
+{% comment %}
+  Compact bottom bar. One row from md up (copy left, actions right); on phones
+  a two-line summary over a single row of three equal buttons. The banner used
+  to stack full-width buttons under a heading and a long sentence: 324px tall
+  at 400px wide (most of the first screen) and 94px on desktop, covering hero
+  copy. The per-category detail lives in the Manage modal.
+{% endcomment %}
+<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 shadow-lg" role="region" aria-label="Cookie consent" hidden>
+  <div class="container-xl cookie-consent-banner__inner">
+    <p class="cookie-consent-banner__text small mb-0">
+      <i class="bi bi-shield-check me-1" aria-hidden="true"></i>
+      <strong class="fw-semibold">We value your privacy.</strong>
+      <span class="text-body-secondary">
+        We use cookies to analyze traffic and improve the site.
+        {% assign cookie_page_urls = site.html_pages | map: "url" | join: "|" | prepend: "|" | append: "|" %}
+        {% if site.privacy_policy_url or cookie_page_urls contains "|/privacy-policy/|" or cookie_page_urls contains "|/privacy-policy|" %}
+          <a href="{{ site.privacy_policy_url | default: '/privacy-policy/' | relative_url }}" class="link-body-emphasis text-decoration-underline">Privacy Policy</a>
+        {% endif %}
+      </span>
+    </p>
+    <div class="cookie-consent-banner__actions">
+      <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#cookieSettingsModal">
+        <i class="bi bi-gear me-1" aria-hidden="true"></i>Manage<span class="d-none d-sm-inline"> Cookies</span>
+      </button>
+      <button type="button" class="btn btn-sm btn-secondary" id="rejectAllCookies">
+        Reject All
+      </button>
+      <button type="button" class="btn btn-sm btn-primary" id="acceptAllCookies">
+        Accept All
+      </button>
     </div>
   </div>
 </div>

data/_includes/components/halfmoon.html

@@ -14,16 +14,18 @@
                (halfmoon.js + core/color-mode-init.html enforce the same).
  {% endcomment %}
 {% unless site.color_mode_lock %}
+{% comment %} Server-render the configured mode as selected (#521) so no-JS and pre-hydration state is right; halfmoon.js then applies any stored preference. {% endcomment %}
+{%- assign _cm = site.color_mode_default | default: 'auto' -%}
 <div class="btn-group bd-theme-switch {{ include.class | default: '' }}" role="group" aria-label="Color mode">
-  <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1" data-bs-theme-value="light" aria-pressed="false">
+  <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1{% if _cm == 'light' %} active{% endif %}" data-bs-theme-value="light" aria-pressed="{% if _cm == 'light' %}true{% else %}false{% endif %}">
     <svg class="bi flex-shrink-0" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#sun-fill"></use></svg>
     <span>Light</span>
   </button>
-  <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1" data-bs-theme-value="dark" aria-pressed="false">
+  <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1{% if _cm == 'dark' %} active{% endif %}" data-bs-theme-value="dark" aria-pressed="{% if _cm == 'dark' %}true{% else %}false{% endif %}">
     <svg class="bi flex-shrink-0" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
     <span>Dark</span>
   </button>
-  <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1" data-bs-theme-value="auto" aria-pressed="false">
+  <button type="button" class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-center gap-1{% if _cm == 'auto' %} active{% endif %}" data-bs-theme-value="auto" aria-pressed="{% if _cm == 'auto' %}true{% else %}false{% endif %}">
     <svg class="bi flex-shrink-0" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#circle-half"></use></svg>
     <span>Auto</span>
   </button>

data/_includes/components/mermaid.html

@@ -4,7 +4,7 @@
   Path:        _includes/components/mermaid.html
   Purpose:     Load Mermaid and the theme's diagram-figure behaviour on pages
                that opt in with `mermaid: true` (gated in core/head.html).
-               Emits a config block and two deferred scripts; renders no
+               Emits a config block and one deferred script; renders no
                markup itself — every ```mermaid fence (and legacy
                <div class="mermaid">) becomes an accessible <figure> with a
                toolbar (zoom, fullscreen, copy source, download SVG), a
@@ -22,11 +22,15 @@
   Depends on:  assets/vendor/mermaid/mermaid.min.js (vendored, no CDN —
                GitHub Pages-safe), assets/js/mermaid-diagrams.js,
                _sass/components/_mermaid.scss
-  Notes:       Both scripts are `defer`: Mermaid is a 3.3 MB bundle and must
-               never block parsing (it used to load synchronously in <head>).
-               Order matters — the vendor bundle first, then the behaviour,
-               which converts fences at execution time, before code-copy.js's
-               DOMContentLoaded pass decorates <pre> blocks. Diagram colours
+  Notes:       The Mermaid bundle (~1 MB) is NOT emitted as a <script> any
+               more. mermaid-diagrams.js (deferred) converts fences into
+               figures at execution time, before code-copy.js's
+               DOMContentLoaded pass decorates <pre> blocks, and injects the
+               bundle from `src` below only when the page has a diagram and
+               the first one nears the viewport (IntersectionObserver). A
+               `mermaid: true` page without fences never downloads it. It used
+               to be a parse-time `defer` script on every opted-in page, and
+               before that a synchronous one in <head>. Diagram colours
                are not configured here: the script derives them from the live
                --zer0-*/--bs-* tokens so light/dark/wizard modes and skins
                work without per-mode overrides.
@@ -71,5 +75,8 @@
   }
 }
 </script>
-<script defer src="{{ mm_src | relative_url }}"></script>
+{% comment %} Bundle URL for the lazy loader. Passed as a script global rather than
+   through the JSON block above: a URL read back out of DOM text and assigned
+   to script.src is a script-injection sink (CodeQL js/xss-through-dom). {% endcomment %}
+<script>window.zer0MermaidSrc = {{ mm_src | relative_url | jsonify }};</script>
 <script defer src="{{ '/assets/js/mermaid-diagrams.js' | relative_url }}"></script>

data/_includes/components/preview-image.html

@@ -7,9 +7,18 @@
        src=post.preview 
        alt=post.title 
        class="card-img-top" 
-       style="height: 180px; object-fit: cover;" 
+       style="height: 180px; object-fit: cover;"
     -%}
-  
+
+  Optional: loading (default "lazy"), fetchpriority, decoding, width, height.
+  All but `loading` are emitted only when passed, so existing call sites
+  render unchanged. width/height are the image's intrinsic size (or its
+  aspect ratio): they let the browser reserve the box before the file
+  arrives (Lighthouse `unsized-images`) and never distort the image, since
+  CSS height:auto / object-fit still win once it has loaded.
+  An above-the-fold hero (the LCP element) should pass loading="eager"
+  fetchpriority="high" -- see the article.html hero.
+
   WHICH INCLUDE: this one renders an <img> in the content flow. For cover art
   painted as a CSS background on an otherwise empty box, use the sibling
   components/background-image.html -- a background image is invisible to
@@ -20,6 +29,8 @@
   The component will auto-prepend the assets_prefix from _config.yml.
   Examples:
     - /images/previews/my-image.png → /assets/images/previews/my-image.png
+    - images/previews/my-image.png → /assets/images/previews/my-image.png
+      (a missing leading slash used to produce /assetsimages/previews/…)
     - /assets/images/previews/my-image.png → unchanged
     - https://example.com/image.png → unchanged (external URL)
 {% endcomment %}
@@ -33,6 +44,14 @@
 {% assign assets_prefix = site.preview_images.assets_prefix | default: '/assets' %}
 {% assign auto_prefix = site.preview_images.auto_prefix | default: true %}
 
+{% comment %} Normalise a site-relative path to start with "/" so joining it to
+   assets_prefix can never glue two segments together ("images/x.png" became
+   "/assetsimages/x.png"). URLs and data: URIs are left alone. {% endcomment %}
+{% unless img == nil or img == "" or img contains '://' or img contains 'data:' %}
+  {% assign img_first = img | slice: 0 %}
+  {% if img_first != '/' %}{% assign img = '/' | append: img %}{% endif %}
+{% endunless %}
+
 {% comment %} Determine final image source {% endcomment %}
 {% if img contains '://' %}
   {% comment %} External URL - use as-is {% endcomment %}
@@ -53,4 +72,4 @@
      class="{{ class }}" 
      alt="{{ alt | escape }}"
      {% if style %}style="{{ style }}"{% endif %}
-     loading="{{ loading }}">
+     loading="{{ loading }}"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.fetchpriority %} fetchpriority="{{ include.fetchpriority }}"{% endif %}{% if include.decoding %} decoding="{{ include.decoding }}"{% endif %}>

data/_includes/components/theme-preview-gallery.html

@@ -519,7 +519,7 @@ docker-compose up
           <i class="bi bi-person-circle"    title="bi-person-circle"></i>
           <i class="bi bi-palette"          title="bi-palette"></i>
           <i class="bi bi-code-slash"       title="bi-code-slash"></i>
-          <i class="bi bi-file-earmark-text"title="bi-file-earmark-text"></i>
+          <i class="bi bi-file-earmark-text" title="bi-file-earmark-text"></i>
           <i class="bi bi-check-circle text-success" title="success"></i>
           <i class="bi bi-x-circle     text-danger"  title="danger"></i>
           <i class="bi bi-exclamation-triangle text-warning" title="warning"></i>

data/_includes/content/intro.html

@@ -29,6 +29,13 @@
 {% assign assets_prefix = site.preview_images.assets_prefix | default: '/assets' %}
 {% assign auto_prefix = site.preview_images.auto_prefix | default: true %}
 
+{% comment %} Leading-slash normalisation, as in components/preview-image.html:
+   `preview: images/x.png` used to resolve to /assetsimages/x.png. {% endcomment %}
+{% unless preview_image == nil or preview_image == "" or preview_image contains '://' or preview_image contains 'data:' %}
+  {% assign preview_first = preview_image | slice: 0 %}
+  {% if preview_first != '/' %}{% assign preview_image = '/' | append: preview_image %}{% endif %}
+{% endunless %}
+
 {% if preview_image contains '://' %}
   {% assign preview_path = preview_image %}
 {% elsif auto_prefix and preview_image != blank %}
@@ -45,7 +52,16 @@
   Build the file path, branch, and repo owner for action buttons.
 {% endcomment %}
 {% assign repo_branch = site.branch | default: "main" %}
-{% assign file_path = page_dir | append: "/" | append: page.path %}
+{% comment %}
+  Only join with "/" when there is a collection directory. Pages outside a
+  collection have an empty page_dir, and the unconditional join produced
+  ".../blob/main//pages/tags.md" (double slash) in the edit/source links.
+{% endcomment %}
+{% if page_dir and page_dir != "" %}
+  {% assign file_path = page_dir | append: "/" | append: page.path %}
+{% else %}
+  {% assign file_path = page.path %}
+{% endif %}
 {% assign repo_parts = site.repository | split: "/" %}
 {% assign repo_owner = repo_parts[0] %}
 {% assign page_absolute_url = page.url | absolute_url %}
@@ -232,7 +248,8 @@
         <div class="bd-intro-actions">
     {% comment %} Share Button {% endcomment %}
     <div class="dropdown">
-      <button class="btn btn-sm btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false">
+      {%- comment -%} aria-label keeps an accessible name below 576px, where the visible text is d-none. {%- endcomment -%}
+      <button class="btn btn-sm btn-info dropdown-toggle" type="button" id="shareDropdownBottom" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ ui.share_label | default: 'Share' }}">
         <i class="bi bi-share" aria-hidden="true"></i>
         <span class="d-none d-sm-inline ms-1">{{ ui.share_label | default: "Share" }}</span>
       </button>
@@ -293,7 +310,8 @@
     <a href="https://github.com/{{ site.repository }}/blob/{{ repo_branch }}/{{ file_path }}"
        class="btn btn-sm btn-dark bd-intro-action-link"
        target="_blank"
-       rel="noopener noreferrer">
+       rel="noopener noreferrer"
+       aria-label="{{ ui.edit_on_github | default: 'Edit on GitHub' }}">
       <i class="bi bi-github" aria-hidden="true"></i>
       <span class="d-none d-sm-inline ms-1">{{ ui.edit_on_github | default: "Edit on GitHub" }}</span>
     </a>

data/_includes/content/seo.html

@@ -43,6 +43,14 @@
     nil seo_image — og:image was silently dropped on every page without a
     page.header image, defeating the site.og_image fallback entirely.
   {%- endcomment -%}
+  {%- comment -%} Leading-slash normalisation, as in components/preview-image.html:
+    `preview: images/x.png` used to become og:image …/assetsimages/x.png. {%- endcomment -%}
+  {%- if page_teaser_image and page_teaser_image != "" -%}
+    {%- unless page_teaser_image contains '://' or page_teaser_image contains 'data:' -%}
+      {%- assign teaser_first = page_teaser_image | slice: 0 -%}
+      {%- if teaser_first != '/' -%}{%- assign page_teaser_image = '/' | append: page_teaser_image -%}{%- endif -%}
+    {%- endunless -%}
+  {%- endif -%}
   {%- if page_teaser_image contains '://' -%}
     {%- comment -%} External URL - use as-is {%- endcomment -%}
   {%- elsif auto_prefix and page_teaser_image and page_teaser_image != blank -%}