jekyll-theme-zer0 1.29.0 → 1.31.0

data/assets/js/ai-chat.js

@@ -28,8 +28,10 @@
  * the tool_result back, and continues the loop.
  *
  * Security:
- * - Proxy mode (recommended) keeps the Anthropic key and GitHub token
- *   server-side; the browser only ever talks to the same-origin proxy.
+ * - Proxy mode (recommended) keeps the provider key and GitHub token
+ *   server-side; the browser only ever talks to the same-origin proxy,
+ *   which answers with Claude or Grok (the reply is always Anthropic
+ *   Messages SSE — the proxy translates for xAI).
  * - Direct mode sends x-api-key from the page and requires the
  *   anthropic-dangerous-direct-browser-access header — local dev only.
  * - GitHub "url" mode never touches a token: it opens pre-filled
@@ -586,14 +588,53 @@
 
     // URL mode: open a pre-filled github.com form — the user submits it
     // with their own account, so no token is ever needed in the browser.
-    var params = new URLSearchParams();
-    params.set('title', String(inputData.title).slice(0, 256));
+    //
+    // The URL is composed by the shared fleet builder (FleetFeedbackCore, in
+    // assets/js/fleet-feedback.js) when the page-feedback widget is enabled,
+    // which is what removed the THIRD hand-rolled issue-URL builder in this
+    // theme. Two things come with it: the same `<!-- fleet-feedback v1 -->`
+    // marker the issue pipeline reads, and a real over-budget path — this used
+    // to `.slice(0, 6000)` the body, silently dropping whatever Claude had
+    // written past that point, with nobody the wiser.
     var body = String(inputData.body);
     if (meta.page_url && body.indexOf(meta.page_url) === -1) {
       body += '\n\n---\nPage: ' + meta.page_url;
     }
-    params.set('body', body.slice(0, 6000));
     var labels = mergedLabels(inputData.labels);
+    var title = String(inputData.title).slice(0, 256);
+    var FF = window.FleetFeedbackCore;
+
+    if (FF) {
+      var issue = {
+        title: title,
+        // The chat writes prose, not a capture, so it fills the description
+        // slot whole; only the footer is contributed by the contract.
+        sections: {
+          description: body,
+          footer: '---\n_Filed from ' + (meta.page_url || location.href) +
+            ' via the AI chat assistant (fleet-feedback v' + FF.VERSION + ')._\n' +
+            '<!-- fleet-feedback v1 type=chat -->'
+        },
+        labels: labels,
+        assignees: []
+      };
+      var built = FF.buildUrl(issue, { repo: CONFIG.github.repository });
+      var win = window.open(built.url, '_blank', 'noopener');
+      if (!win) {
+        return toolResult(block.id, 'The browser blocked the pop-up, so no issue form opened. Ask the user to allow pop-ups for this site and try again.', true);
+      }
+      if (built.overBudget && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(built.fullBody).catch(function () {});
+        return toolResult(block.id, 'A pre-filled GitHub issue form was opened in a new browser tab. The report was too long for the URL, so the full text was copied to the user clipboard — tell them to paste it over the pre-filled body before submitting.');
+      }
+      return toolResult(block.id, 'A pre-filled GitHub issue form was opened in a new browser tab. The user reviews and submits it there (a GitHub account is required).');
+    }
+
+    // No page-feedback widget on this site, so the shared builder is not
+    // loaded. Compose the URL directly; the body is capped rather than trimmed.
+    var params = new URLSearchParams();
+    params.set('title', title);
+    params.set('body', body.slice(0, 6000));
     if (labels.length) params.set('labels', labels.join(','));
     window.open('https://github.com/' + CONFIG.github.repository + '/issues/new?' + params.toString(), '_blank', 'noopener');
     return toolResult(block.id, 'A pre-filled GitHub issue form was opened in a new browser tab. The user reviews and submits it there (a GitHub account is required).');
@@ -735,6 +776,7 @@
         var accumulated = '';
         var payload = {
           model: CONFIG.model,
+          provider: CONFIG.provider || 'anthropic', // honoured by the proxy only when that provider has a key
           max_tokens: CONFIG.maxTokens,
           system: buildSystemPrompt(meta),
           messages: history.slice(),

data/assets/js/auto-hide-nav.js

@@ -34,21 +34,61 @@
         // The measured height is also published as --zer0-header-height so
         // stylesheets (theme or consumer) can align overlays with the real
         // header instead of hard-coding its pixel height.
-        function updateBodyPadding() {
-            const navbarHeight = navbar.offsetHeight;
-            document.body.style.paddingTop = navbarHeight + 'px';
-            document.documentElement.style.setProperty('--zer0-header-height', navbarHeight + 'px');
+        //
+        // Layout is never read synchronously here. Reading navbar.offsetHeight
+        // at DOMContentLoaded (and again on every resize) forced a style +
+        // layout pass while stylesheets were still settling (Lighthouse
+        // "forced reflow", ~233ms per read on a throttled phone). Instead:
+        //   - ResizeObserver delivers the navbar's border-box height after the
+        //     browser's own layout pass, before paint, so the padding still
+        //     lands in the first frame;
+        //   - without ResizeObserver, the read happens in a requestAnimationFrame
+        //     callback, and the write in the frame after it, so a read never
+        //     follows a write in the same pass;
+        //   - the last height is cached and nothing is written when it is
+        //     unchanged.
+        let lastNavbarHeight = -1;
+
+        function applyNavbarHeight(height) {
+            height = Math.round(height);
+            if (height === lastNavbarHeight) return;
+            lastNavbarHeight = height;
+            document.body.style.paddingTop = height + 'px';
+            document.documentElement.style.setProperty('--zer0-header-height', height + 'px');
         }
 
-        // Initial padding setup
-        updateBodyPadding();
-
-        // Update padding on window resize with debounce
-        let resizeTimeout;
-        window.addEventListener('resize', function() {
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(updateBodyPadding, 150);
-        }, { passive: true });
+        if (typeof window.ResizeObserver === 'function') {
+            const navbarObserver = new ResizeObserver(function(entries) {
+                const entry = entries[entries.length - 1];
+                const box = entry.borderBoxSize && (entry.borderBoxSize[0] || entry.borderBoxSize);
+                // Layout is already clean inside a ResizeObserver callback, so
+                // the offsetHeight fallback (old engines without borderBoxSize)
+                // does not force a reflow.
+                applyNavbarHeight(box && box.blockSize ? box.blockSize : entry.target.offsetHeight);
+            });
+            navbarObserver.observe(navbar);
+        } else {
+            let measureQueued = false;
+            const measureNavbar = function() {
+                if (measureQueued) return;
+                measureQueued = true;
+                window.requestAnimationFrame(function() {
+                    const height = navbar.offsetHeight; // read
+                    window.requestAnimationFrame(function() {
+                        measureQueued = false;
+                        applyNavbarHeight(height); // write, next frame
+                    });
+                });
+            };
+            measureNavbar();
+
+            // Update padding on window resize with debounce
+            let resizeTimeout;
+            window.addEventListener('resize', function() {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(measureNavbar, 150);
+            }, { passive: true });
+        }
 
         // Enhanced scroll handler with better logic
         function handleScroll() {

data/assets/js/code-copy.js

@@ -1,4 +1,53 @@
 // Feature: ZER0-030
+//
+// CONSUMER CONTRACT — code-block extension points (#412).
+// ------------------------------------------------------
+// `.code-block-header` is built HERE, at runtime, not emitted at build time, so
+// a consumer adding a second action to code blocks has nothing in the markup to
+// hook. Before this contract existed the only route was a `MutationObserver`
+// over `#main-content` plus a guess at the wrapper's shape — and wrapper
+// nesting is exactly what a theme refactor changes, so the guess was one
+// release away from breaking. it-journey#634 got it wrong and silently rendered
+// two buttons on every block (26 across 13) until it added a claim marker.
+//
+// Two ways in, both stable:
+//
+//   document.addEventListener('zer0:code-block-ready', function (e) {
+//     e.detail; // { wrapper, header, pre, code, lang }
+//   });
+//
+//   window.zer0OnCodeBlock(function (detail) { … });   // same shape, REPLAYED
+//
+// The event bubbles from the wrapper, fires exactly once per code block, and is
+// dispatched after the block is fully decorated — line numbers, a11y attributes
+// and the copy button are all in place before a consumer sees it. `header` is
+// null for a standalone `<pre>` outside a Rouge wrapper, which has no header
+// row; `lang` is null when the block declares no language.
+//
+// Because the sweep runs on `DOMContentLoaded`, a listener registered later
+// would miss every block — so `window.__zer0CodeBlocks` holds the detail of
+// every block already processed, and `zer0OnCodeBlock` replays that array
+// before subscribing. Late registration is the NORMAL case for a deferred
+// consumer script, not an edge case.
+//
+// Docs: docs/development/EXTENSION-POINTS.md
+window.__zer0CodeBlocks = window.__zer0CodeBlocks || [];
+
+window.zer0OnCodeBlock = function (listener) {
+  if (typeof listener !== 'function') return function () {};
+  window.__zer0CodeBlocks.forEach(function (detail) {
+    listener(detail);
+  });
+  var handler = function (event) {
+    listener(event.detail);
+  };
+  document.addEventListener('zer0:code-block-ready', handler);
+  // Returned so a consumer can stop listening; harmless to ignore.
+  return function () {
+    document.removeEventListener('zer0:code-block-ready', handler);
+  };
+};
+
 document.addEventListener('DOMContentLoaded', function () {
   var LANG_LABELS = {
     shell: 'bash',
@@ -157,12 +206,18 @@ document.addEventListener('DOMContentLoaded', function () {
       });
     });
 
+    var wrapper;
+    var header = null;
     if (rougeWrapper) {
-      var header = ensureHeader(rougeWrapper, lang);
+      wrapper = rougeWrapper;
+      header = ensureHeader(rougeWrapper, lang);
       header.appendChild(button);
       rougeWrapper.classList.toggle('code-block--single-line', isSingleLine);
       rougeWrapper.closest('.highlighter-rouge').classList.add('has-code-header');
     } else {
+      // A standalone <pre> is its own wrapper and has no header row: the copy
+      // button is positioned against the <pre> itself.
+      wrapper = preElement;
       if (getComputedStyle(preElement).position === 'static') {
         preElement.style.position = 'relative';
       }
@@ -171,5 +226,21 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     preElement.classList.add('has-copy-button');
+
+    // Published LAST, so a consumer never sees a half-decorated block. Exactly
+    // once per block: `preElements` is a Set, and the `.copy` guard above makes
+    // a second sweep over the same block a no-op. See the contract at the top.
+    var detail = {
+      wrapper: wrapper,
+      header: header,
+      pre: preElement,
+      code: codeElement,
+      lang: lang
+    };
+    window.__zer0CodeBlocks.push(detail);
+    wrapper.dispatchEvent(new CustomEvent('zer0:code-block-ready', {
+      bubbles: true,
+      detail: detail
+    }));
   });
 });

data/assets/js/extension-points-demo.js

@@ -0,0 +1,48 @@
+// =============================================================================
+// extension-points-demo.js — a live consumer of the theme's extension points
+// =============================================================================
+//
+// Loaded ONLY by /docs/customization/extension-points/, through that page's
+// `scripts:` frontmatter — which makes this file a demonstration of two
+// contracts at once: the per-page script hook that loads it, and the
+// `zer0:code-block-ready` event it subscribes to.
+//
+// It is deliberately the whole pattern in a dozen lines. The point of #412 is
+// that a consumer adding an action to a code block should not need a
+// MutationObserver, a timeout fallback, or a guess at how deeply the theme
+// nests its wrappers — all three of which it-journey#634 had to carry, and the
+// wrapper guess is what silently produced two buttons per block.
+//
+// Copy this shape. `zer0OnCodeBlock` replays the blocks that were decorated
+// before this script ran, then subscribes for any that follow, so it does not
+// matter whether you load early or late.
+// =============================================================================
+(function () {
+  'use strict';
+
+  if (typeof window.zer0OnCodeBlock !== 'function') return;
+
+  window.zer0OnCodeBlock(function (detail) {
+    // A standalone <pre> outside a Rouge wrapper has no header row to hang an
+    // action on. `header` is null there, and that is the documented signal.
+    if (!detail.header) return;
+    if (detail.header.querySelector('.zer0-demo-action')) return;
+
+    var lines = (detail.code.textContent || '').replace(/\n$/, '').split('\n').length;
+
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'zer0-demo-action';
+    button.textContent = lines + (lines === 1 ? ' line' : ' lines');
+    button.setAttribute(
+      'aria-label',
+      'This ' + (detail.lang || 'code') + ' block has ' + lines + ' lines'
+    );
+    button.addEventListener('click', function () {
+      detail.pre.focus();
+    });
+
+    // Before the copy button, so Copy keeps its place at the end of the row.
+    detail.header.insertBefore(button, detail.header.querySelector('.copy'));
+  });
+})();

data/assets/js/fleet-feedback-capture.js

@@ -0,0 +1,124 @@
+/*!
+ * fleet-feedback capture v0.2.0 — the early console/error ring buffer.
+ * Source: bamr87/bamr87 templates/feedback/ (spec: specs/FEEDBACK.md, UPS-FB-04).
+ *
+ * Load this FIRST — before any other script, as high in <head> as you can get
+ * it — so the errors that happen during page load are in the buffer by the time
+ * a reader opens the feedback dialog. fleet-feedback.js installs the same
+ * buffer if this file is absent, but by then the interesting failures have
+ * already happened silently.
+ *
+ *   <script src="/assets/js/fleet-feedback-capture.js"></script>     <!-- Jekyll/Django -->
+ *   <Script src="/fleet-feedback-capture.js" strategy="beforeInteractive" />  <!-- Next.js -->
+ *
+ * Small enough to inline verbatim into a <script> tag when a extra request
+ * costs more than the bytes (the Jekyll adapter does exactly that).
+ *
+ * Contract — window.__fleetFeedback:
+ *   logs        [{ t: ISO-8601, level: 'warn'|'error'|'net', msg: string }]
+ *   limit       ring size (default 40)
+ *   installed   true once the hooks are in place; a second load is a no-op
+ *   version     kit version that installed it
+ *   breadcrumb(level, message)  push a structured entry (fetch wrappers use this)
+ *   snapshot()  a copy of the buffer, newest last
+ *   clear()     empty it
+ *
+ * Privacy: in-memory only. Never persisted, never transmitted, never read until
+ * the reader opens the dialog, previews the lines, and submits. Every entry is
+ * redacted (bearer tokens, API keys, JWTs, email addresses) and truncated.
+ */
+/* fleet-feedback:capture:begin — byte-identical in fleet-feedback.js (tests/contract.test.mjs asserts it) */
+(function (root) {
+  'use strict';
+
+  var VERSION = '0.2.0';
+  var LIMIT = 40;
+  var MAX_ENTRY = 600;
+
+  var g = (root.__fleetFeedback = root.__fleetFeedback || {
+    logs: [],
+    limit: LIMIT,
+    installed: false,
+    version: VERSION
+  });
+  if (g.installed) { return; }
+
+  // Secrets end up in console output far more often than anyone expects — an
+  // Authorization header logged by a fetch wrapper, a signed URL in a 403, a
+  // user's address in a validation message. Redact BEFORE the line enters the
+  // buffer, so it can never be previewed, copied, or filed.
+  var SCRUB = [
+    // The credential can carry a scheme word of its own ("Authorization: Bearer
+    // <token>"), and a rule that stops at the scheme leaves the secret in the
+    // buffer — which is exactly what the first version of this did.
+    [/\b(authorization|proxy-authorization|bearer|token|api[-_]?key|access[-_]?token|refresh[-_]?token|client[-_]?secret|secret|password|passwd)(\s*[:=]\s*|\s+)((?:bearer|basic|digest|token)\s+)?([^\s,;"'&]{6,})/gi, '$1$2$3***'],
+    [/\beyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]+/g, '***jwt***'],
+    [/\bgh[pousr]_[A-Za-z0-9]{16,}/g, '***github-token***'],
+    [/\bsk-[A-Za-z0-9_-]{16,}/g, '***api-key***'],
+    [/\b[\w.+-]+@[\w-]+\.[\w.-]{2,}\b/g, '***@***']
+  ];
+
+  function redact(text) {
+    var out = String(text == null ? '' : text);
+    for (var i = 0; i < SCRUB.length; i++) {
+      out = out.replace(SCRUB[i][0], SCRUB[i][1]);
+    }
+    return out;
+  }
+
+  function stringify(value) {
+    if (typeof value === 'string') { return value; }
+    if (value instanceof Error) {
+      return (value.name || 'Error') + ': ' + (value.message || '') +
+        (value.stack ? '\n' + String(value.stack).split('\n').slice(1, 4).join('\n') : '');
+    }
+    try { return JSON.stringify(value); } catch (e) { return String(value); }
+  }
+
+  function push(level, parts) {
+    try {
+      var line = redact(parts.map(stringify).join(' '));
+      if (line.length > MAX_ENTRY) { line = line.slice(0, MAX_ENTRY) + '…'; }
+      g.logs.push({ t: new Date().toISOString(), level: level, msg: line });
+      while (g.logs.length > g.limit) { g.logs.shift(); }
+    } catch (e) { /* capture must never break the page it is watching */ }
+  }
+
+  // Only warn/error are hooked. console.log is noise at this budget — 40 lines
+  // of debug chatter push the actual failure out of a ring this size.
+  if (root.console) {
+    ['warn', 'error'].forEach(function (level) {
+      var original = root.console[level];
+      root.console[level] = function () {
+        push(level, Array.prototype.slice.call(arguments));
+        if (original) { return original.apply(root.console, arguments); }
+      };
+    });
+  }
+
+  if (root.addEventListener) {
+    root.addEventListener('error', function (e) {
+      if (!e) { return; }
+      var where = e.filename ? ' (' + e.filename + ':' + (e.lineno || 0) + ':' + (e.colno || 0) + ')' : '';
+      push('error', [(e.message || 'Uncaught error') + where]);
+    });
+    root.addEventListener('unhandledrejection', function (e) {
+      var reason = e && e.reason;
+      push('error', ['Unhandled promise rejection:', reason && reason.message ? reason.message : reason]);
+    });
+  }
+
+  g.version = VERSION;
+  g.installed = true;
+  g.redact = redact;
+  /**
+   * Push a structured entry. An app's fetch wrapper calls this on a failed
+   * request so the report carries the API call that broke, not just the
+   * exception it surfaced as:
+   *   FF.breadcrumb('net', 'GET /api/analysis → 502 (1243ms) req=abc123')
+   */
+  g.breadcrumb = function (level, message) { push(level || 'net', [message]); };
+  g.snapshot = function () { return g.logs.slice(); };
+  g.clear = function () { g.logs.length = 0; };
+})(typeof window !== 'undefined' ? window : globalThis);
+/* fleet-feedback:capture:end */