jekyll-theme-zer0 1.29.0 → 1.31.0

data/_includes/navigation/sidebar-config.html

@@ -16,8 +16,13 @@
                                      "categories", "tags", or the name of a
                                      _data/navigation/*.yml file (nil = none)
                sidebar_has_content — true only when sidebar_nav will actually
-                                     render items (gates the left column and
-                                     the mobile toggle)
+                                     render items (gates the left column)
+               sidebar_offcanvas_rendered
+                                   — true only when the CURRENT LAYOUT emits
+                                     the #bdSidebar / #tocContents offcanvases
+                                     at all. sidebar_has_content is not enough
+                                     to gate a toggle: see the note at the
+                                     bottom of this file (issue #373).
                sidebar_title       — heading text for the sidebar panel
                sidebar_icon        — Bootstrap Icons class for the heading
   Config precedence (most specific wins):
@@ -134,3 +139,32 @@
 {%- if page.sidebar.icon -%}
   {%- assign sidebar_icon = page.sidebar.icon -%}
 {%- endif -%}
+
+{%- comment -%}
+  7. Does THIS LAYOUT actually render the offcanvas panels? (issue #373)
+
+  `sidebar_has_content` answers "is there nav content", which is what gates the
+  left column inside _layouts/default.html. It is NOT sufficient to gate the
+  TOGGLES, because core/header.html and core/footer-fabs.html are included from
+  _layouts/root.html — so they render on every layout, while `#bdSidebar`
+  (navigation/sidebar-left.html) and `#tocContents` (navigation/sidebar-right.html)
+  are emitted by _layouts/default.html alone.
+
+  The result was a dead control plus a dangling ARIA reference on every page
+  whose layout inherits `root` directly: measured at 37 pages of a 415-page
+  build, including all of `/about/**` (layout: admin) and 404/CHANGELOG.
+  Clicking did nothing, and assistive tech followed aria-controls to an element
+  that was not there.
+
+  There is no Liquid API for "resolve the layout inheritance chain", so the set
+  of layouts that reach default.html is listed here explicitly. It is pinned by
+  a test (test/test_core.sh :: test_sidebar_offcanvas_layout_gate) that reads
+  the front matter of every _layouts/*.html and fails if reality drifts from
+  this list — the same invariant pattern #425 used for the pixel-gate filter.
+  Add a layout here when, and only when, its `layout:` chain reaches default.
+{%- endcomment -%}
+{%- assign _sidebar_offcanvas_layouts = "default,article,author,authors,collection,cookbook,note,notebook,recipe,tag" | split: "," -%}
+{%- assign sidebar_offcanvas_rendered = false -%}
+{%- if _sidebar_offcanvas_layouts contains page.layout -%}
+  {%- assign sidebar_offcanvas_rendered = true -%}
+{%- endif -%}

data/_includes/navigation/sidebar-left.html

@@ -1,5 +1,5 @@
 {% comment %} Feature: ZER0-008 {% endcomment %}
-<!--
+{% comment %}
   ===================================================================
   SIDEBAR LEFT - Dynamic Navigation Sidebar
   ===================================================================
@@ -27,14 +27,14 @@
   - Heading text/icon: page.sidebar.title/icon → collection metadata →
     site.sidebar.title/icon → "Browse docs"
   ===================================================================
--->
+{% endcomment %}
 
 {% include navigation/sidebar-config.html %}
 
-<!-- ================================ -->
-<!-- SIDEBAR NAVIGATION CONTAINER   -->
-<!-- ================================ -->
-<!-- Responsive offcanvas sidebar - full-width on mobile, fixed on desktop -->
+{% comment %} ================================ {% endcomment %}
+{% comment %} SIDEBAR NAVIGATION CONTAINER   {% endcomment %}
+{% comment %} ================================ {% endcomment %}
+{% comment %} Responsive offcanvas sidebar - full-width on mobile, fixed on desktop {% endcomment %}
 <script>
   try {
     if (localStorage.getItem('zer0-nav-sidebar-visible') === 'false') {
@@ -44,10 +44,10 @@
 </script>
 <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
 
-  <!-- ========================== -->
-  <!-- SIDEBAR HEADER            -->
-  <!-- ========================== -->
-  <!-- Mobile-only header with close button -->
+  {% comment %} ========================== {% endcomment %}
+  {% comment %} SIDEBAR HEADER            {% endcomment %}
+  {% comment %} ========================== {% endcomment %}
+  {% comment %} Mobile-only header with close button {% endcomment %}
   <div class="offcanvas-header">
     <h2 class="offcanvas-title h5 mb-0" id="bdSidebarOffcanvasLabel">{{ sidebar_title }}</h2>
     <div class="d-flex align-items-center gap-1">
@@ -63,10 +63,10 @@
     </div>
   </div>
 
-  <!-- ========================== -->
-  <!-- SIDEBAR CONTENT AREA      -->
-  <!-- ========================== -->
-  <!-- Scrollable content area with dynamic navigation options -->
+  {% comment %} ========================== {% endcomment %}
+  {% comment %} SIDEBAR CONTENT AREA      {% endcomment %}
+  {% comment %} ========================== {% endcomment %}
+  {% comment %} Scrollable content area with dynamic navigation options {% endcomment %}
   <div class="offcanvas-body overflow-auto">
 
     <div class="bd-sidebar-desktop-header mb-3 d-none d-lg-flex align-items-center justify-content-between gap-2 w-100">
@@ -86,7 +86,7 @@
       </button>
     </div>
 
-    <!-- Resolved navigation content (see navigation/sidebar-nav.html) -->
+    {% comment %} Resolved navigation content (see navigation/sidebar-nav.html) {% endcomment %}
     {% include navigation/sidebar-nav.html id="sidebar-content" %}
 
   </div>

data/_includes/navigation/sidebar-right.html

@@ -1,12 +1,12 @@
 {% comment %} Features: ZER0-008, ZER0-010 {% endcomment %}
-<!-- 
+{% comment %} 
   file: sidebar-right.html 
   path: _includes/sidebar-right.html
   includes: nav_list.html, content/toc.html
--->
+{% endcomment %}
 
 {%- include core/i18n.html -%}
-<!-- FOUC guard: apply hidden TOC preference before paint -->
+{% comment %} FOUC guard: apply hidden TOC preference before paint {% endcomment %}
 <script>
   try {
     if (localStorage.getItem('zer0-nav-toc-visible') === 'false') {
@@ -15,7 +15,7 @@
   } catch (e) {}
 </script>
 
-<!-- Right sidebar container -->
+{% comment %} Right sidebar container {% endcomment %}
 <div class="offcanvas-lg offcanvas-end" tabindex="-1" id="tocContents" aria-labelledby="tocLabel">
   <div class="offcanvas-header">
     <h2 class="offcanvas-title h5 mb-0" id="tocLabel">{{ ui.toc_title | default: "Table of Contents" }}</h2>
@@ -32,9 +32,9 @@
     </div>
   </div>
   <div class="offcanvas-body">
-    <!-- Table of contents -->
+    {% comment %} Table of contents {% endcomment %}
     <nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
-      <!-- TOC title -->
+      {% comment %} TOC title {% endcomment %}
       <div class="mb-3 d-flex align-items-center justify-content-between gap-2">
         <strong class="d-flex align-items-center mb-0">
           <i class="bi bi-file-text me-2" aria-hidden="true"></i>

data/_includes/obsidian/full-graph.html

@@ -197,9 +197,9 @@ unresolved targets show up as dashed red nodes so you can find dangling
 links at a glance. The graph is regenerated every Jekyll build; nothing
 runs client-side except cytoscape's force layout.
 
-<!-- Cytoscape.js is vendored (no runtime CDN) and lazy-loaded by
+{% comment %} Cytoscape.js is vendored (no runtime CDN) and lazy-loaded by
      obsidian-graph.js from window.OBSIDIAN_CONFIG.cytoscapeUrl, only on this
-     page, with an in-page recovery message if the fetch fails. -->
+     page, with an in-page recovery message if the fetch fails. {% endcomment %}
 {% if site.obsidian.enabled != false %}
 <script src="{{ '/assets/js/obsidian-graph.js' | relative_url }}?v={{ site.time | date: '%s' }}" defer></script>
 {% endif %}

data/_includes/setup/claude-session.html

@@ -0,0 +1,72 @@
+{% comment %} Feature: ZER0-086, ZER0-087 {% endcomment %}
+{%- comment -%}
+  Component:   setup/claude-session
+  Path:        _includes/setup/claude-session.html
+  Purpose:     The embedded AI session that rides alongside every Site
+               Builder step: connection state, provider + mode badges,
+               transcript, suggested prompts, and the composer with a Stop
+               button for long tool runs. The assistant (Claude or Grok —
+               whichever the Connect step connected) sees the whole wizard
+               state on every turn and acts on it through tools (fill fields,
+               run checks, read theme source, write or modify the project,
+               generate images, run Docker).
+  Params:      none — configured by #siteBuilderConfig in setup/wizard.html
+  Depends on:  Bootstrap 5.3 + Icons, assets/js/site-builder.js,
+               _sass/components/_setup-wizard.scss
+  Notes:
+    - Proxy-only. Nothing renders a credential; the panel shows a connect
+      prompt until GET {endpoint}/status answers AND the chosen provider has
+      a key (data-ready="true"), then goes live.
+    - Rendering is escape-first (a limited Markdown subset); action cards are
+      built with createElement/textContent — see ai-chat.instructions.md.
+    - role="log" + aria-live so screen readers hear replies; Escape does not
+      close the panel (it is a page region, not a dialog).
+{%- endcomment -%}
+
+<section class="sb-panel card" id="siteBuilderPanel" aria-labelledby="sb-title" data-state="offline" data-ready="false" data-mode="guided">
+  <div class="card-header d-flex align-items-center justify-content-between gap-2 py-2">
+    <div class="d-flex align-items-center gap-2 min-w-0">
+      <i class="bi bi-stars" aria-hidden="true"></i>
+      <h2 class="h6 mb-0 text-truncate" id="sb-title">AI session</h2>
+      <span class="badge rounded-pill text-bg-light border sb-mode-badge" id="sb-mode-badge" hidden>guided</span>
+    </div>
+    <div class="d-flex align-items-center gap-2">
+      <span class="sb-status-badge badge rounded-pill text-bg-secondary" id="sb-status-badge" aria-live="polite">offline</span>
+      <button class="btn btn-sm btn-link text-body p-0" type="button" id="sb-clear" title="Clear the conversation" aria-label="Clear the conversation">
+        <i class="bi bi-eraser" aria-hidden="true"></i>
+      </button>
+      <button class="btn btn-sm btn-link text-body p-0" type="button" id="sb-collapse" aria-expanded="true" aria-controls="sb-body" title="Collapse">
+        <i class="bi bi-chevron-up" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+
+  <div class="sb-body" id="sb-body">
+    <div class="sb-messages p-3" id="sb-messages" role="log" aria-live="polite" aria-relevant="additions">
+      <div class="sb-offline text-body-secondary small" id="sb-offline">
+        <p class="mb-1"><strong>Not connected.</strong> Start the dev proxy and connect Claude or Grok on step 1. The assistant can then read your answers, fill in the forms, check your machine, read the theme's source, write or modify your project, generate images and run the build.</p>
+        <p class="mb-0">Everything else on this page works without it.</p>
+      </div>
+    </div>
+
+    <div class="sb-chips px-3 pb-2 d-flex gap-2 flex-wrap" id="sb-chips" aria-label="Suggested prompts"></div>
+
+    <form class="sb-composer p-3 pt-0" id="sb-form" autocomplete="off">
+      <label for="sb-input" class="visually-hidden">Message the assistant</label>
+      <div class="input-group">
+        <textarea class="form-control" id="sb-input" rows="1" maxlength="6000"
+                  placeholder="Connect a provider to start chatting" disabled></textarea>
+        <button class="btn btn-primary" type="submit" id="sb-send" aria-label="Send" disabled>
+          <i class="bi bi-send" aria-hidden="true"></i>
+        </button>
+        <button class="btn btn-outline-danger" type="button" id="sb-stop" aria-label="Stop the current run" hidden disabled>
+          <i class="bi bi-stop-fill" aria-hidden="true"></i> Stop
+        </button>
+      </div>
+      <div class="d-flex justify-content-between align-items-center mt-1">
+        <small class="text-body-secondary sb-disclaimer" id="sb-disclaimer">The assistant sees every answer on this page. Actions ask for confirmation first.</small>
+        <small class="text-body-secondary" id="sb-context-note"></small>
+      </div>
+    </form>
+  </div>
+</section>

data/_includes/setup/prereq-checklist.html

@@ -0,0 +1,90 @@
+{% comment %} Feature: ZER0-086 {% endcomment %}
+{%- comment -%}
+  Component:   setup/prereq-checklist
+  Path:        _includes/setup/prereq-checklist.html
+  Purpose:     The Prerequisites step of the Site Builder — one row per tool
+               from _data/site_builder.yml with live check state, a manual
+               "done" toggle, and per-OS install + verify commands that mirror
+               pages/_quickstart/machine-setup.md.
+  Params:      none — reads site.data.site_builder.prerequisites
+  Depends on:  Bootstrap 5.3 + Icons, assets/js/setup-wizard.js (OS picker,
+               manual toggles, copy buttons), assets/js/site-builder.js
+               (live checks via the dev proxy's POST /api/wizard/check)
+  Notes:       Fully usable offline — the checks are an enhancement. The OS
+               picker defaults from navigator.platform in JS; the markup
+               defaults to macOS so the page is meaningful without JS.
+{%- endcomment -%}
+
+{% assign prereqs = site.data.site_builder.prerequisites %}
+
+<div class="prereq-toolbar d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
+  <div class="btn-group btn-group-sm" role="group" aria-label="Operating system" id="prereq-os">
+    <input type="radio" class="btn-check" name="prereq-os" id="prereq-os-macos" value="macos" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="prereq-os-macos"><i class="bi bi-apple" aria-hidden="true"></i> macOS</label>
+    <input type="radio" class="btn-check" name="prereq-os" id="prereq-os-windows" value="windows" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="prereq-os-windows"><i class="bi bi-windows" aria-hidden="true"></i> Windows</label>
+    <input type="radio" class="btn-check" name="prereq-os" id="prereq-os-linux" value="linux" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="prereq-os-linux"><i class="bi bi-ubuntu" aria-hidden="true"></i> Linux</label>
+  </div>
+  <div class="d-flex align-items-center gap-2">
+    <span class="small text-body-secondary" id="prereq-summary" aria-live="polite">0 of 0 required ready</span>
+    <button class="btn btn-sm btn-primary sb-needs-proxy" type="button" id="btn-run-checks" disabled
+            title="Runs a fixed set of read-only version checks through the local dev proxy">
+      <i class="bi bi-play-circle" aria-hidden="true"></i> Run checks
+    </button>
+  </div>
+</div>
+
+<ul class="list-group prereq-list mb-3" id="prereq-list">
+  {% for p in prereqs %}
+  <li class="list-group-item prereq-item" data-prereq="{{ p.id }}" data-check="{{ p.check }}"
+      data-required="{{ p.required }}" data-state="unknown">
+    <div class="d-flex align-items-start gap-3">
+      <span class="prereq-state-icon mt-1" aria-hidden="true"><i class="bi {{ p.icon }}"></i></span>
+      <div class="flex-grow-1 min-w-0">
+        <div class="d-flex flex-wrap align-items-center gap-2">
+          <span class="fw-semibold">{{ p.label }}</span>
+          {% if p.required %}
+          <span class="badge text-bg-primary rounded-pill">required</span>
+          {% else %}
+          <span class="badge text-bg-secondary rounded-pill">recommended</span>
+          {% endif %}
+          <span class="badge rounded-pill prereq-state-badge" aria-live="polite">not checked</span>
+        </div>
+        <p class="small text-body-secondary mb-1">{{ p.why }}</p>
+        <p class="small mb-2 prereq-output text-body-secondary font-monospace" hidden></p>
+
+        <details class="prereq-details small">
+          <summary>Install &amp; verify</summary>
+          <div class="mt-2">
+            <div class="prereq-install">
+              <span class="text-body-secondary">Install</span>
+              <div class="wizard-cmd" data-os="macos"><code>{{ p.install.macos }}</code><button class="btn btn-sm btn-link" type="button" data-copy="{{ p.install.macos | escape }}" aria-label="Copy install command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>
+              <div class="wizard-cmd" data-os="windows" hidden><code>{{ p.install.windows }}</code><button class="btn btn-sm btn-link" type="button" data-copy="{{ p.install.windows | escape }}" aria-label="Copy install command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>
+              <div class="wizard-cmd" data-os="linux" hidden><code>{{ p.install.linux }}</code><button class="btn btn-sm btn-link" type="button" data-copy="{{ p.install.linux | escape }}" aria-label="Copy install command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>
+            </div>
+            <div class="prereq-verify mt-2">
+              <span class="text-body-secondary">Verify</span>
+              <div class="wizard-cmd"><code>{{ p.verify }}</code><button class="btn btn-sm btn-link" type="button" data-copy="{{ p.verify | escape }}" aria-label="Copy verify command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></div>
+            </div>
+            {% if p.docs %}
+            <a class="d-inline-block mt-2" href="{{ p.docs }}" target="_blank" rel="noopener">Docs <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i></a>
+            {% endif %}
+          </div>
+        </details>
+      </div>
+      <div class="form-check form-switch flex-shrink-0 ms-auto">
+        <input class="form-check-input prereq-manual" type="checkbox" id="prereq-{{ p.id }}" data-prereq="{{ p.id }}">
+        <label class="form-check-label small" for="prereq-{{ p.id }}">Done</label>
+      </div>
+    </div>
+  </li>
+  {% endfor %}
+</ul>
+
+<div class="alert alert-light border small mb-0">
+  <i class="bi bi-lightbulb" aria-hidden="true"></i>
+  On macOS you can install everything at once:
+  <span class="wizard-cmd d-inline-flex"><code id="cmd-brew-all">brew install git gh node && brew install --cask docker visual-studio-code</code><button class="btn btn-sm btn-link" type="button" data-copy-target="#cmd-brew-all" aria-label="Copy command"><i class="bi bi-clipboard" aria-hidden="true"></i></button></span>
+  Full guide: <a href="{{ '/quickstart/machine-setup/' | relative_url }}">Machine Setup</a>.
+</div>