jekyll-theme-zer0 1.27.0 → 1.29.0

data/assets/js/obsidian-local-graph.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-045
 /*
  * obsidian-local-graph.js
  *
@@ -12,8 +13,13 @@
  * Subgraph:
  *   - center  = current page (matched against entry.url, falling back to
  *               normalized title/basename/aliases for permalink quirks)
- *   - depth   = configurable via data-depth attribute (default 1)
- *   - direction = both incoming and outgoing wiki-links
+ *   - depth   = 1–3, user-adjustable in the panel (default from the
+ *               data-depth attribute / `local_graph_depth` front matter)
+ *   - direction = outgoing and/or incoming wiki-links, user-toggleable
+ *
+ * Depth + direction preferences persist to localStorage
+ * (zer0.obsidianLocalGraph.v1) and the graph re-renders in place when they
+ * change — same for Bootstrap color-mode (data-bs-theme) switches.
  *
  * If the current page is in the wiki-index but has no local links, the panel
  * stays available and renders a single-node graph for the current page.
@@ -26,6 +32,7 @@
   var PANEL_SELECTOR = '[data-obsidian-local-graph-panel]';
   var TOGGLE_SELECTOR = '[data-obsidian-local-graph-toggle]';
   var STATUS_SELECTOR = '[data-obsidian-local-graph-status]';
+  var STORAGE_KEY = 'zer0.obsidianLocalGraph.v1';
 
   // Cytoscape is vendored under assets/vendor/ (no runtime CDN — matches the
   // Bootstrap / Icons / Mermaid policy). The path is supplied by Liquid via
@@ -57,6 +64,28 @@
       .replace(/"/g, '"').replace(/'/g, ''');
   }
 
+  // Depth + direction preferences. Depth falls back to the page's data-depth
+  // (front-matter `local_graph_depth`), directions default to both on.
+  function loadPrefs(defaultDepth) {
+    var prefs = { depth: defaultDepth, outgoing: true, incoming: true };
+    try {
+      var saved = JSON.parse(window.localStorage.getItem(STORAGE_KEY) || 'null');
+      if (saved && typeof saved === 'object') {
+        var d = parseInt(saved.depth, 10);
+        if (d >= 1 && d <= 3) prefs.depth = d;
+        if (typeof saved.outgoing === 'boolean') prefs.outgoing = saved.outgoing;
+        if (typeof saved.incoming === 'boolean') prefs.incoming = saved.incoming;
+      }
+    } catch (e) { /* private mode / corrupt payload — use defaults */ }
+    return prefs;
+  }
+
+  function savePrefs(prefs) {
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+    } catch (e) { /* storage unavailable — prefs are session-only */ }
+  }
+
   function companionElements(container) {
     return {
       panel: container.closest(PANEL_SELECTOR),
@@ -143,10 +172,11 @@
     return palette[name] || '#6c757d';
   }
 
-  // BFS from the current entry up to `depth` hops, following both
-  // outgoing edges and incoming edges (any other entry whose `outgoing`
-  // includes one of our keys).
-  function buildSubgraph(entries, lookup, current, depth) {
+  // BFS from the current entry up to `depth` hops. Directions are opt-in:
+  // opts.outgoing follows this page's [[links]], opts.incoming follows any
+  // other entry whose `outgoing` includes one of our keys.
+  function buildSubgraph(entries, lookup, current, depth, opts) {
+    opts = opts || { outgoing: true, incoming: true };
     var visited = Object.create(null);
     var queue = [{ entry: current, dist: 0 }];
     var nodes = [];
@@ -206,45 +236,49 @@
       if (item.dist >= depth) continue;
 
       // Outgoing edges
-      (entry.outgoing || []).forEach(function (target) {
-        var nk = normalize(target);
-        var resolved = lookup.byKey[nk];
-        if (resolved) {
-          if (resolved.url === entry.url) return;
-          addEdge(entry.url, resolved.url, false);
-          if (!visited[resolved.url]) {
-            queue.push({ entry: resolved, dist: item.dist + 1 });
+      if (opts.outgoing) {
+        (entry.outgoing || []).forEach(function (target) {
+          var nk = normalize(target);
+          var resolved = lookup.byKey[nk];
+          if (resolved) {
+            if (resolved.url === entry.url) return;
+            addEdge(entry.url, resolved.url, false);
+            if (!visited[resolved.url]) {
+              queue.push({ entry: resolved, dist: item.dist + 1 });
+            }
+          } else {
+            var brokenId = '__broken__:' + nk;
+            if (!visited[brokenId]) {
+              visited[brokenId] = true;
+              nodes.push({
+                group: 'nodes',
+                data: {
+                  id: brokenId,
+                  label: target,
+                  url: null,
+                  collection: 'broken',
+                  color: '#dc3545',
+                  broken: true
+                }
+              });
+            }
+            addEdge(entry.url, brokenId, true);
           }
-        } else {
-          var brokenId = '__broken__:' + nk;
-          if (!visited[brokenId]) {
-            visited[brokenId] = true;
-            nodes.push({
-              group: 'nodes',
-              data: {
-                id: brokenId,
-                label: target,
-                url: null,
-                collection: 'broken',
-                color: '#dc3545',
-                broken: true
-              }
-            });
-          }
-          addEdge(entry.url, brokenId, true);
-        }
-      });
+        });
+      }
 
       // Incoming edges (anyone whose outgoing matches one of our keys)
-      keysFor(entry).forEach(function (k) {
-        (reverse[k] || []).forEach(function (src) {
-          if (src.url === entry.url) return;
-          addEdge(src.url, entry.url, false);
-          if (!visited[src.url]) {
-            queue.push({ entry: src, dist: item.dist + 1 });
-          }
+      if (opts.incoming) {
+        keysFor(entry).forEach(function (k) {
+          (reverse[k] || []).forEach(function (src) {
+            if (src.url === entry.url) return;
+            addEdge(src.url, entry.url, false);
+            if (!visited[src.url]) {
+              queue.push({ entry: src, dist: item.dist + 1 });
+            }
+          });
         });
-      });
+      }
     }
 
     return nodes.concat(edges);
@@ -299,6 +333,11 @@
   }
 
   function render(container, elements, currentUrl) {
+    // Re-renders (depth/direction/theme changes) replace the prior instance.
+    if (container.__obsidianLocalGraph) {
+      try { container.__obsidianLocalGraph.destroy(); } catch (e) { /* ignore */ }
+      container.__obsidianLocalGraph = null;
+    }
     var theme = readTheme();
     container.style.backgroundColor = theme.canvasBg;
     var motion = prefersReducedMotion() ? '0ms' : '160ms';
@@ -460,6 +499,59 @@
     return nav;
   }
 
+  // Reflect prefs into the depth radio group + direction switches.
+  function syncControls(prefs) {
+    var radio = document.getElementById('obsidian-lg-depth-' + prefs.depth);
+    if (radio) radio.checked = true;
+    var outgoing = document.getElementById('obsidian-lg-outgoing');
+    if (outgoing) outgoing.checked = prefs.outgoing;
+    var incoming = document.getElementById('obsidian-lg-incoming');
+    if (incoming) incoming.checked = prefs.incoming;
+  }
+
+  function wireControls(prefs, rebuild) {
+    [1, 2, 3].forEach(function (d) {
+      var radio = document.getElementById('obsidian-lg-depth-' + d);
+      if (!radio) return;
+      radio.addEventListener('change', function () {
+        if (!radio.checked) return;
+        prefs.depth = d;
+        savePrefs(prefs);
+        rebuild();
+      });
+    });
+    var outgoing = document.getElementById('obsidian-lg-outgoing');
+    if (outgoing) {
+      outgoing.addEventListener('change', function () {
+        prefs.outgoing = outgoing.checked;
+        savePrefs(prefs);
+        rebuild();
+      });
+    }
+    var incoming = document.getElementById('obsidian-lg-incoming');
+    if (incoming) {
+      incoming.addEventListener('change', function () {
+        prefs.incoming = incoming.checked;
+        savePrefs(prefs);
+        rebuild();
+      });
+    }
+  }
+
+  // Re-render on Bootstrap color-mode changes so canvas colors track the
+  // theme without a reload. Local graphs are small — a full rebuild is cheap.
+  function watchTheme(rebuild) {
+    var restyle = debounce(rebuild, 60);
+    var observer = new MutationObserver(restyle);
+    [document.documentElement, document.body].forEach(function (el) {
+      observer.observe(el, { attributes: true, attributeFilter: ['data-bs-theme'] });
+    });
+    if (window.matchMedia) {
+      var mq = window.matchMedia('(prefers-color-scheme: dark)');
+      if (mq.addEventListener) mq.addEventListener('change', restyle);
+    }
+  }
+
   function init() {
     var container = document.getElementById(CONTAINER_ID);
     if (!container) return;
@@ -478,8 +570,9 @@
       resizeGraph(container);
     }, 150));
 
-    var depth = parseInt(container.getAttribute('data-depth') || '1', 10);
-    if (!isFinite(depth) || depth < 1) depth = 1;
+    var defaultDepth = parseInt(container.getAttribute('data-depth') || '1', 10);
+    if (!isFinite(defaultDepth) || defaultDepth < 1) defaultDepth = 1;
+    var prefs = loadPrefs(Math.min(defaultDepth, 3));
     var indexUrl = container.getAttribute('data-index-url') ||
       ((document.querySelector('base') || {}).href || '/') +
       'assets/data/wiki-index.json';
@@ -496,17 +589,21 @@
         // Confirmed in-index: reveal the panel + FAB now.
         setPanelAvailable(container, true);
         setStatus(container, 'Loading graph…', false);
-
-        var elements = buildSubgraph(entries, lookup, current, depth);
-        var nodeCount = elements.filter(function (element) { return element.group === 'nodes'; }).length;
-        var edgeCount = elements.filter(function (element) { return element.group === 'edges'; }).length;
-        // Accessible text fallback (also the graceful degradation if cytoscape
-        // can't load): a list of linked neighbours below the canvas.
-        var fallback = renderTextFallback(container, elements, current);
-
-        loadCytoscape(function (ok) {
-          if (ok === false) {
-            // Keep the text list visible; hide the empty canvas.
+        syncControls(prefs);
+
+        var graphAvailable = null; // unknown until loadCytoscape resolves
+
+        function rebuild() {
+          var elements = buildSubgraph(entries, lookup, current, prefs.depth, {
+            outgoing: prefs.outgoing,
+            incoming: prefs.incoming
+          });
+          var nodeCount = elements.filter(function (el) { return el.group === 'nodes'; }).length;
+          var edgeCount = elements.filter(function (el) { return el.group === 'edges'; }).length;
+          // Accessible text fallback (also the graceful degradation if
+          // cytoscape can't load): a list of linked neighbours below the canvas.
+          var fallback = renderTextFallback(container, elements, current);
+          if (graphAvailable === false) {
             container.hidden = true;
             setStatus(container, 'Showing linked pages (interactive graph unavailable).', false);
             return;
@@ -515,6 +612,16 @@
           setStatus(container, nodeCount + ' pages · ' + edgeCount + ' links', false);
           // Graph is the visual representation; keep the list for AT only.
           if (fallback) fallback.classList.add('visually-hidden');
+        }
+
+        wireControls(prefs, rebuild);
+        watchTheme(function () {
+          if (container.__obsidianLocalGraph) rebuild();
+        });
+
+        loadCytoscape(function (ok) {
+          graphAvailable = ok !== false;
+          rebuild();
         });
       })
       .catch(function (err) {

data/assets/js/page-views.js

@@ -0,0 +1,372 @@
+// Feature: ZER0-083
+/*
+ * ===================================================================
+ * page-views.js — page-view counter (tracking + display)
+ * ===================================================================
+ *
+ * File:    assets/js/page-views.js
+ * Purpose: Record a view for the current page and render the count into
+ *          every `[data-page-views]` badge on the page.
+ *
+ * Reads one JSON block injected by _includes/components/page-views-init.html:
+ *   #pageViewsConfig — provider, endpoint, privacy gates, labels
+ *
+ * Providers
+ *   local   (default) counts live in this visitor's localStorage. Zero
+ *           config, zero network, GitHub-Pages safe — the count is "how
+ *           often YOU opened this page", so it is honest without a server.
+ *   remote  counts come from an HTTP counter endpoint (the chat-proxy
+ *           worker, a self-hosted function, CounterAPI, …). The endpoint
+ *           owns the truth; this script only asks for it.
+ *
+ * Privacy
+ *   Do Not Track, Global Privacy Control, and (optionally) the theme's
+ *   cookie-consent "analytics" category all suppress RECORDING. Display of
+ *   an already-known count is never suppressed — nothing is collected to
+ *   show it. When consent is required and later granted, the pending view
+ *   is recorded on the `cookieConsentChanged` event.
+ *
+ * Public API (also what the Playwright spec drives):
+ *   window.zer0PageViews.get(path)   -> number | null
+ *   window.zer0PageViews.all()       -> { path: count }
+ *   window.zer0PageViews.refresh()   -> re-render every badge
+ *   window.zer0PageViews.reset()     -> clear the local store
+ * Event: `zer0:page-views` on document, detail { path, count, provider }.
+ * ===================================================================
+ */
+(function () {
+  "use strict";
+
+  var STORE_KEY = "zer0-page-views";
+  var SESSION_KEY = "zer0-page-views-session";
+  var STORE_VERSION = 1;
+
+  function readJSON(id, fallback) {
+    var el = document.getElementById(id);
+    if (!el) return fallback;
+    try {
+      return JSON.parse(el.textContent);
+    } catch (err) {
+      return fallback;
+    }
+  }
+
+  var CONFIG = readJSON("pageViewsConfig", null);
+  if (!CONFIG || !CONFIG.enabled) return;
+
+  // --- storage helpers --------------------------------------------------
+  // Private-mode Safari and "block all cookies" throw on access, not on use,
+  // so every touch is wrapped: the widget degrades to "no count" rather than
+  // taking the page down with it.
+  function safeStorage(kind) {
+    try {
+      var s = window[kind];
+      var probe = "__zer0_probe__";
+      s.setItem(probe, "1");
+      s.removeItem(probe);
+      return s;
+    } catch (err) {
+      return null;
+    }
+  }
+
+  var local = safeStorage("localStorage");
+  var session = safeStorage("sessionStorage");
+
+  function readStore() {
+    if (!local) return { v: STORE_VERSION, paths: {} };
+    try {
+      var raw = JSON.parse(local.getItem(STORE_KEY));
+      if (raw && raw.paths && typeof raw.paths === "object") return raw;
+    } catch (err) {
+      /* corrupt payload — start clean rather than throwing */
+    }
+    return { v: STORE_VERSION, paths: {} };
+  }
+
+  function writeStore(store) {
+    if (!local) return;
+    try {
+      local.setItem(STORE_KEY, JSON.stringify(store));
+    } catch (err) {
+      /* quota exceeded — the count is a nicety, never a hard failure */
+    }
+  }
+
+  // Keep the store bounded: evict the least-recently-viewed paths first.
+  function prune(store) {
+    var max = CONFIG.maxEntries > 0 ? CONFIG.maxEntries : 500;
+    var keys = Object.keys(store.paths);
+    if (keys.length <= max) return store;
+    keys
+      .sort(function (a, b) {
+        return (store.paths[a].t || 0) - (store.paths[b].t || 0);
+      })
+      .slice(0, keys.length - max)
+      .forEach(function (key) {
+        delete store.paths[key];
+      });
+    return store;
+  }
+
+  // --- paths ------------------------------------------------------------
+  // Badges carry site-relative, baseurl-free paths (page.url), so the
+  // runtime location has to be normalized the same way or a project-pages
+  // site would count "/repo/foo/" separately from "/foo/".
+  function normalizePath(input) {
+    var path = input;
+    try {
+      path = new URL(input, window.location.href).pathname;
+    } catch (err) {
+      /* already a bare path */
+    }
+    var base = CONFIG.baseurl || "";
+    if (base && path.indexOf(base) === 0) path = path.slice(base.length);
+    path = path.replace(/index\.html?$/, "");
+    if (path.charAt(0) !== "/") path = "/" + path;
+    if (path.charAt(path.length - 1) !== "/" && !/\.[a-z0-9]+$/i.test(path)) path += "/";
+    return path;
+  }
+
+  var CURRENT = normalizePath(window.location.pathname);
+
+  // --- privacy gates ----------------------------------------------------
+  function dntEnabled() {
+    if (!CONFIG.respectDnt) return false;
+    var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
+    return dnt === "1" || dnt === "yes";
+  }
+
+  function gpcEnabled() {
+    return !!CONFIG.respectGpc && navigator.globalPrivacyControl === true;
+  }
+
+  function analyticsConsented() {
+    if (window.cookieConsent && typeof window.cookieConsent.analytics === "boolean") {
+      return window.cookieConsent.analytics;
+    }
+    if (!local) return false;
+    try {
+      var stored = JSON.parse(local.getItem("zer0-cookie-consent"));
+      return !!(stored && stored.analytics);
+    } catch (err) {
+      return false;
+    }
+  }
+
+  function mayRecord() {
+    if (!CONFIG.track) return false;
+    if (dntEnabled() || gpcEnabled()) return false;
+    if (CONFIG.requireConsent && !analyticsConsented()) return false;
+    return true;
+  }
+
+  // One view per path per browser session, so a reload or a back-navigation
+  // does not inflate the number. `dedupe: "never"` counts every load.
+  function alreadyCountedThisSession(path) {
+    if (CONFIG.dedupe !== "session" || !session) return false;
+    try {
+      var seen = JSON.parse(session.getItem(SESSION_KEY)) || [];
+      return seen.indexOf(path) !== -1;
+    } catch (err) {
+      return false;
+    }
+  }
+
+  function markCountedThisSession(path) {
+    if (CONFIG.dedupe !== "session" || !session) return;
+    try {
+      var seen = JSON.parse(session.getItem(SESSION_KEY)) || [];
+      if (seen.indexOf(path) === -1) seen.push(path);
+      session.setItem(SESSION_KEY, JSON.stringify(seen));
+    } catch (err) {
+      /* non-fatal */
+    }
+  }
+
+  // --- counts -----------------------------------------------------------
+  var counts = {};
+
+  function seedFromLocalStore() {
+    var store = readStore();
+    Object.keys(store.paths).forEach(function (path) {
+      var entry = store.paths[path];
+      if (entry && typeof entry.c === "number") counts[path] = entry.c;
+    });
+  }
+
+  function recordLocal(path) {
+    var store = readStore();
+    var entry = store.paths[path] || { c: 0, t: 0 };
+    entry.c += 1;
+    entry.t = Date.now();
+    store.paths[path] = entry;
+    writeStore(prune(store));
+    return entry.c;
+  }
+
+  // Pull a count out of an arbitrary JSON body, e.g. countKey "data.views".
+  function pluck(payload, key) {
+    var value = payload;
+    var parts = String(key || "views").split(".");
+    for (var i = 0; i < parts.length; i++) {
+      if (value === null || typeof value !== "object") return null;
+      value = value[parts[i]];
+    }
+    return typeof value === "number" && isFinite(value) ? value : null;
+  }
+
+  function remoteUrl(path) {
+    var endpoint = CONFIG.endpoint || "";
+    if (endpoint.indexOf("{path}") !== -1) {
+      return endpoint.replace("{path}", encodeURIComponent(path));
+    }
+    return endpoint + (endpoint.indexOf("?") === -1 ? "?" : "&") + "path=" + encodeURIComponent(path);
+  }
+
+  function recordRemote(path, record) {
+    var method = record ? CONFIG.method || "POST" : "GET";
+    var init = { method: method, credentials: "omit", mode: "cors" };
+    if (method !== "GET" && method !== "HEAD") {
+      init.headers = { "Content-Type": "application/json" };
+      init.body = JSON.stringify({ path: path });
+    }
+    return fetch(remoteUrl(path), init)
+      .then(function (res) {
+        if (!res.ok) throw new Error("page-views: endpoint returned " + res.status);
+        return res.json();
+      })
+      .then(function (payload) {
+        var count = pluck(payload, CONFIG.countKey);
+        if (count === null) throw new Error("page-views: no count at '" + CONFIG.countKey + "'");
+        return count;
+      });
+  }
+
+  // --- rendering --------------------------------------------------------
+  var formatter = null;
+  try {
+    formatter = new Intl.NumberFormat();
+  } catch (err) {
+    formatter = null;
+  }
+
+  function format(count) {
+    return formatter ? formatter.format(count) : String(count);
+  }
+
+  function render() {
+    var badges = document.querySelectorAll("[data-page-views]");
+    Array.prototype.forEach.call(badges, function (badge) {
+      var path = normalizePath(badge.getAttribute("data-page-views") || CURRENT);
+      var count = counts[path];
+      if (typeof count !== "number") return; // unknown → stays hidden, no "0 views" flash
+      var countEl = badge.querySelector("[data-page-views-count]");
+      var labelEl = badge.querySelector("[data-page-views-label]");
+      if (countEl) countEl.textContent = format(count);
+      if (labelEl) labelEl.textContent = count === 1 ? CONFIG.labelOne : CONFIG.labelOther;
+      badge.removeAttribute("hidden");
+    });
+  }
+
+  function publish(path, count) {
+    counts[path] = count;
+    render();
+    document.dispatchEvent(
+      new CustomEvent("zer0:page-views", {
+        detail: { path: path, count: count, provider: CONFIG.provider }
+      })
+    );
+  }
+
+  // --- orchestration ----------------------------------------------------
+  var recorded = false;
+
+  function recordCurrentView() {
+    if (recorded || !mayRecord()) return;
+    if (alreadyCountedThisSession(CURRENT)) return;
+    recorded = true;
+    markCountedThisSession(CURRENT);
+
+    if (CONFIG.provider === "remote") {
+      recordRemote(CURRENT, true)
+        .then(function (count) {
+          publish(CURRENT, count);
+        })
+        .catch(function (err) {
+          if (CONFIG.fallbackLocal) publish(CURRENT, recordLocal(CURRENT));
+          if (window.console && console.debug) console.debug(String(err));
+        });
+      return;
+    }
+    publish(CURRENT, recordLocal(CURRENT));
+  }
+
+  function readOnlyRemote() {
+    // Recording is blocked (DNT/GPC/consent) but a remote count is public
+    // information — show it without contributing to it.
+    recordRemote(CURRENT, false)
+      .then(function (count) {
+        publish(CURRENT, count);
+      })
+      .catch(function () {
+        /* endpoint unavailable — badges stay hidden */
+      });
+  }
+
+  function start() {
+    if (CONFIG.provider !== "remote") seedFromLocalStore();
+    render();
+
+    if (mayRecord()) {
+      recordCurrentView();
+    } else if (CONFIG.provider === "remote") {
+      readOnlyRemote();
+    }
+
+    // Consent can arrive after load — record the pending view when it does.
+    if (CONFIG.requireConsent) {
+      document.addEventListener("cookieConsentChanged", function () {
+        recordCurrentView();
+      });
+    }
+  }
+
+  window.zer0PageViews = {
+    get: function (path) {
+      var count = counts[normalizePath(path || CURRENT)];
+      return typeof count === "number" ? count : null;
+    },
+    all: function () {
+      var copy = {};
+      Object.keys(counts).forEach(function (path) {
+        copy[path] = counts[path];
+      });
+      return copy;
+    },
+    refresh: render,
+    reset: function () {
+      counts = {};
+      if (local) {
+        try {
+          local.removeItem(STORE_KEY);
+        } catch (err) {
+          /* non-fatal */
+        }
+      }
+      if (session) {
+        try {
+          session.removeItem(SESSION_KEY);
+        } catch (err) {
+          /* non-fatal */
+        }
+      }
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    start();
+  }
+})();