jekyll-theme-zer0 1.23.0 → 1.25.0

data/_data/navigation/README.md

@@ -19,11 +19,18 @@
 #
 # ## Navigation Modes
 #
-# The sidebar supports three navigation modes set via `page.sidebar.nav`:
-#
-# 1. **auto** - Auto-generates from collection documents
-# 2. **tree** - Uses YAML data from this directory
-# 3. **categories** - Groups by Jekyll categories
+# The sidebar supports these navigation modes set via `page.sidebar.nav`
+# (resolved by _includes/navigation/sidebar-config.html; page front matter →
+# collection `sidebar:` metadata → site.sidebar → nothing):
+#
+# 1. **auto** - Best mode for the page's collection: a curated
+#    _data/navigation/<collection>.yml wins, then the live "collection"
+#    folder tree, then post "categories"
+# 2. **collection** - Live folder tree of the page's (or a named) collection
+# 3. **categories** - Posts grouped by Jekyll category
+# 4. **tags** - Posts grouped by Jekyll tag
+# 5. **<file name>** - Any other value renders _data/navigation/<value>.yml
+#    as a curated tree (e.g. `nav: docs` → docs.yml)
 #
 # ## Available Files
 #
@@ -42,6 +49,9 @@
 #   nav: docs  # Uses _data/navigation/docs.yml
 # ```
 #
+# Collections named like a file here get it automatically under `nav: auto`
+# (docs.yml, about.yml, quickstart.yml, posts.yml ↔ the matching collection).
+#
 # ## Navbar capacity & responsive constraints (main.yml)
 #
 # The top navbar adapts the `main.yml` items to the viewport automatically:

data/_data/navigation/main.yml

@@ -18,8 +18,6 @@
   icon: bi-newspaper
   url: /news/
   children:
-    - title: All News
-      url: /news/
     - title: Categories
       url: /categories/
     - title: Tags
@@ -29,8 +27,6 @@
   icon: bi-journal-text
   url: /notes/
   children:
-    - title: All Notes
-      url: /notes/
     - title: Git Cheatsheet
       url: /notes/git-cheatsheet/
     - title: Docker Commands
@@ -46,8 +42,6 @@
   icon: bi-journal-code
   url: /notebooks/
   children:
-    - title: All Notebooks
-      url: /notebooks/
     - title: Test Notebook
       url: /notebooks/test-notebook/
 
@@ -55,8 +49,6 @@
   icon: bi-journal-bookmark
   url: /docs/
   children:
-    - title: Documentation Home
-      url: /docs/
     - title: Installation
       url: /docs/installation/
     - title: Jekyll Guide

data/_data/roadmap.yml

@@ -1,3 +1,4 @@
+# Feature: ZER0-052
 # =============================================================================
 # zer0-mistakes Roadmap — Single Source of Truth
 # =============================================================================

data/_includes/README.md

@@ -18,10 +18,12 @@ Essential layout components that form the foundation of the site:
 All navigation-related components:
 
 - `navbar.html` - Main navigation menu
-- `sidebar-left.html` - Left sidebar with dynamic navigation
+- `sidebar-left.html` - Left sidebar panel (offcanvas shell around the resolved nav)
+- `sidebar-config.html` - Resolves the effective sidebar mode/title/icon (page → collection → site); shared by layout, header, sidebar, and drawer
+- `sidebar-nav.html` - Renders the resolved sidebar mode (dispatches to the includes below)
 - `sidebar-right.html` - Right sidebar content
-- `sidebar-folders.html` - Dynamic folder structure generation
-- `sidebar-categories.html` - Category-based navigation
+- `sidebar-folders.html` - "collection" mode: collapsible folder tree of a collection's documents
+- `sidebar-categories.html` - "categories"/"tags" modes: posts grouped by taxonomy term
 - `nav_list.html` - Manual navigation list rendering
 - `breadcrumbs.html` - Navigation breadcrumbs
 
@@ -37,12 +39,13 @@ Analytics and tracking integrations:
 
 Reusable UI components and widgets:
 
-- `searchbar.html` - Search functionality
+- `searchbar.html` - Deprecated search stub (superseded by `search-modal.html`)
 - `powered-by.html` - "Powered by" credits display
 - `quick-index.html` - Quick page index
 - `dev-shortcuts.html` - Developer shortcuts
-- `info-section.html` - Settings/info modal
-- `halfmoon.html` - Dark mode toggle
+- `info-section.html` - Settings offcanvas (Appearance / Site / Developer tabs)
+- `admin-links.html` - Cached admin quick links for the settings offcanvas
+- `halfmoon.html` - Light/dark/auto color-mode segmented control
 - `zer0-env-var.html` - Environment variable configuration
 - `svg.html` - SVG icon definitions
 - `js-cdn.html` - CDN JavaScript libraries
@@ -79,7 +82,7 @@ When including files in layouts or other templates, use the full path:
 ```liquid
 {% include core/head.html %}
 {% include navigation/sidebar-left.html %}
-{% include components/searchbar.html %}
+{% include components/search-modal.html %}
 {% include analytics/google-analytics.html %}
 ```
 

data/_includes/analytics/google-analytics.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-038 {% endcomment %}
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script>
     (function () {

data/_includes/analytics/google-tag-manager-body.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-039 {% endcomment %}
 <!-- Google Tag Manager (noscript) -->
     <noscript>
         <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NN8P7RZ" 

data/_includes/analytics/google-tag-manager-head.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-039 {% endcomment %}
 <!-- 
   title: Google Tag Manager 
   file: 

data/_includes/analytics/posthog.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-006 {% endcomment %}
 <!--
   ===================================================================
   POSTHOG ANALYTICS - Privacy-First Web Analytics Integration

data/_includes/components/README.md

@@ -87,7 +87,8 @@ If a component needs a token that doesn't exist yet, propose it in `_sass/tokens
 | Component                | Purpose                                              |
 |--------------------------|------------------------------------------------------|
 | `author-eeat.html`       | E-E-A-T author bio with Schema.org markup.           |
-| `info-section.html`      | Settings offcanvas with theme/appearance controls.    |
+| `admin-links.html`       | Cached admin quick links (settings offcanvas Site tab). |
+| `info-section.html`      | Settings offcanvas — Appearance / Site / Developer.   |
 | `js-cdn.html`            | Body-end script bundle.                               |
 | `search-modal.html`      | Global search modal.                                  |
 

data/_includes/components/admin-links.html

@@ -0,0 +1,63 @@
+{% comment %} Feature: ZER0-077 {% endcomment %}
+{%- comment -%}
+  Component:   admin-links
+  Path:        _includes/components/admin-links.html
+  Purpose:     "Admin" section of the settings offcanvas — quick links to the
+               built-in admin pages, each rendered only when the target page
+               exists in the build (prevents 404s on bare-minimum /
+               remote-theme sites that haven't created the admin pages).
+  Params:      none — site-scoped only. Include with {% include_cached %} so
+               the URL scan below runs once per build, not once per page.
+  Depends on:  site.pages, the `about` collection, Bootstrap list-group.
+  Notes:       Pure Liquid on purpose: local _plugins never load under the
+               github-pages gem (it forces safe mode and randomizes
+               plugins_dir), so a plugin-computed lookup is dead on GitHub
+               Pages and in the Docker dev server. Keep page.* out of this
+               file — it would poison the include cache.
+{%- endcomment -%}
+
+{%- assign _page_urls = site.pages | map: "url" | join: "|" -%}
+{%- assign _about_urls = "" -%}
+{%- if site.about -%}
+  {%- assign _about_urls = site.about | map: "url" | join: "|" -%}
+{%- endif -%}
+{%- capture _admin_urls -%}|{{ _page_urls }}|{{ _about_urls }}|{%- endcapture -%}
+
+{%- assign _cfg_page = false -%}
+{%- assign _theme_page = false -%}
+{%- assign _nav_page = false -%}
+{%- assign _env_page = false -%}
+{%- if _admin_urls contains "|/about/config/|" -%}{% assign _cfg_page = true %}{%- endif -%}
+{%- if _admin_urls contains "|/about/settings/theme/|" -%}{% assign _theme_page = true %}{%- endif -%}
+{%- if _admin_urls contains "|/about/settings/navigation/|" -%}{% assign _nav_page = true %}{%- endif -%}
+{%- if _admin_urls contains "|/about/settings/environment/|" -%}{% assign _env_page = true %}{%- endif -%}
+
+{% if _cfg_page or _theme_page or _nav_page or _env_page %}
+<div class="mb-3">
+  <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+    <i class="bi bi-speedometer2 me-1" aria-hidden="true"></i>Admin
+  </h6>
+  <div class="list-group list-group-flush small">
+    {% if _cfg_page %}
+    <a href="{{ '/about/config/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-gear me-2 text-body-secondary" aria-hidden="true"></i>Configuration
+    </a>
+    {% endif %}
+    {% if _theme_page %}
+    <a href="{{ '/about/settings/theme/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-palette me-2 text-body-secondary" aria-hidden="true"></i>Theme Customizer
+    </a>
+    {% endif %}
+    {% if _nav_page %}
+    <a href="{{ '/about/settings/navigation/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-signpost-2 me-2 text-body-secondary" aria-hidden="true"></i>Navigation Editor
+    </a>
+    {% endif %}
+    {% if _env_page %}
+    <a href="{{ '/about/settings/environment/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
+      <i class="bi bi-hdd-network me-2 text-body-secondary" aria-hidden="true"></i>Environment Dashboard
+    </a>
+    {% endif %}
+  </div>
+</div>
+{% endif %}

data/_includes/components/admin-tabs.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-050 {% endcomment %}
 <!--
   ===================================================================
   ADMIN TABS — Reusable tabbed interface for admin pages

data/_includes/components/ai-chat.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-060 {% endcomment %}
 {%- comment -%}
   Component:   ai-chat
   Path:        _includes/components/ai-chat.html
@@ -351,14 +352,35 @@
   @media (max-width: 576px) {
     #aiChatPanel {
       width: calc(100vw - 2rem);
-      right: 1rem;
-      bottom: 8rem;
+      right: var(--zer0-space-fab-offset, 1rem);
+      /* One gap above the toggle's slot (toggle is 3rem tall). */
+      bottom: calc(var(--zer0-space-fab-offset, 1rem) + var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem) + 3rem + var(--zer0-space-fab-gap, 0.75rem));
       max-height: 60vh;
     }
+  }
+
+  /* Below lg, pages with a sidebar/TOC render the mobile TOC FAB in this
+     same right-edge slot (offset + size + gap — see .bd-toc-fab in
+     _sass/layouts/_navbar-extras.scss). Step the chat toggle and panel one
+     slot higher there so the two buttons never overlap. */
+  @media (max-width: 991.98px) {
+    /* Cap the panel to the space between its anchored bottom (worst case:
+       the stepped-up slot below) and the fixed header — a 540px panel pokes
+       above short tablet/landscape viewports. */
+    #aiChatPanel {
+      max-height: min(60vh, calc(100vh
+        - var(--zer0-space-fab-offset, 1rem)
+        - 2 * (var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem))
+        - 3rem - var(--zer0-space-fab-gap, 0.75rem)
+        - 4rem));
+    }
+
+    body:has(#tocFab) #aiChatToggle {
+      bottom: calc(var(--zer0-space-fab-offset, 1rem) + 2 * (var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem)));
+    }
 
-    #aiChatToggle {
-      bottom: 4.5rem;
-      right: 1rem;
+    body:has(#tocFab) #aiChatPanel {
+      bottom: calc(var(--zer0-space-fab-offset, 1rem) + 2 * (var(--zer0-space-fab-size, 3.5rem) + var(--zer0-space-fab-gap, 0.75rem)) + 3rem + var(--zer0-space-fab-gap, 0.75rem));
     }
   }
 

data/_includes/components/author-eeat.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-054 {% endcomment %}
 <!--
   ===================================================================
   AUTHOR E-E-A-T BLOCK - Experience, Expertise, Authority, Trust

data/_includes/components/background-customizer.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-065 {% endcomment %}
 <!--
   ===================================================================
   BACKGROUND CUSTOMIZER — fffuel-style background settings panel

data/_includes/components/background-settings.html

@@ -1,17 +1,21 @@
+{% comment %} Feature: ZER0-077 {% endcomment %}
 <!--
   ===================================================================
   BACKGROUND SETTINGS — fffuel-style background controls (tab content)
   ===================================================================
-  
+
   File: background-settings.html
   Path: _includes/components/background-settings.html
-  Purpose: Background skin selector and opacity controls, rendered
-           inside the Settings offcanvas Background tab.
-  
+  Purpose: Theme-skin selector and SVG-background controls, rendered
+           inside the Settings offcanvas Appearance tab.
+
   Dependencies:
     - assets/js/background-customizer.js (zer0Bg API)
     - _sass/theme/_backgrounds.scss (CSS custom properties)
     - Bootstrap 5 form components
+
+  Section headings match the h6 pattern used by the parent
+  info-section.html so the Appearance tab reads as one surface.
   ===================================================================
 -->
 
@@ -21,9 +25,9 @@
 <!-- Skin selector -->
 <div class="mb-4">
   <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-    <i class="bi bi-palette2 me-1"></i>Theme Skin
+    <i class="bi bi-palette2 me-1" aria-hidden="true"></i>Theme Skin
   </h6>
-  <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons">
+  <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons" role="group" aria-label="Theme skin">
     {% for skin in skins %}
     <button class="btn btn-sm btn-outline-primary{% if skin == current_skin %} active{% endif %}"
             data-skin="{{ skin }}"
@@ -34,51 +38,48 @@
   </div>
 </div>
 
-<!-- Background toggle -->
+<!-- SVG background toggle + layer opacity -->
 <div class="mb-4">
   <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-    <i class="bi bi-image me-1"></i>SVG Backgrounds
+    <i class="bi bi-image me-1" aria-hidden="true"></i>Background
   </h6>
-  <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded">
-    <label class="form-check-label" for="zer0BgToggle">Enable SVG backgrounds</label>
+
+  <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded mb-3">
+    <label class="form-check-label" for="zer0BgToggle">SVG backgrounds</label>
     <div class="form-check form-switch mb-0">
       <input class="form-check-input" type="checkbox" id="zer0BgToggle" checked>
     </div>
   </div>
-</div>
-
-<!-- Opacity sliders -->
-<div class="mb-4">
-  <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-    <i class="bi bi-sliders2 me-1"></i>Layer Opacity
-  </h6>
 
   <div class="mb-3">
-    <label class="form-label small" for="zer0GradientOpacity">Gradient opacity</label>
+    <label class="form-label small d-flex justify-content-between mb-1" for="zer0GradientOpacity">
+      <span>Gradient opacity</span>
+      <span class="text-body-secondary" id="zer0GradientOpacityVal">0.6</span>
+    </label>
     <input type="range" class="form-range" id="zer0GradientOpacity"
            min="0" max="1" step="0.05" value="0.6">
-    <small class="text-body-secondary"><span id="zer0GradientOpacityVal">0.6</span></small>
   </div>
 
   <div class="mb-3">
-    <label class="form-label small" for="zer0TextureOpacity">Texture opacity</label>
+    <label class="form-label small d-flex justify-content-between mb-1" for="zer0TextureOpacity">
+      <span>Texture opacity</span>
+      <span class="text-body-secondary" id="zer0TextureOpacityVal">0.04</span>
+    </label>
     <input type="range" class="form-range" id="zer0TextureOpacity"
            min="0" max="0.2" step="0.005" value="0.04">
-    <small class="text-body-secondary"><span id="zer0TextureOpacityVal">0.04</span></small>
   </div>
 
   <div class="mb-3">
-    <label class="form-label small" for="zer0PatternOpacity">Pattern opacity</label>
+    <label class="form-label small d-flex justify-content-between mb-1" for="zer0PatternOpacity">
+      <span>Pattern opacity</span>
+      <span class="text-body-secondary" id="zer0PatternOpacityVal">0.08</span>
+    </label>
     <input type="range" class="form-range" id="zer0PatternOpacity"
            min="0" max="0.3" step="0.01" value="0.08">
-    <small class="text-body-secondary"><span id="zer0PatternOpacityVal">0.08</span></small>
   </div>
-</div>
 
-<!-- Reset -->
-<div>
-  <button class="btn btn-sm btn-outline-danger" id="zer0BgReset" type="button">
-    <i class="bi bi-arrow-counterclockwise me-1"></i>Reset to defaults
+  <button class="btn btn-sm btn-outline-secondary" id="zer0BgReset" type="button">
+    <i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset background
   </button>
 </div>
 
@@ -119,15 +120,13 @@ document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("zer0BgReset").addEventListener("click", function () {
     zer0Bg.setSkin("{{ current_skin }}");
     zer0Bg.toggle(true);
-    zer0Bg.setOpacity("gradient", 0.6);
-    zer0Bg.setOpacity("texture", 0.04);
-    zer0Bg.setOpacity("pattern", 0.08);
-    document.getElementById("zer0GradientOpacity").value = 0.6;
-    document.getElementById("zer0TextureOpacity").value = 0.04;
-    document.getElementById("zer0PatternOpacity").value = 0.08;
-    document.getElementById("zer0GradientOpacityVal").textContent = "0.6";
-    document.getElementById("zer0TextureOpacityVal").textContent = "0.04";
-    document.getElementById("zer0PatternOpacityVal").textContent = "0.08";
+    var defaults = { zer0GradientOpacity: "0.6", zer0TextureOpacity: "0.04", zer0PatternOpacity: "0.08" };
+    var layers = { zer0GradientOpacity: "gradient", zer0TextureOpacity: "texture", zer0PatternOpacity: "pattern" };
+    Object.keys(defaults).forEach(function (id) {
+      zer0Bg.setOpacity(layers[id], defaults[id]);
+      document.getElementById(id).value = defaults[id];
+      document.getElementById(id + "Val").textContent = defaults[id];
+    });
     toggle.checked = true;
     document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
     var active = document.querySelector('#zer0SkinButtons [data-skin="{{ current_skin }}"]');

data/_includes/components/component-showcase.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-071 {% endcomment %}
 <!--
   ===================================================================
   COMPONENT SHOWCASE - Live Bootstrap 5 demo gallery

data/_includes/components/cookie-consent.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-007 {% endcomment %}
 <!--
   ===================================================================
   COOKIE CONSENT - GDPR/CCPA Compliant Privacy Management

data/_includes/components/dev-shortcuts.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-077 {% endcomment %}
 <!--
   ===================================================================
   DEV SHORTCUTS - Source Code Quick Access Links
@@ -46,8 +47,6 @@
          target="_blank"
          rel="noopener"
          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
-         data-bs-toggle="tooltip"
-         data-bs-placement="left"
          title="View source file on GitHub">
         <span>
           <i class="bi bi-github me-2"></i>
@@ -61,8 +60,6 @@
          target="_blank"
          rel="noopener"
          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
-         data-bs-toggle="tooltip"
-         data-bs-placement="left"
          title="Open in browser-based VS Code editor">
         <span>
           <i class="bi bi-cloud me-2"></i>
@@ -76,8 +73,6 @@
         {% if git_home != "" %}
       <a href="vscode://file{{ vscode_full_path }}"
           class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
-          data-bs-toggle="tooltip"
-          data-bs-placement="left"
           title="Open in local VS Code (requires local clone at this path)">
         <span>
           <i class="bi bi-code-square me-2"></i>
@@ -102,8 +97,6 @@
          target="_blank"
          rel="noopener"
          class="btn btn-outline-secondary btn-sm d-flex align-items-center justify-content-between"
-         data-bs-toggle="tooltip"
-         data-bs-placement="left"
          title="View Jekyll site configuration">
         <span>
           <i class="bi bi-gear me-2"></i>