jekyll-theme-zer0 1.20.2 → 1.22.0

data/assets/js/obsidian-graph.js

@@ -34,6 +34,48 @@
     return String(value || '').toLowerCase().trim().replace(/\s+/g, ' ');
   }
 
+  function prefersReducedMotion() {
+    return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  }
+
+  // Cytoscape is vendored under assets/vendor/ (no runtime CDN). Path comes from
+  // window.OBSIDIAN_CONFIG.cytoscapeUrl (set by Liquid), with a base fallback.
+  function cytoscapeSrc() {
+    var cfg = window.OBSIDIAN_CONFIG || {};
+    if (cfg.cytoscapeUrl) return cfg.cytoscapeUrl;
+    var base = (document.querySelector('base') || {}).href || '/';
+    return base.replace(/\/$/, '') + '/assets/vendor/cytoscape/cytoscape.min.js';
+  }
+
+  // Load cytoscape, coordinating with obsidian-local-graph.js via the shared
+  // window.__obsidianCytoscapeLoading queue. cb(true) on success, cb(false) on
+  // failure so the caller can show a recovery message.
+  function loadCytoscape(cb) {
+    if (typeof window.cytoscape === 'function') return cb(true);
+    if (window.__obsidianCytoscapeLoading) {
+      window.__obsidianCytoscapeLoading.push(cb);
+      return;
+    }
+    var queue = window.__obsidianCytoscapeLoading = [cb];
+    function flush(ok) {
+      window.__obsidianCytoscapeLoading = null;
+      queue.forEach(function (fn) { try { fn(ok); } catch (e) { /* ignore */ } });
+    }
+    var existing = document.querySelector('script[src*="cytoscape"]');
+    if (existing) {
+      if (typeof window.cytoscape === 'function') return flush(true);
+      existing.addEventListener('load', function () { flush(true); });
+      existing.addEventListener('error', function () { flush(false); });
+      return;
+    }
+    var s = document.createElement('script');
+    s.src = cytoscapeSrc();
+    s.defer = true;
+    s.onload = function () { flush(true); };
+    s.onerror = function () { flush(false); };
+    document.head.appendChild(s);
+  }
+
   function buildLookup(entries) {
     var byKey = Object.create(null);
     entries.forEach(function (entry) {
@@ -211,6 +253,8 @@
 
     var theme = readTheme();
     container.style.backgroundColor = theme.canvasBg;
+    var nodeDur = prefersReducedMotion() ? '0ms' : '160ms';
+    var edgeDur = prefersReducedMotion() ? '0ms' : '150ms';
 
     var cy = window.cytoscape({
       container: container,
@@ -245,7 +289,7 @@
             'border-color': theme.nodeBorder,
             'opacity': 0.88,
             'transition-property': 'background-color, border-color, width, height, text-opacity, opacity',
-            'transition-duration': '160ms'
+            'transition-duration': nodeDur
           }
         },
         {
@@ -279,7 +323,7 @@
             'arrow-scale': 0.75,
             'opacity': 0.55,
             'transition-property': 'line-color, width, opacity',
-            'transition-duration': '150ms'
+            'transition-duration': edgeDur
           }
         },
         {
@@ -409,18 +453,9 @@
   function applyOrphansVisibility(cy, show) {
     if (!cy) return;
     var orphans = cy.nodes().filter(function (n) { return n.degree(false) === 0; });
-    if (show) {
-      orphans.style('display', 'element');
-    } else {
-      orphans.style('display', 'none');
-    }
-    // Re-run a quick layout pass on visible elements so the connected
-    // cluster expands into the freed space.
-    cy.layout(Object.assign({}, COSE_LAYOUT, {
-      randomize: false,
-      numIter: 1400,
-      eles: cy.elements(':visible')
-    })).run();
+    orphans.style('display', show ? 'element' : 'none');
+    // The initial COSE pass already positioned every node, so just refit the
+    // visible set — avoids a jarring full relayout of the stable core on toggle.
     cy.fit(cy.elements(':visible'), 80);
   }
 
@@ -467,13 +502,23 @@
         var byKey = buildLookup(entries);
         var elements = buildElements(entries, byKey);
         computeNodeDegree(elements);
-        container.innerHTML = '';
-        setStats(entries, elements);
-        var cy = renderGraph(container, elements);
-        wireSearch(cy, byKey);
-        wireFitButton(cy);
-        wireOrphansToggle(cy);
-        window.ObsidianGraph = { cy: cy, byKey: byKey, entries: entries };
+        loadCytoscape(function (ok) {
+          if (!ok) {
+            container.innerHTML =
+              '<div class="alert alert-danger" role="alert">' +
+              'Graph view failed to load: the <code>cytoscape</code> library could ' +
+              'not be fetched. Check your network connection or content security policy.' +
+              '</div>';
+            return;
+          }
+          container.innerHTML = '';
+          setStats(entries, elements);
+          var cy = renderGraph(container, elements);
+          wireSearch(cy, byKey);
+          wireFitButton(cy);
+          wireOrphansToggle(cy);
+          window.ObsidianGraph = { cy: cy, byKey: byKey, entries: entries };
+        });
       })
       .catch(function (err) {
         container.innerHTML =

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

@@ -26,15 +26,35 @@
   var PANEL_SELECTOR = '[data-obsidian-local-graph-panel]';
   var TOGGLE_SELECTOR = '[data-obsidian-local-graph-toggle]';
   var STATUS_SELECTOR = '[data-obsidian-local-graph-status]';
-  // Cytoscape is vendored locally (assets/vendor/cytoscape/) — no CDN, so the
-  // graph works under strict CSP and offline. Resolve the vendored URL from this
-  // script's own (trusted) src so it stays correct under any site baseurl,
-  // without flowing DOM-supplied text into a script element. See issues #152, #205.
-  var SELF_SRC = (document.currentScript && document.currentScript.src) || '';
-  var CYTOSCAPE_URL = '/assets/vendor/cytoscape/cytoscape.min.js';
-  var _selfMatch = SELF_SRC.match(/^(.*\/)assets\/js\/obsidian-local-graph\.js(?:[?#].*)?$/);
-  if (_selfMatch) {
-    CYTOSCAPE_URL = _selfMatch[1] + 'assets/vendor/cytoscape/cytoscape.min.js';
+
+  // Cytoscape is vendored under assets/vendor/ (no runtime CDN — matches the
+  // Bootstrap / Icons / Mermaid policy). The path is supplied by Liquid via
+  // window.OBSIDIAN_CONFIG.cytoscapeUrl, with a base-relative fallback.
+  function cytoscapeSrc() {
+    var cfg = window.OBSIDIAN_CONFIG || {};
+    if (cfg.cytoscapeUrl) return cfg.cytoscapeUrl;
+    var base = (document.querySelector('base') || {}).href || '/';
+    return base.replace(/\/$/, '') + '/assets/vendor/cytoscape/cytoscape.min.js';
+  }
+
+  function prefersReducedMotion() {
+    return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  }
+
+  function debounce(fn, wait) {
+    var t;
+    return function () {
+      var ctx = this;
+      var args = arguments;
+      clearTimeout(t);
+      t = setTimeout(function () { fn.apply(ctx, args); }, wait);
+    };
+  }
+
+  function escapeHtml(value) {
+    return String(value == null ? '' : value)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
   }
 
   function companionElements(container) {
@@ -246,32 +266,34 @@
     };
   }
 
+  // Load cytoscape (vendored, same-origin). Invokes cb(true) on success,
+  // cb(false) on failure so callers can fall back to the text list.
   function loadCytoscape(cb) {
-    if (typeof window.cytoscape === 'function') return cb();
+    if (typeof window.cytoscape === 'function') return cb(true);
     // Re-use any in-flight load (e.g. when the full graph page also loads it).
     if (window.__obsidianCytoscapeLoading) {
       window.__obsidianCytoscapeLoading.push(cb);
       return;
     }
-    window.__obsidianCytoscapeLoading = [cb];
+    var queue = window.__obsidianCytoscapeLoading = [cb];
+    function flush(ok) {
+      window.__obsidianCytoscapeLoading = null;
+      queue.forEach(function (fn) { try { fn(ok); } catch (e) { /* ignore */ } });
+    }
     var existing = document.querySelector('script[src*="cytoscape"]');
     if (existing) {
-      existing.addEventListener('load', function () {
-        window.__obsidianCytoscapeLoading.forEach(function (fn) { fn(); });
-        window.__obsidianCytoscapeLoading = null;
-      });
+      if (typeof window.cytoscape === 'function') return flush(true);
+      existing.addEventListener('load', function () { flush(true); });
+      existing.addEventListener('error', function () { flush(false); });
       return;
     }
     var s = document.createElement('script');
-    s.src = CYTOSCAPE_URL;
+    s.src = cytoscapeSrc();
     s.defer = true;
-    s.onload = function () {
-      window.__obsidianCytoscapeLoading.forEach(function (fn) { fn(); });
-      window.__obsidianCytoscapeLoading = null;
-    };
+    s.onload = function () { flush(true); };
     s.onerror = function () {
       console.warn('[obsidian-local-graph] failed to load cytoscape');
-      window.__obsidianCytoscapeLoading = null;
+      flush(false);
     };
     document.head.appendChild(s);
   }
@@ -279,6 +301,7 @@
   function render(container, elements, currentUrl) {
     var theme = readTheme();
     container.style.backgroundColor = theme.canvasBg;
+    var motion = prefersReducedMotion() ? '0ms' : '160ms';
 
     var cy = window.cytoscape({
       container: container,
@@ -307,7 +330,7 @@
             'border-width': 1.5,
             'border-color': theme.nodeBorder,
             'transition-property': 'background-color, border-color, width, height',
-            'transition-duration': '160ms'
+            'transition-duration': motion
           }
         },
         {
@@ -322,7 +345,11 @@
           }
         },
         {
-          selector: 'node[broken]',
+          // `[?broken]` = truthiness, NOT `[broken]` (existence): every edge
+          // carries a broken:false field, so the existence form would paint
+          // all of them dashed-red even when nothing is broken. Mirrors the
+          // selectors in obsidian-graph.js (the full graph).
+          selector: 'node[?broken]',
           style: {
             'background-color': '#dc3545',
             'border-style': 'dashed',
@@ -341,7 +368,7 @@
           }
         },
         {
-          selector: 'edge[broken]',
+          selector: 'edge[?broken]',
           style: { 'line-style': 'dashed', 'line-color': '#dc3545' }
         }
       ],
@@ -385,11 +412,60 @@
     return cy;
   }
 
+  // Accessible text fallback: a list of linked neighbours rendered as real
+  // <a> links. Always present for screen readers / no-cytoscape users; hidden
+  // (visually) once the interactive graph renders. Returns the element or null.
+  function renderTextFallback(container, elements, current) {
+    var host = container.parentNode;
+    if (!host) return null;
+    var prior = host.querySelector('.obsidian-local-graph-fallback');
+    if (prior) prior.parentNode.removeChild(prior);
+
+    var byId = Object.create(null);
+    var outgoing = [];
+    var incoming = [];
+    var seenOut = Object.create(null);
+    var seenIn = Object.create(null);
+    elements.forEach(function (el) {
+      if (el.group === 'nodes') byId[el.data.id] = el.data;
+    });
+    elements.forEach(function (el) {
+      if (el.group !== 'edges') return;
+      if (el.data.source === current.url && el.data.target !== current.url) {
+        var t = byId[el.data.target];
+        if (t && t.url && !seenOut[t.url]) { seenOut[t.url] = true; outgoing.push(t); }
+      } else if (el.data.target === current.url && el.data.source !== current.url) {
+        var s = byId[el.data.source];
+        if (s && s.url && !seenIn[s.url]) { seenIn[s.url] = true; incoming.push(s); }
+      }
+    });
+    if (!outgoing.length && !incoming.length) return null;
+
+    function section(title, items) {
+      if (!items.length) return '';
+      var lis = items.map(function (d) {
+        return '<li class="list-group-item py-1 px-2 bg-transparent">' +
+          '<a href="' + escapeHtml(d.url) + '">' + escapeHtml(d.label || d.url) + '</a></li>';
+      }).join('');
+      return '<p class="small text-secondary mb-1 mt-2">' + title + '</p>' +
+        '<ul class="list-group list-group-flush small mb-0">' + lis + '</ul>';
+    }
+
+    var nav = document.createElement('nav');
+    nav.className = 'obsidian-local-graph-fallback mt-2';
+    nav.setAttribute('aria-label', 'Pages linked to this page');
+    nav.innerHTML = section('Links from this page', outgoing) +
+      section('Links to this page', incoming);
+    host.insertBefore(nav, container.nextSibling);
+    return nav;
+  }
+
   function init() {
     var container = document.getElementById(CONTAINER_ID);
     if (!container) return;
-    setPanelAvailable(container, true);
-    setStatus(container, 'Loading graph...', false);
+    // Panel + FAB start hidden (progressive enhancement): reveal ONLY once the
+    // current page is confirmed in the wiki-index, so unindexed/slow/no-JS pages
+    // never flash a dead button.
 
     var panel = container.closest(PANEL_SELECTOR);
     if (panel) {
@@ -398,9 +474,9 @@
       });
     }
 
-    window.addEventListener('resize', function () {
+    window.addEventListener('resize', debounce(function () {
       resizeGraph(container);
-    });
+    }, 150));
 
     var depth = parseInt(container.getAttribute('data-depth') || '1', 10);
     if (!isFinite(depth) || depth < 1) depth = 1;
@@ -416,16 +492,33 @@
         var lookup = buildLookup(entries);
         var current = findCurrentEntry(lookup);
         if (!current) { setPanelAvailable(container, false); return; }
+
+        // Confirmed in-index: reveal the panel + FAB now.
+        setPanelAvailable(container, true);
+        setStatus(container, 'Loading graph…', false);
+
         var elements = buildSubgraph(entries, lookup, current, depth);
-        loadCytoscape(function () {
+        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.
+            container.hidden = true;
+            setStatus(container, 'Showing linked pages (interactive graph unavailable).', false);
+            return;
+          }
           render(container, elements, current.url);
-          var nodeCount = elements.filter(function (element) { return element.group === 'nodes'; }).length;
-          var edgeCount = elements.filter(function (element) { return element.group === 'edges'; }).length;
           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');
         });
       })
       .catch(function (err) {
-        // Sidebar panel failing is non-fatal — hide and stay quiet.
+        // Sidebar panel failing is non-fatal — keep it hidden and stay quiet.
         console.warn('[obsidian-local-graph] init failed:', err);
         setPanelAvailable(container, false);
       });

data/assets/js/obsidian-wiki-links.js

@@ -64,6 +64,35 @@
     return String(value || '').toLowerCase().trim().replace(/\s+/g, ' ');
   }
 
+  // Replicate kramdown's basic header-id algorithm so [[Page#Heading]] fragments
+  // land on the heading kramdown generated. Kept byte-identical to
+  // Jekyll::Obsidian::Converter#anchorize in _plugins/obsidian_links.rb.
+  function anchorize(anchor) {
+    return String(anchor == null ? '' : anchor).trim()
+      .replace(/^[^a-zA-Z]+/, '')
+      .replace(/[^a-zA-Z0-9 -]/g, '')
+      .replace(/ /g, '-')
+      .toLowerCase();
+  }
+
+  // Match Jekyll's default `slugify` filter (used by pages/tags.md anchor ids)
+  // so inline #tags link to a real on-page anchor. Mirrors Converter#slugify.
+  function tagSlug(tag) {
+    return String(tag || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+  }
+
+  // Skip hex-colour-shaped tokens in prose (e.g. `#ffffff`, `#fff`, `#1a2b3c`)
+  // so they aren't linkified as tags. Suppress standard CSS hex lengths (3/6/8)
+  // and any digit-containing hex; length 4/5/7 all-letter tokens stay tags so
+  // the iconic hex-words (#cafe, #dead, #beef, #face) still link. Mirrors the
+  // Ruby `color_like_tag?` helper byte-for-byte.
+  function isColorLikeTag(tag) {
+    var t = String(tag || '');
+    if (!/^[0-9a-fA-F]+$/.test(t)) return false;
+    if (t.length === 3 || t.length === 6 || t.length === 8) return true;
+    return t.length >= 3 && t.length <= 8 && /\d/.test(t);
+  }
+
   function escapeHtml(value) {
     return String(value == null ? '' : value)
       .replace(/&/g, '&amp;')
@@ -119,12 +148,19 @@
       return '<div class="obsidian-embed obsidian-embed-broken alert alert-warning" role="alert">' +
         'Embed not found: <code>' + escapeHtml(target) + '</code></div>';
     }
-    var url = info.url + (parts.anchor ? '#' + parts.anchor.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-') : '');
-    return '<div class="obsidian-embed obsidian-embed-note">' +
-      '<div class="obsidian-embed-header"><a href="' + escapeHtml(url) + '">' +
-      escapeHtml(info.title || parts.page) + '</a></div>' +
-      '<div class="obsidian-embed-excerpt">' + escapeHtml(info.excerpt || '') + '</div>' +
-      '</div>';
+    var url = info.url + (parts.anchor ? '#' + anchorize(parts.anchor) : '');
+    // Mirror the Liquid card in _includes/content/transclude.html so embeds
+    // styled by .obsidian-embed-source / .obsidian-embed-body render identically
+    // on the GitHub Pages (client) path. Excerpt is plain text (no client-side
+    // markdownify) — escaped to stay XSS-safe.
+    return '<aside class="obsidian-embed obsidian-embed-note card my-3" aria-label="Embedded note: ' +
+      escapeHtml(info.title || parts.page) + '">' +
+      '<div class="card-header"><span class="obsidian-embed-source">' +
+      '<i class="bi bi-link-45deg me-1" aria-hidden="true"></i>Embedded: ' +
+      '<a href="' + escapeHtml(url) + '">' + escapeHtml(info.title || parts.page) + '</a>' +
+      '</span></div>' +
+      '<div class="card-body obsidian-embed-body">' + escapeHtml(info.excerpt || '') + '</div>' +
+      '</aside>';
   }
 
   function renderWikiLink(target, aliasText, byKey, currentUrl) {
@@ -132,12 +168,14 @@
     var display = aliasText || (parts.anchor ? parts.page + ' \u203A ' + parts.anchor : parts.page);
     var info = byKey[normalize(parts.page)];
     if (!info) {
-      return '<a href="#" class="' + CONFIG.brokenLinkClass +
+      // Non-navigating <span>: a broken link has no target, so a click must
+      // not scroll the page to the top (the old href="#" behaviour).
+      return '<span class="' + CONFIG.brokenLinkClass +
         '" data-wiki-target="' + escapeHtml(parts.page) +
         '" title="Unresolved wiki-link: ' + escapeHtml(parts.page) + '">' +
-        escapeHtml(display) + '</a>';
+        escapeHtml(display) + '</span>';
     }
-    var url = info.url + (parts.anchor ? '#' + parts.anchor.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-') : '');
+    var url = info.url + (parts.anchor ? '#' + anchorize(parts.anchor) : '');
     var currentAttr = currentUrl && info.url === currentUrl ? ' aria-current="page"' : '';
     return '<a href="' + escapeHtml(url) + '" class="' + CONFIG.wikiLinkClass +
       '" data-wiki-target="' + escapeHtml(parts.page) + '"' + currentAttr + '>' +
@@ -157,8 +195,13 @@
       return renderWikiLink(target.trim(), (alias || '').trim(), byKey, currentUrl);
     });
     html = html.replace(TAG_RE, function (_match, lead, tag) {
-      var url = (CONFIG.tagBase.replace(/\/$/, '') + '/#' + tag.toLowerCase().replace(/\//g, '-'));
-      return lead + '<a href="' + escapeHtml(url) + '" class="obsidian-tag">#' + escapeHtml(tag) + '</a>';
+      // Not a tag (hex colour): keep the literal text, but still escape the
+      // raw lead char so the reconstruction loop can't inject markup.
+      if (isColorLikeTag(tag)) return escapeHtml(lead) + '#' + tag;
+      var url = (CONFIG.tagBase.replace(/\/$/, '') + '/#' + tagSlug(tag));
+      // The lead char is raw source text (often `<`/`&`) — escape it so the
+      // reconstruction loop in rewriteContainer can't inject markup.
+      return escapeHtml(lead) + '<a href="' + escapeHtml(url) + '" class="obsidian-tag">#' + escapeHtml(tag) + '</a>';
     });
     return html;
   }
@@ -256,17 +299,17 @@
   // `[!warning]+ Foldable warning`.
   var CALLOUT_HEAD_RE = /^\s*\[!([A-Za-z]+)\]([+-]?)\s*([^\n]*)/;
 
+  var calloutSeq = 0;
+
   function rewriteCallouts(container) {
     if (!container) return 0;
     var quotes = container.querySelectorAll('blockquote');
     var count = 0;
     quotes.forEach(function (bq) {
       if (bq.dataset.obsidianCallout) return; // already processed
+      // Kramdown emits the callout head as the first <p> of the blockquote, so
+      // the first element child is the only place the `[!type]` marker can be.
       var firstChild = bq.firstElementChild;
-      // Walk past whitespace text nodes
-      while (firstChild && firstChild.nodeName !== 'P' && firstChild.nodeType !== 1) {
-        firstChild = firstChild.nextElementSibling;
-      }
       if (!firstChild || firstChild.nodeName !== 'P') return;
 
       var rawText = firstChild.textContent || '';
@@ -276,7 +319,10 @@
       var type = m[1].toLowerCase();
       var spec = CALLOUT_TYPES[type] || CALLOUT_TYPES.note;
       var fold = m[2];
-      var titleText = (m[3] || '').trim() || (type.charAt(0).toUpperCase() + type.slice(1));
+      var foldable = fold === '+' || fold === '-';
+      var collapsed = fold === '-';
+      var typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
+      var titleText = (m[3] || '').trim() || typeLabel;
 
       // Strip the "[!type]…" head from the first paragraph (keep any trailing text)
       var headLength = m[0].length;
@@ -291,15 +337,36 @@
       wrapper.className = 'alert alert-' + spec.alert + ' obsidian-callout obsidian-callout-' + type;
       wrapper.setAttribute('role', 'alert');
       wrapper.dataset.obsidianCallout = type;
-      if (fold === '-') wrapper.dataset.collapsed = 'true';
-
-      var titleEl = document.createElement('div');
-      titleEl.className = 'obsidian-callout-title';
-      titleEl.innerHTML = '<i class="bi ' + spec.icon + ' me-2" aria-hidden="true"></i>' + escapeHtml(titleText);
+      if (collapsed) wrapper.setAttribute('data-collapsed', 'true');
+
+      var bodyId = 'obsidian-callout-body-' + (++calloutSeq);
+      // Icon is decorative; voice the type for screen readers.
+      var titleInner = '<i class="bi ' + spec.icon + ' me-2" aria-hidden="true"></i>' +
+        '<span class="visually-hidden">' + escapeHtml(typeLabel) + ': </span>' +
+        escapeHtml(titleText);
+
+      var titleEl;
+      if (foldable) {
+        titleEl = document.createElement('button');
+        titleEl.setAttribute('type', 'button');
+        titleEl.className = 'obsidian-callout-title obsidian-callout-toggle';
+        titleEl.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+        titleEl.setAttribute('aria-controls', bodyId);
+        titleEl.innerHTML = titleInner +
+          '<i class="bi bi-chevron-down obsidian-callout-chevron ms-auto" aria-hidden="true"></i>';
+      } else {
+        titleEl = document.createElement('div');
+        titleEl.className = 'obsidian-callout-title';
+        titleEl.setAttribute('role', 'heading');
+        titleEl.setAttribute('aria-level', '3');
+        titleEl.innerHTML = titleInner;
+      }
       wrapper.appendChild(titleEl);
 
       var bodyEl = document.createElement('div');
       bodyEl.className = 'obsidian-callout-body';
+      bodyEl.setAttribute('id', bodyId);
+      if (collapsed) bodyEl.setAttribute('hidden', '');
       // Move blockquote children into the body, preserving inner HTML
       while (bq.firstChild) {
         bodyEl.appendChild(bq.firstChild);
@@ -312,10 +379,40 @@
     return count;
   }
 
+  // Delegated toggle for foldable callouts. Bound once on the content container
+  // so it works for callouts rendered by EITHER path (server-side Ruby plugin or
+  // client-side rewriteCallouts). Native <button> handles Enter/Space for free.
+  function wireCalloutToggles(container) {
+    if (!container || !container.addEventListener || container.__obsidianCalloutToggleBound) return;
+    container.__obsidianCalloutToggleBound = true;
+    container.addEventListener('click', function (e) {
+      var btn = e.target && e.target.closest && e.target.closest('.obsidian-callout-toggle');
+      if (!btn || !container.contains(btn)) return;
+      var callout = btn.closest('.obsidian-callout');
+      var body = callout && callout.querySelector('.obsidian-callout-body');
+      if (!body) return;
+      var expanded = btn.getAttribute('aria-expanded') === 'true';
+      btn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+      body.hidden = expanded;
+      if (expanded) {
+        callout.setAttribute('data-collapsed', 'true');
+      } else {
+        callout.removeAttribute('data-collapsed');
+      }
+    });
+  }
+
   function init() {
+    // Respect `obsidian: { enabled: false }` even if the script is loaded.
+    if (OBSIDIAN_CONFIG.enabled === false) return;
+
     var container = document.querySelector('#main-content, .bd-content, main, article') || document.body;
     if (!container) return;
 
+    // Bind the foldable-callout toggle first so it works even when the index
+    // fetch fails or when callouts were rendered server-side by the plugin.
+    wireCalloutToggles(container);
+
     fetch(CONFIG.indexUrl, { credentials: 'same-origin', cache: 'force-cache' })
       .then(function (r) { return r.ok ? r.json() : null; })
       .then(function (payload) {