jekyll-theme-zer0 0.22.0 → 0.22.19

data/_includes/components/analytics-dashboard.html

@@ -0,0 +1,232 @@
+<!--
+  ===================================================================
+  ANALYTICS DASHBOARD — PostHog & tracking configuration overview
+  ===================================================================
+
+  File: analytics-dashboard.html
+  Path: _includes/components/analytics-dashboard.html
+  Purpose: Shows current analytics configuration, privacy settings,
+           and tracking status. Reads from site.posthog config.
+
+  Dependencies: Bootstrap 5 card/table/badge, site.posthog config
+  Used by: pages/_about/settings/analytics.md
+  ===================================================================
+-->
+
+{% assign ph = site.posthog %}
+
+<!-- Status cards -->
+<div class="row g-3 mb-4">
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 {% if ph.enabled %}border-success{% else %}border-warning{% endif %}">
+      <div class="card-body py-3">
+        <i class="bi bi-graph-up fs-3 {% if ph.enabled %}text-success{% else %}text-warning{% endif %}"></i>
+        <div class="fw-semibold mt-1">{{ ph.enabled | default: false }}</div>
+        <small class="text-body-secondary">PostHog Enabled</small>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 border-primary">
+      <div class="card-body py-3">
+        <i class="bi bi-shield-check fs-3 text-primary"></i>
+        <div class="fw-semibold mt-1">{{ ph.respect_dnt | default: false }}</div>
+        <small class="text-body-secondary">Respect DNT</small>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 border-primary">
+      <div class="card-body py-3">
+        <i class="bi bi-camera-video fs-3 text-primary"></i>
+        <div class="fw-semibold mt-1">{{ ph.session_recording | default: false }}</div>
+        <small class="text-body-secondary">Session Recording</small>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-lg-3">
+    <div class="card text-center h-100 border-primary">
+      <div class="card-body py-3">
+        <i class="bi bi-cookie fs-3 text-primary"></i>
+        <div class="fw-semibold mt-1">{{ ph.secure_cookie | default: false }}</div>
+        <small class="text-body-secondary">Secure Cookies</small>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Configuration Details -->
+<div class="row g-4">
+
+  <!-- PostHog Settings -->
+  <div class="col-lg-6">
+    <div class="card h-100">
+      <div class="card-header"><i class="bi bi-gear me-1"></i> PostHog Configuration</div>
+      <div class="card-body p-0">
+        <table class="table table-sm mb-0">
+          <tbody>
+            <tr>
+              <td class="fw-semibold">Enabled</td>
+              <td>
+                {% if ph.enabled %}
+                  <span class="badge bg-success">Yes</span>
+                {% else %}
+                  <span class="badge bg-secondary">No</span>
+                {% endif %}
+              </td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">API Host</td>
+              <td><code class="small">{{ ph.api_host | default: "not set" }}</code></td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Person Profiles</td>
+              <td><code class="small">{{ ph.person_profiles | default: "not set" }}</code></td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Autocapture</td>
+              <td>{{ ph.autocapture | default: false }}</td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Page Views</td>
+              <td>{{ ph.capture_pageview | default: false }}</td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Page Leave</td>
+              <td>{{ ph.capture_pageleave | default: false }}</td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Persistence</td>
+              <td><code class="small">{{ ph.persistence | default: "not set" }}</code></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Privacy & Compliance -->
+  <div class="col-lg-6">
+    <div class="card h-100">
+      <div class="card-header"><i class="bi bi-shield-lock me-1"></i> Privacy & Compliance</div>
+      <div class="card-body p-0">
+        <table class="table table-sm mb-0">
+          <tbody>
+            <tr>
+              <td class="fw-semibold">Respect Do Not Track</td>
+              <td>
+                {% if ph.respect_dnt %}
+                  <span class="badge bg-success">Yes</span>
+                {% else %}
+                  <span class="badge bg-warning">No</span>
+                {% endif %}
+              </td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Session Recording</td>
+              <td>
+                {% if ph.session_recording %}
+                  <span class="badge bg-warning">Enabled</span>
+                {% else %}
+                  <span class="badge bg-success">Disabled</span>
+                {% endif %}
+              </td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Disable Cookies</td>
+              <td>{{ ph.disable_cookie | default: false }}</td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Secure Cookies</td>
+              <td>
+                {% if ph.secure_cookie %}
+                  <span class="badge bg-success">Yes</span>
+                {% else %}
+                  <span class="badge bg-secondary">No</span>
+                {% endif %}
+              </td>
+            </tr>
+            <tr>
+              <td class="fw-semibold">Cross-Subdomain</td>
+              <td>{{ ph.cross_subdomain_cookie | default: false }}</td>
+            </tr>
+            {% if ph.privacy %}
+              <tr><td class="fw-semibold">Mask All Text</td><td>{{ ph.privacy.mask_all_text | default: false }}</td></tr>
+              <tr><td class="fw-semibold">Mask All Inputs</td><td>{{ ph.privacy.mask_all_inputs | default: false }}</td></tr>
+              <tr><td class="fw-semibold">IP Anonymization</td><td>{{ ph.privacy.ip_anonymization | default: false }}</td></tr>
+            {% endif %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Custom Events -->
+{% if ph.custom_events %}
+<h5 class="mt-4 mb-3"><i class="bi bi-lightning me-1"></i> Custom Event Tracking</h5>
+<div class="row g-3">
+  {% if ph.custom_events.track_downloads != nil %}
+    <div class="col-6 col-md-3">
+      <div class="card text-center">
+        <div class="card-body py-2">
+          <i class="bi bi-download fs-5 {% if ph.custom_events.track_downloads %}text-success{% else %}text-body-secondary{% endif %}"></i>
+          <div class="small fw-semibold mt-1">Downloads</div>
+          <span class="badge {% if ph.custom_events.track_downloads %}bg-success{% else %}bg-secondary{% endif %}">
+            {{ ph.custom_events.track_downloads }}
+          </span>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+  {% if ph.custom_events.track_external_links != nil %}
+    <div class="col-6 col-md-3">
+      <div class="card text-center">
+        <div class="card-body py-2">
+          <i class="bi bi-box-arrow-up-right fs-5 {% if ph.custom_events.track_external_links %}text-success{% else %}text-body-secondary{% endif %}"></i>
+          <div class="small fw-semibold mt-1">External Links</div>
+          <span class="badge {% if ph.custom_events.track_external_links %}bg-success{% else %}bg-secondary{% endif %}">
+            {{ ph.custom_events.track_external_links }}
+          </span>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+  {% if ph.custom_events.track_search != nil %}
+    <div class="col-6 col-md-3">
+      <div class="card text-center">
+        <div class="card-body py-2">
+          <i class="bi bi-search fs-5 {% if ph.custom_events.track_search %}text-success{% else %}text-body-secondary{% endif %}"></i>
+          <div class="small fw-semibold mt-1">Search</div>
+          <span class="badge {% if ph.custom_events.track_search %}bg-success{% else %}bg-secondary{% endif %}">
+            {{ ph.custom_events.track_search }}
+          </span>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+  {% if ph.custom_events.track_scroll_depth != nil %}
+    <div class="col-6 col-md-3">
+      <div class="card text-center">
+        <div class="card-body py-2">
+          <i class="bi bi-arrows-vertical fs-5 {% if ph.custom_events.track_scroll_depth %}text-success{% else %}text-body-secondary{% endif %}"></i>
+          <div class="small fw-semibold mt-1">Scroll Depth</div>
+          <span class="badge {% if ph.custom_events.track_scroll_depth %}bg-success{% else %}bg-secondary{% endif %}">
+            {{ ph.custom_events.track_scroll_depth }}
+          </span>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+</div>
+{% endif %}
+
+<!-- External Links -->
+<div class="mt-4">
+  <a href="https://us.posthog.com" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm me-2">
+    <i class="bi bi-box-arrow-up-right me-1"></i> Open PostHog Dashboard
+  </a>
+  <a href="{{ '/about/config/' | relative_url }}" class="btn btn-outline-secondary btn-sm">
+    <i class="bi bi-gear me-1"></i> Full Configuration
+  </a>
+</div>

data/_includes/components/background-customizer.html

@@ -0,0 +1,159 @@
+<!--
+  ===================================================================
+  BACKGROUND CUSTOMIZER — fffuel-style background settings panel
+  ===================================================================
+  
+  File: background-customizer.html
+  Path: _includes/components/background-customizer.html
+  Purpose: Bootstrap 5 offcanvas panel for switching skins and
+           tuning SVG background layers at runtime.
+  
+  Dependencies:
+    - assets/js/background-customizer.js (zer0Bg API)
+    - _sass/theme/_backgrounds.scss (CSS custom properties)
+    - Bootstrap 5 offcanvas + form components
+  ===================================================================
+-->
+
+{% assign skins = "air,aqua,contrast,dark,dirt,neon,mint,plum,sunrise" | split: "," %}
+{% assign current_skin = site.theme_skin | default: "dark" %}
+
+<!-- Floating toggle button -->
+<button class="btn btn-sm btn-outline-secondary position-fixed bottom-0 end-0 m-3 rounded-circle"
+        style="z-index: 1090; width: 40px; height: 40px;"
+        type="button"
+        data-bs-toggle="offcanvas"
+        data-bs-target="#zer0BgCustomizer"
+        aria-label="Customize background"
+        title="Background settings">
+  <i class="bi bi-palette2"></i>
+</button>
+
+<!-- Offcanvas panel -->
+<div class="offcanvas offcanvas-end" tabindex="-1" id="zer0BgCustomizer" aria-labelledby="zer0BgCustomizerLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="zer0BgCustomizerLabel">
+      <i class="bi bi-palette2 me-2"></i>Background Settings
+    </h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+
+  <div class="offcanvas-body">
+    <!-- Skin selector -->
+    <div class="mb-4">
+      <label class="form-label fw-semibold">Theme Skin</label>
+      <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons">
+        {% for skin in skins %}
+        <button class="btn btn-sm btn-outline-primary{% if skin == current_skin %} active{% endif %}"
+                data-skin="{{ skin }}"
+                type="button">
+          {{ skin | capitalize }}
+        </button>
+        {% endfor %}
+      </div>
+    </div>
+
+    <hr>
+
+    <!-- Background toggle -->
+    <div class="mb-3">
+      <div class="form-check form-switch">
+        <input class="form-check-input" type="checkbox" id="zer0BgToggle" checked>
+        <label class="form-check-label" for="zer0BgToggle">Enable SVG backgrounds</label>
+      </div>
+    </div>
+
+    <hr>
+
+    <!-- Opacity sliders -->
+    <div class="mb-3">
+      <label class="form-label" for="zer0GradientOpacity">Gradient opacity</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" for="zer0TextureOpacity">Texture opacity</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" for="zer0PatternOpacity">Pattern opacity</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>
+
+    <hr>
+
+    <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>
+  </div>
+</div>
+
+<!-- Customizer interaction logic -->
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  if (typeof zer0Bg === "undefined") return;
+
+  // Skin buttons
+  document.querySelectorAll("#zer0SkinButtons [data-skin]").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var skin = this.getAttribute("data-skin");
+      zer0Bg.setSkin(skin);
+      // Update active state
+      document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
+      this.classList.add("active");
+    });
+  });
+
+  // Background toggle
+  var toggle = document.getElementById("zer0BgToggle");
+  toggle.checked = document.documentElement.getAttribute("data-zer0-bg") !== "off";
+  toggle.addEventListener("change", function () { zer0Bg.toggle(this.checked); });
+
+  // Opacity sliders
+  function bindSlider(id, layer) {
+    var slider = document.getElementById(id);
+    var valSpan = document.getElementById(id + "Val");
+    slider.addEventListener("input", function () {
+      zer0Bg.setOpacity(layer, this.value);
+      valSpan.textContent = this.value;
+    });
+  }
+  bindSlider("zer0GradientOpacity", "gradient");
+  bindSlider("zer0TextureOpacity", "texture");
+  bindSlider("zer0PatternOpacity", "pattern");
+
+  // Reset
+  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";
+    toggle.checked = true;
+    // Re-highlight correct skin button
+    document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
+    var active = document.querySelector('#zer0SkinButtons [data-skin="{{ current_skin }}"]');
+    if (active) active.classList.add("active");
+  });
+
+  // Sync on external skin change events
+  document.addEventListener("zer0:skin-change", function (e) {
+    document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
+    var active = document.querySelector('#zer0SkinButtons [data-skin="' + e.detail.skin + '"]');
+    if (active) active.classList.add("active");
+  });
+});
+</script>

data/_includes/components/background-settings.html

@@ -0,0 +1,137 @@
+<!--
+  ===================================================================
+  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.
+  
+  Dependencies:
+    - assets/js/background-customizer.js (zer0Bg API)
+    - _sass/theme/_backgrounds.scss (CSS custom properties)
+    - Bootstrap 5 form components
+  ===================================================================
+-->
+
+{% assign skins = "air,aqua,contrast,dark,dirt,neon,mint,plum,sunrise" | split: "," %}
+{% assign current_skin = site.theme_skin | default: "dark" %}
+
+<!-- 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
+  </h6>
+  <div class="d-flex flex-wrap gap-2" id="zer0SkinButtons">
+    {% for skin in skins %}
+    <button class="btn btn-sm btn-outline-primary{% if skin == current_skin %} active{% endif %}"
+            data-skin="{{ skin }}"
+            type="button">
+      {{ skin | capitalize }}
+    </button>
+    {% endfor %}
+  </div>
+</div>
+
+<!-- Background toggle -->
+<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
+  </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="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>
+    <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>
+    <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>
+    <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>
+</div>
+
+<!-- Customizer interaction logic -->
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  if (typeof zer0Bg === "undefined") return;
+
+  // Skin buttons
+  document.querySelectorAll("#zer0SkinButtons [data-skin]").forEach(function (btn) {
+    btn.addEventListener("click", function () {
+      var skin = this.getAttribute("data-skin");
+      zer0Bg.setSkin(skin);
+      document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
+      this.classList.add("active");
+    });
+  });
+
+  // Background toggle
+  var toggle = document.getElementById("zer0BgToggle");
+  toggle.checked = document.documentElement.getAttribute("data-zer0-bg") !== "off";
+  toggle.addEventListener("change", function () { zer0Bg.toggle(this.checked); });
+
+  // Opacity sliders
+  function bindSlider(id, layer) {
+    var slider = document.getElementById(id);
+    var valSpan = document.getElementById(id + "Val");
+    slider.addEventListener("input", function () {
+      zer0Bg.setOpacity(layer, this.value);
+      valSpan.textContent = this.value;
+    });
+  }
+  bindSlider("zer0GradientOpacity", "gradient");
+  bindSlider("zer0TextureOpacity", "texture");
+  bindSlider("zer0PatternOpacity", "pattern");
+
+  // Reset
+  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";
+    toggle.checked = true;
+    document.querySelectorAll("#zer0SkinButtons .btn").forEach(function (b) { b.classList.remove("active"); });
+    var active = document.querySelector('#zer0SkinButtons [data-skin="{{ current_skin }}"]');
+    if (active) active.classList.add("active");
+  });
+});
+</script>