jekyll-theme-zer0 1.24.0 → 1.25.0

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>

data/_includes/components/env-switcher.html

@@ -1,26 +1,32 @@
+{% comment %} Feature: ZER0-077 {% endcomment %}
 <!--
   ===================================================================
   ENVIRONMENT SWITCHER - Dev/Prod URL Display and Toggle
   ===================================================================
-  
+
   File: env-switcher.html
   Path: _includes/components/env-switcher.html
   Purpose: Display current environment and provide URL switching
-  
+
   Dependencies:
-  - jekyll.environment: Build-time Jekyll env (production | development)
+  - is_production / build_env / is_local_url: set by env-detect.html
+    in info-section.html (the parent renders the section heading)
   - site.domain_url: Canonical production origin (YAML array joined in Liquid); not overridden by jekyll serve
   - site.url: Overwritten during jekyll serve — do not use alone for “Prod” quick links
   - site.port: Development port (default 4000)
+  - Copy buttons use data-zer0-copy / data-zer0-copy-target, handled by
+    the delegated listener in info-section.html (no inline handlers)
   - Bootstrap 5 components
-  
+
   Note: Docker / JEKYLL_ENV=production on localhost would show "Production"
   while you are clearly on a dev machine. We treat localhost / 127.0.0.1 / 0.0.0.0
   in site.url as development context for the badge and card styling.
+
+  Build time / Jekyll version live in theme-info.html (Theme & Build
+  section) — not duplicated here.
   ===================================================================
 -->
 
-{% comment %}is_production / build_env / is_local_url: set by env-detect.html in info-section.html{% endcomment %}
 {% assign dev_port = site.port | default: 4000 %}
 {% comment %}Prod links must not use site.url during serve (Jekyll sets it to 0.0.0.0:4000 etc.){% endcomment %}
 {% if site.domain_url %}
@@ -37,67 +43,53 @@
 <div class="card mb-3 {% if is_production %}border-success{% else %}border-warning{% endif %}">
   <div class="card-header d-flex align-items-center justify-content-between py-2 {% if is_production %}bg-success{% else %}bg-warning{% endif %} bg-opacity-10">
     <span class="fw-semibold">
-      <i class="bi {% if is_production %}bi-cloud-check{% else %}bi-pc-display{% endif %} me-2"></i>
+      <i class="bi {% if is_production %}bi-cloud-check{% else %}bi-pc-display{% endif %} me-2" aria-hidden="true"></i>
       Current Environment
     </span>
     {% if is_production %}
       <span class="badge bg-success">
-        <i class="bi bi-globe me-1"></i>Production
+        <i class="bi bi-globe me-1" aria-hidden="true"></i>Production
       </span>
     {% else %}
       <span class="badge bg-warning text-dark">
-        <i class="bi bi-code-slash me-1"></i>Dev
+        <i class="bi bi-code-slash me-1" aria-hidden="true"></i>Dev
       </span>
     {% endif %}
   </div>
   <div class="card-body">
     <!-- Active URL Display -->
-    <div class="mb-3">
-      <label class="form-label small text-body-secondary mb-1">
-        <i class="bi bi-link-45deg me-1"></i>Current Page URL
-      </label>
-      <div class="input-group input-group-sm">
-        <span class="input-group-text">
-          <i class="bi {% if is_production %}bi-lock{% else %}bi-unlock{% endif %}"></i>
-        </span>
-        <input type="text" 
-               class="form-control font-monospace" 
-               value="{% if is_production %}{{ prod_url }}{% else %}{{ dev_url }}{% endif %}{{ page.url }}" 
-               readonly 
-               id="currentUrlInput">
-        <button class="btn btn-outline-secondary" 
-                type="button" 
-                onclick="copyToClipboard('currentUrlInput', this)"
-                title="Copy to clipboard">
-          <i class="bi bi-clipboard"></i>
-        </button>
-      </div>
+    <label class="form-label small text-body-secondary mb-1" for="currentUrlInput">
+      <i class="bi bi-link-45deg me-1" aria-hidden="true"></i>Current Page URL
+    </label>
+    <div class="input-group input-group-sm">
+      <span class="input-group-text">
+        <i class="bi {% if is_production %}bi-lock{% else %}bi-unlock{% endif %}" aria-hidden="true"></i>
+      </span>
+      <input type="text"
+             class="form-control font-monospace"
+             value="{% if is_production %}{{ prod_url }}{% else %}{{ dev_url }}{% endif %}{{ page.url }}"
+             readonly
+             id="currentUrlInput">
+      <button class="btn btn-outline-secondary"
+              type="button"
+              data-zer0-copy-target="#currentUrlInput"
+              aria-label="Copy current page URL"
+              title="Copy to clipboard">
+        <i class="bi bi-clipboard" aria-hidden="true"></i>
+      </button>
     </div>
 
-    <!-- Build Info -->
-    <div class="row g-2 text-center mb-3">
-      <div class="col-6">
-        <div class="p-2 bg-body-tertiary rounded">
-          <small class="text-body-secondary d-block">Build Time</small>
-          <strong class="small">{{ site.time | date: "%b %d, %H:%M" }}</strong>
-        </div>
-      </div>
-      <div class="col-6">
-        <div class="p-2 bg-body-tertiary rounded">
-          <small class="text-body-secondary d-block">Jekyll</small>
-          <strong class="small">v{{ jekyll.version }}</strong>
-        </div>
-      </div>
-      <div class="col-12">
-        <div class="p-2 bg-body-tertiary rounded text-start">
-          <small class="text-body-secondary d-block">Build env (JEKYLL_ENV)</small>
-          <strong class="small font-monospace text-body">{{ build_env }}</strong>
-          {% if is_local_url and build_env == "production" %}
-            <div class="small text-body-secondary mt-1">Serving on a local URL — UI shows <strong>Dev</strong> above.</div>
-          {% endif %}
-        </div>
-      </div>
-    </div>
+    <!-- Build context -->
+    <p class="small text-body-secondary mb-0 mt-3">
+      Built with <code>JEKYLL_ENV={{ build_env }}</code>.
+      {% if is_production %}
+        Changes require deployment.
+      {% elsif is_local_url and build_env == "production" %}
+        Serving on a local URL — treated as <strong>Dev</strong>.
+      {% else %}
+        Changes auto-reload under <code>jekyll serve</code>.
+      {% endif %}
+    </p>
   </div>
 </div>
 
@@ -105,130 +97,90 @@
 <div class="card border-secondary">
   <div class="card-header py-2 bg-body-tertiary">
     <span class="fw-semibold small">
-      <i class="bi bi-signpost-2 me-2"></i>Quick Links
+      <i class="bi bi-signpost-2 me-2" aria-hidden="true"></i>Quick Links
     </span>
   </div>
   <ul class="list-group list-group-flush">
     <!-- Production URL -->
-    <li class="list-group-item d-flex justify-content-between align-items-center">
-      <div class="d-flex align-items-center">
+    <li class="list-group-item d-flex justify-content-between align-items-center gap-2">
+      <div class="d-flex align-items-center min-w-0">
         <span class="badge bg-success me-2">Prod</span>
-        <a href="{{ prod_url }}{{ page.url }}" 
-           target="_blank" 
-           rel="noopener" 
-           class="text-decoration-none font-monospace small text-truncate"
-           style="max-width: 180px;"
+        <a href="{{ prod_url }}{{ page.url }}"
+           target="_blank"
+           rel="noopener"
+           class="text-decoration-none font-monospace small text-truncate min-w-0"
            title="{{ prod_url }}{{ page.url }}">
-          {{ canonical_prod_origin | remove: "https://" | remove: "http://" | truncate: 25 }}{{ page.url | truncate: 15 }}
+          {{ canonical_prod_origin | remove: "https://" | remove: "http://" }}{{ page.url }}
         </a>
       </div>
-      <div class="btn-group btn-group-sm">
-        <a href="{{ prod_url }}{{ page.url }}" 
-           target="_blank" 
-           rel="noopener" 
-           class="btn btn-outline-success" 
+      <div class="btn-group btn-group-sm flex-shrink-0">
+        <a href="{{ prod_url }}{{ page.url }}"
+           target="_blank"
+           rel="noopener"
+           class="btn btn-outline-success"
+           aria-label="Open production URL in new tab"
            title="Open in new tab">
-          <i class="bi bi-box-arrow-up-right"></i>
+          <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
         </a>
-        <button class="btn btn-outline-secondary" 
+        <button class="btn btn-outline-secondary"
                 type="button"
-                onclick="copyUrl('{{ prod_url }}{{ page.url }}', this)"
+                data-zer0-copy="{{ prod_url }}{{ page.url }}"
+                aria-label="Copy production URL"
                 title="Copy URL">
-          <i class="bi bi-clipboard"></i>
+          <i class="bi bi-clipboard" aria-hidden="true"></i>
         </button>
       </div>
     </li>
 
     <!-- Development URL -->
-    <li class="list-group-item d-flex justify-content-between align-items-center">
-      <div class="d-flex align-items-center">
+    <li class="list-group-item d-flex justify-content-between align-items-center gap-2">
+      <div class="d-flex align-items-center min-w-0">
         <span class="badge bg-warning text-dark me-2">Dev</span>
-        <a href="{{ dev_url }}{{ page.url }}" 
-           target="_blank" 
-           rel="noopener" 
-           class="text-decoration-none font-monospace small text-truncate"
-           style="max-width: 180px;"
+        <a href="{{ dev_url }}{{ page.url }}"
+           target="_blank"
+           rel="noopener"
+           class="text-decoration-none font-monospace small text-truncate min-w-0"
            title="{{ dev_url }}{{ page.url }}">
-          localhost:{{ dev_port }}{{ page.url | truncate: 15 }}
+          localhost:{{ dev_port }}{{ page.url }}
         </a>
       </div>
-      <div class="btn-group btn-group-sm">
-        <a href="{{ dev_url }}{{ page.url }}" 
-           target="_blank" 
-           rel="noopener" 
-           class="btn btn-outline-warning" 
+      <div class="btn-group btn-group-sm flex-shrink-0">
+        <a href="{{ dev_url }}{{ page.url }}"
+           target="_blank"
+           rel="noopener"
+           class="btn btn-outline-warning"
+           aria-label="Open development URL in new tab"
            title="Open in new tab">
-          <i class="bi bi-box-arrow-up-right"></i>
+          <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
         </a>
-        <button class="btn btn-outline-secondary" 
+        <button class="btn btn-outline-secondary"
                 type="button"
-                onclick="copyUrl('{{ dev_url }}{{ page.url }}', this)"
+                data-zer0-copy="{{ dev_url }}{{ page.url }}"
+                aria-label="Copy development URL"
                 title="Copy URL">
-          <i class="bi bi-clipboard"></i>
+          <i class="bi bi-clipboard" aria-hidden="true"></i>
         </button>
       </div>
     </li>
 
     {% if site.repository %}
     <!-- GitHub Source -->
-    <li class="list-group-item d-flex justify-content-between align-items-center">
-      <div class="d-flex align-items-center">
+    <li class="list-group-item d-flex justify-content-between align-items-center gap-2">
+      <div class="d-flex align-items-center min-w-0">
         <span class="badge bg-dark me-2">Source</span>
-        <span class="font-monospace small text-truncate" style="max-width: 180px;">
+        <span class="font-monospace small text-truncate min-w-0">
           {{ page.path | split: "/" | last }}
         </span>
       </div>
-      <a href="https://github.com/{{ site.repository }}/blob/{{ site.branch | default: 'main' }}/{% if page.collection %}{{ site.collections_dir }}/{% endif %}{{ page.path }}" 
-         target="_blank" 
-         rel="noopener" 
-         class="btn btn-sm btn-outline-dark" 
+      <a href="https://github.com/{{ site.repository }}/blob/{{ site.branch | default: 'main' }}/{% if page.collection %}{{ site.collections_dir }}/{% endif %}{{ page.path }}"
+         target="_blank"
+         rel="noopener"
+         class="btn btn-sm btn-outline-dark flex-shrink-0"
+         aria-label="View source file on GitHub"
          title="View on GitHub">
-        <i class="bi bi-github"></i>
+        <i class="bi bi-github" aria-hidden="true"></i>
       </a>
     </li>
     {% endif %}
   </ul>
 </div>
-
-<!-- Environment Tip -->
-<div class="alert {% if is_production %}alert-success{% else %}alert-warning{% endif %} alert-dismissible fade show mt-3 py-2 small" role="alert">
-  <i class="bi bi-info-circle me-1"></i>
-  {% if is_production %}
-    Viewing <strong>production</strong> build. Changes require deployment.
-  {% else %}
-    <strong>Dev</strong> context{% if is_local_url and build_env == "production" %} (local URL; JEKYLL_ENV is production){% endif %}. Changes auto-reload when using <code>jekyll serve</code>.
-  {% endif %}
-  <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert" aria-label="Close" style="padding: 0.5rem;"></button>
-</div>
-
-<script>
-function copyToClipboard(inputId, btn) {
-  const input = document.getElementById(inputId);
-  navigator.clipboard.writeText(input.value).then(() => {
-    showCopyFeedback(btn, true);
-  }).catch(() => {
-    showCopyFeedback(btn, false);
-  });
-}
-
-function copyUrl(url, btn) {
-  navigator.clipboard.writeText(url).then(() => {
-    showCopyFeedback(btn, true);
-  }).catch(() => {
-    showCopyFeedback(btn, false);
-  });
-}
-
-function showCopyFeedback(btn, success) {
-  const originalHtml = btn.innerHTML;
-  btn.innerHTML = success ? '<i class="bi bi-check2"></i>' : '<i class="bi bi-x"></i>';
-  btn.classList.add(success ? 'btn-success' : 'btn-danger');
-  btn.classList.remove('btn-outline-secondary');
-  
-  setTimeout(() => {
-    btn.innerHTML = originalHtml;
-    btn.classList.remove('btn-success', 'btn-danger');
-    btn.classList.add('btn-outline-secondary');
-  }, 1500);
-}
-</script>

data/_includes/components/feature-card.html

@@ -42,7 +42,7 @@
       <i class="bi {{ icon }} {{ icon_color }} me-2"></i>
       {{ f.title }}
     </h5>
-    <p class="card-text">{{ f.description }}</p>
+    <p class="card-text">{{ f.description | escape }}</p>
 
     {% unless compact %}
       {% if f.features %}

data/_includes/components/halfmoon.html

@@ -1,46 +1,27 @@
-<!-- 
+{% comment %} Feature: ZER0-077 {% endcomment %}
+<!--
   file: halfmoon.html
-  path: _includes/halfmoon.html
-  description: Dark / light / auto theme switcher for the settings modal (Bootstrap dropdown).
+  path: _includes/components/halfmoon.html
+  description: Dark / light / auto color-mode switcher (segmented control).
+               Buttons carry data-bs-theme-value; assets/js/halfmoon.js wires
+               clicks, persistence (localStorage "theme") and active state.
+               No ids on purpose — the control may render more than once per
+               page (settings offcanvas + theme-controls-bar).
+  params:      class (string, optional, default "") — extra btn-group classes,
+               e.g. "w-100" to fill the parent.
  -->
 
-<div class="dropdown bd-theme-dropdown">
-  <button
-    type="button"
-    class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center justify-content-center px-2 py-2"
-    id="bd-theme"
-    data-bs-toggle="dropdown"
-    data-bs-popper-config='{"strategy":"fixed"}'
-    aria-expanded="false"
-    aria-haspopup="true"
-    aria-label="Toggle theme (dark)"
-  >
-    <svg class="bi theme-icon-active flex-shrink-0" width="1.15em" height="1.15em" fill="currentColor" aria-hidden="true">
-      <use href="#moon-stars-fill"></use>
-    </svg>
-    <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+<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">
+    <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">
+    <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">
+    <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>
-  <ul class="dropdown-menu dropdown-menu-end shadow-sm bd-theme-menu py-1" aria-labelledby="bd-theme">
-    <li>
-      <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-bs-theme-value="light" aria-pressed="false">
-        <svg class="bi flex-shrink-0 opacity-50" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#sun-fill"></use></svg>
-        <span>Light</span>
-        <svg class="bi ms-auto flex-shrink-0 d-none" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
-      </button>
-    </li>
-    <li>
-      <button type="button" class="dropdown-item d-flex align-items-center gap-2 active" data-bs-theme-value="dark" aria-pressed="true">
-        <svg class="bi flex-shrink-0 opacity-50" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
-        <span>Dark</span>
-        <svg class="bi ms-auto flex-shrink-0 d-none" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
-      </button>
-    </li>
-    <li>
-      <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-bs-theme-value="auto" aria-pressed="false">
-        <svg class="bi flex-shrink-0 opacity-50" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#circle-half"></use></svg>
-        <span>Auto</span>
-        <svg class="bi ms-auto flex-shrink-0 d-none" width="1em" height="1em" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
-      </button>
-    </li>
-  </ul>
 </div>