jekyll-theme-zer0 1.21.0 → 1.22.0

data/_layouts/article.html

@@ -160,16 +160,33 @@ layout: default
     </div>
     
     <!-- Category Link -->
-    {% comment %} Category base is configurable (`category_base`, default `/news`)
-       so remote-theme consumers whose category index lives elsewhere
-       (e.g. `/categories`) don't get a hardcoded 404. See issue #204. {% endcomment %}
+    {% comment %} Category base is configurable (`category_base`, default `/news`).
+       Only link the badge when that category index page actually exists in the
+       build; on a remote-theme Pages consumer the category section is
+       plugin/page-generated and absent, so we render a plain badge instead of a
+       link that 404s (mirrors the tag-badge and footer Quick-Links guard).
+       See issue #204. {% endcomment %}
     {% if page.categories.size > 0 %}
     {% assign _category_base = site.category_base | default: '/news' %}
+    {% assign _primary_category = page.categories | first %}
+    {% capture _category_url %}{{ _category_base }}/{{ _primary_category | slugify }}/{% endcapture %}
+    {% comment %} Category index pages can live in site.pages (a regular page) or
+       site.posts (a dated section index), so check both. {% endcomment %}
+    {% assign _category_page = site.html_pages | where: "url", _category_url | first %}
+    {% unless _category_page %}
+      {% assign _category_page = site.posts | where: "url", _category_url | first %}
+    {% endunless %}
     <div class="mb-3">
-      <a href="{{ site.baseurl }}{{ _category_base }}/{{ page.categories | first | slugify }}/"
+      {% if _category_page %}
+      <a href="{{ site.baseurl }}{{ _category_url }}"
          class="badge bg-primary text-decoration-none fs-6">
-        <i class="bi bi-folder me-1"></i>{{ page.categories | first }}
+        <i class="bi bi-folder me-1"></i>{{ _primary_category }}
       </a>
+      {% else %}
+      <span class="badge bg-primary fs-6">
+        <i class="bi bi-folder me-1"></i>{{ _primary_category }}
+      </span>
+      {% endif %}
     </div>
     {% endif %}
 
@@ -512,7 +529,7 @@ layout: default
   <!-- ================================ -->
   <!-- COMMENT SYSTEM                   -->
   <!-- ================================ -->
-  {% if page.comments != false and site.giscus %}
+  {% if page.comments != false and site.giscus.enabled %}
     <section class="post-comments mt-5 pt-4 border-top" id="comments">
       <h2 class="h4 mb-4">
         <i class="bi bi-chat-dots me-2"></i>Comments

data/_plugins/obsidian_links.rb

@@ -185,10 +185,20 @@ module Jekyll
     # Converter — pure-string transformations on the raw markdown body.
     # ---------------------------------------------------------------------
     class Converter
-      # Match fenced code blocks (``` or ~~~), indented code lines, and inline
-      # code spans so we can skip them when rewriting wiki-link / tag syntax.
-      FENCED_CODE_RE = /(^[ \t]{0,3}(```|~~~)[^\n]*\n.*?^[ \t]{0,3}\2[^\n]*$)/m
-      INLINE_CODE_RE = /(`+)[^`\n]*?\1/
+      # Match fenced code blocks and inline code spans so we can skip them when
+      # rewriting wiki-link / tag syntax.
+      #
+      # FENCED_CODE_RE has two branches (closed fence first so it is not greedily
+      # swallowed by the EOF branch):
+      #   1. A variable-length fence (3+ backticks or tildes) closed by an
+      #      equal-length run — `\2` requires the close to match the open exactly,
+      #      so a 4-backtick fence is not closed by an inner ``` fence.
+      #   2. An unclosed fence runs to end-of-input (matches Obsidian/kramdown,
+      #      which treat a dangling fence as code through EOF).
+      FENCED_CODE_RE = /(^[ \t]{0,3}(`{3,}|~{3,})[^\n]*\n.*?^[ \t]{0,3}\2[^\n]*$)|(^[ \t]{0,3}(`{3,}|~{3,})[^\n]*\n.*\z)/m
+      # Inline code: the delimiter is a run of N backticks; the span may contain
+      # shorter backtick runs (CommonMark), but not a newline or the closing run.
+      INLINE_CODE_RE = /(`+)(?:[^`\n]|(?!\1)`)*?\1/
 
       # ![[target]]  or  ![[target|width-or-alias]]
       EMBED_RE = /!\[\[([^\]\n|]+?)(?:\|([^\]\n]+))?\]\]/
@@ -209,6 +219,7 @@ module Jekyll
         @site = site
         @index = index
         @config = config
+        @callout_seq = 0
       end
 
       def convert(markdown, current_url: nil)
@@ -246,26 +257,47 @@ module Jekyll
       end
 
       # > [!type] Title  →  Bootstrap alert. Body is dedented (leading "> ").
+      # Fold markers make the callout an accessible disclosure:
+      #   `-` collapsed by default, `+` expanded; both get a <button> toggle.
+      # Plain callouts (no marker) stay a static heading.
       def transform_callouts(text)
         text.gsub(CALLOUT_RE) do
           m = Regexp.last_match
           type = m[:type].downcase
           spec = CALLOUT_TYPES[type] || CALLOUT_TYPES['note']
           fold = m[:fold]
+          foldable = fold == '+' || fold == '-'
+          collapsed = fold == '-'
           title = m[:title].to_s.strip
           title = type.capitalize if title.empty?
           body = m[:body].to_s.gsub(/^[ \t]{0,3}>[ \t]?/, '').rstrip
 
-          # Allow inner Markdown by emitting a span with `markdown="1"` so
-          # kramdown still parses the body content.
-          collapsed_attr = fold == '-' ? ' data-collapsed="true"' : ''
-          alert_class = "alert alert-#{spec[:alert]} #{@config['callout_class_prefix']} #{@config['callout_class_prefix']}-#{type}"
-
+          prefix = @config['callout_class_prefix']
+          collapsed_attr = collapsed ? ' data-collapsed="true"' : ''
+          alert_class = "alert alert-#{spec[:alert]} #{prefix} #{prefix}-#{type}"
+          body_id = "#{prefix}-body-#{next_callout_id}"
+          body_hidden = collapsed ? ' hidden' : ''
+
+          icon = %(<i class="bi #{spec[:icon]} me-2" aria-hidden="true"></i>)
+          # Voice the callout type for screen readers (the icon is decorative).
+          sr_type = %(<span class="visually-hidden">#{escape_html(type.capitalize)}: </span>)
+          title_inner = "#{icon}#{sr_type}#{escape_html(title)}"
+
+          title_el =
+            if foldable
+              chevron = %(<i class="bi bi-chevron-down #{prefix}-chevron ms-auto" aria-hidden="true"></i>)
+              %(<button type="button" class="#{prefix}-title #{prefix}-toggle" aria-expanded="#{collapsed ? 'false' : 'true'}" aria-controls="#{body_id}">#{title_inner}#{chevron}</button>)
+            else
+              %(<div class="#{prefix}-title" role="heading" aria-level="3">#{title_inner}</div>)
+            end
+
+          # Outer div is markdown="0" so kramdown leaves the chrome untouched;
+          # the body is markdown="1" so its content is still parsed.
           <<~HTML
 
             <div class="#{alert_class}" role="alert"#{collapsed_attr} markdown="0">
-              <div class="#{@config['callout_class_prefix']}-title"><i class="bi #{spec[:icon]} me-2" aria-hidden="true"></i>#{escape_html(title)}</div>
-              <div class="#{@config['callout_class_prefix']}-body" markdown="1">
+              #{title_el}
+              <div class="#{prefix}-body" id="#{body_id}"#{body_hidden} markdown="1">
 
             #{body}
 
@@ -276,6 +308,10 @@ module Jekyll
         end
       end
 
+      def next_callout_id
+        @callout_seq += 1
+      end
+
       def transform_embeds(text)
         text.gsub(EMBED_RE) do
           target = Regexp.last_match(1).to_s.strip
@@ -321,7 +357,7 @@ module Jekyll
           # Use a Liquid include so the embedded note can be rendered with the
           # transclude template (avoids re-running this converter on its body).
           url = info[:url].to_s
-          url += "##{anchor}" unless anchor.nil? || anchor.empty?
+          url += "##{anchorize(anchor)}" unless anchor.nil? || anchor.empty?
           %({% include content/transclude.html target="#{escape_attr(clean_target)}" url="#{escape_attr(url)}" %})
         end
       end
@@ -335,7 +371,9 @@ module Jekyll
 
           info = @index.lookup(clean_target)
           if info.nil?
-            %(<a href="#" class="#{@config['broken_link_class']}" data-wiki-target="#{escape_attr(clean_target)}" title="Unresolved wiki-link: #{escape_attr(clean_target)}">#{escape_html(display)}</a>)
+            # A broken link points nowhere — render a non-navigating <span> so a
+            # click can't scroll the page to the top (the old href="#" bug).
+            %(<span class="#{@config['broken_link_class']}" data-wiki-target="#{escape_attr(clean_target)}" title="Unresolved wiki-link: #{escape_attr(clean_target)}">#{escape_html(display)}</span>)
           else
             url = info[:url].to_s
             url += "##{anchorize(anchor)}" unless anchor.nil? || anchor.empty?
@@ -345,9 +383,25 @@ module Jekyll
         end
       end
 
+      # Hex-colour-shaped tokens in prose (#ffffff, #fff, #1a2b3c) are not tags.
+      # Suppress standard CSS hex lengths (3/6/8) and any digit-containing hex;
+      # length 4/5/7 all-letter tokens stay tags so iconic hex-words (#cafe,
+      # #dead, #beef, #face) still link. Mirrors isColorLikeTag() in
+      # assets/js/obsidian-wiki-links.js byte-for-byte.
+      def color_like_tag?(tag)
+        return false unless tag =~ /\A[0-9a-fA-F]+\z/
+
+        len = tag.length
+        return true if [3, 6, 8].include?(len)
+
+        len.between?(3, 8) && tag =~ /\d/ ? true : false
+      end
+
       def transform_inline_tags(text)
         text.gsub(INLINE_TAG_RE) do
           tag = Regexp.last_match(1)
+          next "##{tag}" if color_like_tag?(tag)
+
           base = @config['tag_base_url'].to_s
           base = "#{base}/" unless base.end_with?('/')
           %(<a href="#{base}##{slugify(tag)}" class="obsidian-tag">##{escape_html(tag)}</a>)
@@ -366,14 +420,29 @@ module Jekyll
         end
       end
 
+      # Replicate kramdown's basic header-id algorithm so [[Page#Heading]]
+      # fragments land on the heading kramdown actually generated:
+      #   strip leading non-letters → drop chars outside [a-zA-Z0-9 -] →
+      #   spaces to dashes (consecutive spaces kept as consecutive dashes,
+      #   matching kramdown) → downcase. Underscores are removed, not kept.
+      # Must stay byte-identical to anchorize() in assets/js/obsidian-wiki-links.js.
       def anchorize(anchor)
         return '' if anchor.nil?
 
-        anchor.downcase.strip.gsub(/[^\w\s-]/, '').gsub(/\s+/, '-')
+        anchor.to_s.strip
+              .gsub(/^[^a-zA-Z]+/, '')
+              .gsub(/[^a-zA-Z0-9 -]/, '')
+              .tr(' ', '-')
+              .downcase
       end
 
+      # Match Jekyll's default `slugify` filter (the same one pages/tags.md uses
+      # for its anchor ids) so inline #tags link to a real on-page anchor.
+      # Inline tags are ASCII-only by construction (INLINE_TAG_RE), so the
+      # ASCII-equivalent of Jekyll::Utils.slugify is byte-identical here and
+      # avoids a hard Jekyll dependency in the standalone unit tests.
       def slugify(value)
-        value.downcase.gsub(/[^\w\/-]+/, '-').gsub(/-+/, '-').gsub(%r{/}, '-')
+        value.to_s.downcase.gsub(/[^a-z0-9]+/, '-').gsub(/\A-+|-+\z/, '')
       end
 
       def escape_html(value)

data/_sass/core/_obsidian.scss

@@ -21,6 +21,12 @@
     border-bottom-color: transparent;
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+    border-bottom-color: transparent;
+  }
+
   &[aria-current="page"] {
     background-color: rgba(var(--bs-primary-rgb), 0.08);
     padding: 0 0.15rem;
@@ -46,16 +52,22 @@
   margin: 0 0.1rem;
   font-size: 0.85em;
   font-weight: 500;
-  color: var(--bs-secondary);
-  background-color: rgba(var(--bs-secondary-rgb), 0.1);
+  // Theme-aware tokens give legible contrast in both light and dark modes.
+  color: var(--bs-secondary-color);
+  background-color: var(--bs-secondary-bg);
   border-radius: 0.5rem;
   text-decoration: none;
-  transition: background-color 0.15s ease;
+  transition: background-color 0.15s ease, color 0.15s ease;
 
-  &:hover,
-  &:focus {
-    background-color: rgba(var(--bs-secondary-rgb), 0.2);
-    color: var(--bs-primary);
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+    color: var(--bs-emphasis-color);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 1px;
     text-decoration: none;
   }
 }
@@ -111,14 +123,47 @@
     align-items: center;
   }
 
+  // Foldable callouts render the title as a real <button> disclosure. Reset the
+  // button chrome so it reads like the static title, then add affordances.
+  .obsidian-callout-toggle {
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: 600;
+    text-align: left;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+      border-radius: 0.2rem;
+    }
+  }
+
+  .obsidian-callout-chevron {
+    transition: transform 0.2s ease;
+  }
+
+  .obsidian-callout-toggle[aria-expanded="false"] .obsidian-callout-chevron {
+    transform: rotate(-90deg);
+  }
+
   .obsidian-callout-body {
     margin: 0;
 
     > :last-child {
       margin-bottom: 0;
     }
+
+    &[hidden] {
+      display: none;
+    }
   }
 
+  // Legacy / no-JS fallback: keep the CSS-only collapse working.
   &[data-collapsed="true"] .obsidian-callout-body {
     display: none;
   }
@@ -157,7 +202,13 @@
 // and _includes/navigation/local-graph-fab.html (footer) via
 // assets/js/obsidian-local-graph.js.
 // ----------------------------------------------------------------------------
-.obsidian-local-graph-fab {
+// ID selector (not the class) is REQUIRED for the fixed position to stick:
+// the FAB is a direct child of `.zer0-bg-body`, which matches the elevation
+// rule `.zer0-bg-body > *:not(.fixed-top):not(.offcanvas):not(.modal)` in
+// _sass/theme/_backgrounds.scss (specificity 0,4,0) and forces
+// `position: relative; z-index: 1` — dropping the FAB into page flow at the
+// bottom. An id (1,0,0) wins, mirroring `#aiChatToggle`. See ai-chat.html.
+#obsidianLocalGraphFab.obsidian-local-graph-fab {
   position: fixed;
   left: var(--zer0-space-fab-offset, 1rem);
   right: auto;

data/assets/data/wiki-index.json

@@ -18,7 +18,13 @@ sitemap: false
   permalink, collection, tags, and the body's outgoing wiki-link targets.
   The JS resolver normalizes lookup keys to lowercase + collapsed whitespace
   (matching _plugins/obsidian_links.rb#normalize).
+
+  Honours `obsidian: { enabled: false }` in _config.yml: emit an empty (but
+  valid) index so the client resolver, backlinks, and graph all no-op.
 {%- endcomment -%}
+{%- if site.obsidian.enabled == false -%}
+{"generated_at": {{ site.time | date_to_xmlschema | jsonify }}, "count": 0, "entries": []}
+{%- else -%}
 {%- assign all_docs = "" | split: "" -%}
 {%- for collection in site.collections -%}
   {%- for doc in collection.docs -%}
@@ -37,6 +43,13 @@ sitemap: false
     {%- for doc in all_docs -%}
       {%- assign basename = doc.path | split: "/" | last | replace: ".md", "" | replace: ".markdown", "" | replace: ".html", "" -%}
       {%- assign body_source = doc.content | default: "" -%}
+      {%- comment -%}
+        Strip fenced code so Bash `[[ ... ]]` tests and literal examples don't
+        leak into excerpts or become graph edges. Both fence syntaxes are
+        handled: ``` first, then ~~~. (Structural limits: unbalanced fences,
+        indented code, and fence-in-fence are not perfectly handled here — the
+        server-side Ruby plugin's FENCED_CODE_RE is stricter.)
+      {%- endcomment -%}
       {%- assign body_without_fences = "" -%}
       {%- assign fence_parts = body_source | split: "```" -%}
       {%- for fence_part in fence_parts -%}
@@ -45,8 +58,16 @@ sitemap: false
           {%- assign body_without_fences = body_without_fences | append: fence_part -%}
         {%- endif -%}
       {%- endfor -%}
+      {%- assign body_without_tilde = "" -%}
+      {%- assign tilde_parts = body_without_fences | split: "~~~" -%}
+      {%- for tilde_part in tilde_parts -%}
+        {%- assign tilde_mod = forloop.index0 | modulo: 2 -%}
+        {%- if tilde_mod == 0 -%}
+          {%- assign body_without_tilde = body_without_tilde | append: tilde_part -%}
+        {%- endif -%}
+      {%- endfor -%}
       {%- assign body_without_code = "" -%}
-      {%- assign inline_code_parts = body_without_fences | split: "`" -%}
+      {%- assign inline_code_parts = body_without_tilde | split: "`" -%}
       {%- for inline_code_part in inline_code_parts -%}
         {%- assign inline_code_mod = forloop.index0 | modulo: 2 -%}
         {%- if inline_code_mod == 0 -%}
@@ -77,7 +98,6 @@ sitemap: false
         {%- if target_raw and target_raw != "" -%}
           {%- assign target = target_raw | split: "|" | first | split: "#" | first | split: "^" | first | strip | downcase -%}
           {%- assign target_is_code = false -%}
-          {%- assign first_char = target | slice: 0 -%}
           {%- if target contains "$" or target contains "==" or target contains "!=" or target contains "=~" -%}
             {%- assign target_is_code = true -%}
           {%- endif -%}
@@ -87,7 +107,9 @@ sitemap: false
           {%- if target contains " -eq " or target contains " -ne " or target contains " -lt " or target contains " -le " or target contains " -gt " or target contains " -ge " -%}
             {%- assign target_is_code = true -%}
           {%- endif -%}
-          {%- if first_char == "-" or target contains "{" or target contains "}" or target contains "(" or target contains ")" or target contains '"' or target contains "'" -%}
+          {%- comment -%} Keep braces (template/code), but allow parentheses,
+            quotes, and leading dashes — real page titles use those. {%- endcomment -%}
+          {%- if target contains "{" or target contains "}" -%}
             {%- assign target_is_code = true -%}
           {%- endif -%}
           {%- if target != "" and target.size < 200 and target_is_code == false -%}
@@ -95,6 +117,30 @@ sitemap: false
           {%- endif -%}
         {%- endif -%}
       {%- endfor -%}
+      {%- comment -%}
+        Note transclusions ![[Note Title]] are outgoing edges too. Image embeds
+        (![[file.png]]) are not — skip known image/binary extensions via an
+        exact comma-delimited match so titles ending in a short token aren't
+        dropped.
+      {%- endcomment -%}
+      {%- assign embed_chunks = body | split: "![[" -%}
+      {%- for embed_chunk in embed_chunks offset: 1 -%}
+        {%- assign etarget_raw = embed_chunk | split: "]]" | first -%}
+        {%- if etarget_raw and etarget_raw != "" -%}
+          {%- assign etarget = etarget_raw | split: "|" | first | split: "#" | first | split: "^" | first | strip | downcase -%}
+          {%- assign is_image = false -%}
+          {%- if etarget contains "." -%}
+            {%- assign eext = etarget | split: "." | last -%}
+            {%- assign eext_token = "," | append: eext | append: "," -%}
+            {%- if ",png,jpg,jpeg,gif,svg,webp,avif,bmp,pdf," contains eext_token -%}
+              {%- assign is_image = true -%}
+            {%- endif -%}
+          {%- endif -%}
+          {%- if etarget != "" and etarget.size < 200 and is_image == false -%}
+            {%- assign outgoing = outgoing | push: etarget -%}
+          {%- endif -%}
+        {%- endif -%}
+      {%- endfor -%}
       {%- assign outgoing = outgoing | uniq -%}
       {
         "title": {{ doc.title | default: basename | jsonify }},
@@ -110,3 +156,4 @@ sitemap: false
     {%- endfor -%}
   ]
 }
+{%- endif -%}

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 =