jekyll-theme-zer0 1.3.0 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '069f0c330f3b5a4b0fac6331452c7d9d66c5f92308ad9ffef53454e03602efd3'
-  data.tar.gz: 15d1bdacec707645bdc406bab1229253684bf23370f949a7bb6d66b7390aa563
+  metadata.gz: 0ae8ec5b12734cd267a46b1b5c26ed95f7d55b004e6dd9a52111a477f6bbc395
+  data.tar.gz: 84ff1429cdd6504bef5977c44ff88ff9078ffdb2dcd98ea39304c10f939daceb
 SHA512:
-  metadata.gz: 0c8788ad1dc1ba8af7ca402d5f2643eaab1c47c12307a265d427547b00678ce1115482552aa1090d6d560881282ee70eb6b2674b8bb41e03b9f4d302ce2ba47c
-  data.tar.gz: dc0b3a38a9f1f9d7dfb272ca3c72634845c9bc2295f198b6731e43249f3ecd2a6610a1ddaf92cb20457443c71e337b4ced9352fe85d41eb641604e12d2eba426
+  metadata.gz: 4c194515ed9cbf3590d46b6c887b9a27c94bbdfb4a5e841417ae759e25b59bd5bf0612846ce20927361daefa42b23459152336db6fb22874ce56b05c87d0203b
+  data.tar.gz: d0469bd560f3ddfc264b22e0fd4b7f7ffed2b9c1a7f524f3975b5a574a7a2ae0c5c8bf53c25db53eec1bb4201e21078f95a45de46e3dd742569171ca15d29421

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [1.4.1] - 2026-04-28
+
+### Changed
+- Version bump: patch release
+
+### Commits in this release
+- 9830d3d refactor(obsidian): extract full graph include and sync docs (#82)
+
+
+## [1.4.0] - 2026-04-25
+
+### Changed
+- Version bump: minor release
+
+### Commits in this release
+- d39dfa9 Add standalone Obsidian local graph panel (#77)
+
+
 ## [1.3.0] - 2026-04-24
 
 ### Changed
@@ -39,7 +57,16 @@
 
 ## [Unreleased]
 
+### Changed
+- **Docker/Jekyll build performance** — Reduced repeated full-page Liquid scans in the footer, settings offcanvas, and cookie consent includes; cached preview image checks during generation; skipped server-side Obsidian rewrites for documents without Obsidian syntax; and changed Docker dev startup to run `bundle install` only when `bundle check` reports missing dependencies. The profiled Docker build improved from 119.2s to 86.8s in local validation.
+
 ### Added
+- **Development Automation**: Added `scripts/bin/validate` and `scripts/validate`
+  as the canonical preflight validation command for repository files, version
+  consistency, YAML/data parsing, active configuration contracts, config-file
+  classification, navigation data shape, Jekyll build/doctor, compiled assets,
+  and optional tests/Obsidian/HTMLProofer checks. CI fast checks now call
+  `./scripts/bin/validate --quick`.
 - **Obsidian Integration** — The repo's markdown content is now editable as an [Obsidian](https://obsidian.md) vault and rendered identically on GitHub Pages.
   - Shared vault config (`.obsidian/app.json`, `core-plugins.json`, `community-plugins.json`, `appearance.json`, `hotkeys.json`, `templates.json`) and a Templates-compatible note template at `pages/_notes/_templates/note-template.md`.
   - Liquid-generated `assets/data/wiki-index.json` listing every collection document and standalone page (title, basename, permalink, tags, aliases, excerpt) — works on the default GitHub Pages remote_theme build, no plugin whitelist changes required.
@@ -76,6 +103,20 @@
   `Your Site Title`, `My Awesome Site`, `Welcome`, `Untitled`, or empty).
 
 ### Fixed
+- **Obsidian Local Graph**: Moved the local graph out of the documentation
+  navigation sidebar into its own collapsible side panel with a larger canvas
+  and resize-on-open behavior so Cytoscape renders cleanly. Pages with no
+  local wiki-link neighbors now keep the graph control visible and render a
+  current-page-only graph instead of hiding the panel.
+- **Obsidian Resolver**: The client-side wiki-link resolver now receives
+  baseurl-safe index, attachment, and tag URLs from Liquid and derives a safe
+  fallback from its script path for GitHub Pages project sites.
+- **Backlinks**: The linked-mentions include now skips draft and unpublished
+  candidates unless `site.show_drafts` is enabled.
+- **Validation**: `scripts/bin/validate --quick` now accepts YAML anchors and
+  date values used by repository config/data files.
+- **Tests**: `test/test_runner.sh` now includes an `obsidian` suite key/name so
+  suite keys, scripts, and labels stay aligned.
 - **Footer Quick Links no longer 404 on bare-minimum sites.**
   `_includes/core/footer.html` previously hard-coded links to
   `/about/`, `/services/`, `/news/`, `/contact/`, `/privacy-policy`, and

data/README.md

@@ -2,7 +2,7 @@
 title: zer0-mistakes
 sub-title: AI-Native Jekyll Theme
 description: AI-native Jekyll theme for GitHub Pages — Docker-first development, AI-powered installation, multi-agent integration (Copilot, Codex, Cursor, Claude), AI preview-image generation, and AIEO content optimization with Bootstrap 5.3.
-version: 1.3.0
+version: 1.4.1
 layout: landing
 tags:
   - jekyll
@@ -20,7 +20,7 @@ categories:
   - bootstrap
   - ai-tooling
 created: 2024-02-10T23:51:11.480Z
-lastmod: 2026-04-24T23:27:06.000Z
+lastmod: 2026-04-28T21:04:09.000Z
 draft: false
 permalink: /
 slug: zer0
@@ -1138,7 +1138,7 @@ git push origin feature/awesome-feature
 
 | Metric | Value |
 |--------|-------|
-| **Current Version** | 1.3.0 ([RubyGems](https://rubygems.org/gems/jekyll-theme-zer0), [CHANGELOG](/CHANGELOG)) |
+| **Current Version** | 1.4.1 ([RubyGems](https://rubygems.org/gems/jekyll-theme-zer0), [CHANGELOG](/CHANGELOG)) |
 | **Documented Features** | 43 ([Feature Registry](https://github.com/bamr87/zer0-mistakes/blob/main/_data/features.yml)) |
 | **Setup Time** | 2-5 minutes ([install.sh benchmarks](https://github.com/bamr87/zer0-mistakes/blob/main/install.sh)) |
 | **Documentation Pages** | 70+ ([browse docs](/pages/)) |
@@ -1189,6 +1189,6 @@ And these AI partners that make zer0-mistakes truly AI-native:
 
 **Built with ❤️ — and a little help from our AI partners — for the Jekyll community**
 
-**v1.3.0** • [Changelog](CHANGELOG.md) • [License](LICENSE) • [Contributing](CONTRIBUTING.md) • [AI Agent Guide](AGENTS.md)
+**v1.4.1** • [Changelog](CHANGELOG.md) • [License](LICENSE) • [Contributing](CONTRIBUTING.md) • [AI Agent Guide](AGENTS.md)
 
 

data/_includes/components/cookie-consent.html

@@ -59,9 +59,8 @@ Configuration: Uses site.posthog settings from _config.yml
         </p>
         <p class="mb-2 mb-lg-0 small text-white-50">
           This website uses cookies and similar technologies to enhance your browsing experience, analyze traffic, and provide personalized content.
-          {% assign _pp = site.html_pages | where: "url", "/privacy-policy/" | first %}
-          {% unless _pp %}{% assign _pp = site.html_pages | where: "url", "/privacy-policy" | first %}{% endunless %}
-          {% if _pp or site.privacy_policy_url %}
+          {% assign cookie_page_urls = site.html_pages | map: "url" | join: "|" | prepend: "|" | append: "|" %}
+          {% if site.privacy_policy_url or cookie_page_urls contains "|/privacy-policy/|" or cookie_page_urls contains "|/privacy-policy|" %}
             <a href="{{ site.privacy_policy_url | default: '/privacy-policy/' | relative_url }}" class="text-white text-decoration-underline">Learn more in our Privacy Policy</a>.
           {% endif %}
         </p>

data/_includes/components/info-section.html

@@ -22,6 +22,7 @@
 -->
 
 {% include components/env-detect.html %}
+{% assign info_section_page_urls = site.html_pages | map: "url" | join: "|" | prepend: "|" | append: "|" %}
 <!-- Settings Offcanvas -->
 <div class="offcanvas offcanvas-end" tabindex="-1" id="info-section" aria-labelledby="infoSectionLabel">
   
@@ -111,9 +112,12 @@
         <!-- Admin Quick Links — only render links to pages that actually exist
              in the build (prevents 404s on bare-minimum / remote-theme sites
              that haven't created the admin pages). -->
-        {% assign _cfg_page = site.html_pages | where: "url", "/about/config/" | first %}
-        {% assign _theme_page = site.html_pages | where: "url", "/about/settings/theme/" | first %}
-        {% assign _nav_page = site.html_pages | where: "url", "/about/settings/navigation/" | first %}
+        {% assign _cfg_page = false %}
+        {% assign _theme_page = false %}
+        {% assign _nav_page = false %}
+        {% if info_section_page_urls contains "|/about/config/|" %}{% assign _cfg_page = true %}{% endif %}
+        {% if info_section_page_urls contains "|/about/settings/theme/|" %}{% assign _theme_page = true %}{% endif %}
+        {% if info_section_page_urls contains "|/about/settings/navigation/|" %}{% assign _nav_page = true %}{% endif %}
         {% if _cfg_page or _theme_page or _nav_page %}
         <div class="mb-3">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
@@ -145,7 +149,8 @@
         {% include components/env-switcher.html %}
 
         <!-- Admin Link — only when target page exists -->
-        {% assign _env_page = site.html_pages | where: "url", "/about/settings/environment/" | first %}
+        {% assign _env_page = false %}
+        {% if info_section_page_urls contains "|/about/settings/environment/|" %}{% assign _env_page = true %}{% endif %}
         {% if _env_page %}
         <div class="mt-4 pt-3 border-top">
           <a href="{{ '/about/settings/environment/' | relative_url }}" class="btn btn-outline-secondary btn-sm w-100">

data/_includes/components/js-cdn.html

@@ -35,4 +35,11 @@
 
 <!-- Obsidian wiki-link / embed / tag client-side resolver (fallback for the
      remote_theme GH Pages build, where _plugins/obsidian_links.rb cannot run). -->
-<script defer src="{{ '/assets/js/obsidian-wiki-links.js' | relative_url }}"></script>
+{%- assign obsidian_attachments_path = site.obsidian.attachments_path | default: '/assets/images/notes' -%}
+<script>
+  window.OBSIDIAN_CONFIG = window.OBSIDIAN_CONFIG || {};
+  window.OBSIDIAN_CONFIG.wikiIndexUrl = {{ '/assets/data/wiki-index.json' | relative_url | jsonify }};
+  window.OBSIDIAN_CONFIG.attachmentsPath = {{ obsidian_attachments_path | relative_url | jsonify }};
+  window.OBSIDIAN_CONFIG.tagBase = {{ '/tags/' | relative_url | jsonify }};
+</script>
+<script defer src="{{ '/assets/js/obsidian-wiki-links.js' | relative_url }}"></script>

data/_includes/content/backlinks.html

@@ -41,6 +41,10 @@
   {%- assign _backlinks = "" | split: "" -%}
   {%- for _doc in _candidates -%}
     {%- if _doc.url == _self_url -%}{%- continue -%}{%- endif -%}
+    {%- comment -%} Hide draft/unpublished references unless this build includes drafts. {%- endcomment -%}
+    {%- unless site.show_drafts == true -%}
+      {%- if _doc.published == false or _doc.draft == true -%}{%- continue -%}{%- endif -%}
+    {%- endunless -%}
     {%- assign _body = _doc.content | default: "" -%}
     {%- assign _body_lower = _body | downcase -%}
     {%- assign _matched = false -%}

data/_includes/core/footer.html

@@ -31,6 +31,7 @@
 -->
 
 <footer class="bd-footer border-top" role="contentinfo">
+  {% assign footer_page_urls = site.html_pages | map: "url" | join: "|" | prepend: "|" | append: "|" %}
   <!-- Powered by Row -->
   <div class="container-xl my-3">
     <ul class="nav justify-content-end list-unstyled d-flex align-items-center flex-wrap" aria-label="Powered by technologies">
@@ -100,8 +101,8 @@
                   {% assign _parts = entry | split: "," %}
                   {% assign _label = _parts[0] %}
                   {% assign _url   = _parts[1] %}
-                  {% assign _page  = site.html_pages | where: "url", _url | first %}
-                  {% if _page %}
+                  {% assign _needle = "|" | append: _url | append: "|" %}
+                  {% if footer_page_urls contains _needle %}
                     <li><a href="{{ _url | relative_url }}" class="text-light text-decoration-none">{{ _label }}</a></li>
                   {% endif %}
                 {% endfor %}
@@ -169,14 +170,14 @@
           <div class="col-md-4 text-md-end">
             <ul class="list-inline mb-0">
               {% comment %} Only render policy links whose pages exist (or that are explicitly configured). {% endcomment %}
-              {% assign _privacy = site.html_pages | where: "url", "/privacy-policy/" | first %}
-              {% unless _privacy %}{% assign _privacy = site.html_pages | where: "url", "/privacy-policy" | first %}{% endunless %}
-              {% if _privacy or site.privacy_policy_url %}
+              {% assign _privacy_needle = "|/privacy-policy/|" %}
+              {% assign _privacy_alt_needle = "|/privacy-policy|" %}
+              {% if site.privacy_policy_url or footer_page_urls contains _privacy_needle or footer_page_urls contains _privacy_alt_needle %}
                 <li class="list-inline-item"><a href="{{ site.privacy_policy_url | default: '/privacy-policy' | relative_url }}" class="text-light text-decoration-none">Privacy Policy</a></li>
               {% endif %}
-              {% assign _terms = site.html_pages | where: "url", "/terms-of-service/" | first %}
-              {% unless _terms %}{% assign _terms = site.html_pages | where: "url", "/terms-of-service" | first %}{% endunless %}
-              {% if _terms or site.terms_of_service_url %}
+              {% assign _terms_needle = "|/terms-of-service/|" %}
+              {% assign _terms_alt_needle = "|/terms-of-service|" %}
+              {% if site.terms_of_service_url or footer_page_urls contains _terms_needle or footer_page_urls contains _terms_alt_needle %}
                 <li class="list-inline-item"><a href="{{ site.terms_of_service_url | default: '/terms-of-service' | relative_url }}" class="text-light text-decoration-none">Terms of Service</a></li>
               {% endif %}
               <li class="list-inline-item">

data/_includes/navigation/local-graph.html

@@ -1,21 +1,21 @@
 {%- comment -%}
   ===================================================================
-  LOCAL GRAPH WIDGET — sidebar mini graph
+  LOCAL GRAPH SIDEBAR — collapsible page-scoped graph
   ===================================================================
 
   File: local-graph.html
   Path: _includes/navigation/local-graph.html
-  Purpose: Renders a small "local graph" of the current page and its
-           immediate wiki-link neighbors in the left sidebar (Obsidian-
-           style local graph view).
+  Purpose: Renders a collapsible, page-scoped graph of the current page and
+           its immediate wiki-link neighbors in a separate side panel.
 
   Behavior:
   - Reads /assets/data/wiki-index.json
   - Finds the current page by window.location.pathname (with title/basename
     fallback for permalink quirks)
   - BFS depth=1 by default (current + direct neighbors, in & out)
-  - Hides itself if the current page is not in the wiki-index, has no
-    neighbors, or the index can't be loaded
+  - Renders the current page as a single-node graph when it has no neighbors
+  - Hides itself if the current page is not in the wiki-index or the index
+    can't be loaded
   - Lazily loads cytoscape.js from CDN with SRI + crossorigin
 
   Opt-out: set `local_graph: false` in page front matter.
@@ -25,20 +25,55 @@
 {%- endcomment -%}
 {%- if page.local_graph != false -%}
 {%- assign lg_depth = page.local_graph_depth | default: 1 -%}
-<div class="obsidian-local-graph-widget mb-3" aria-label="Local graph">
-  <div class="d-flex align-items-center justify-content-between mb-1">
-    <span class="text-uppercase fw-semibold small text-secondary">
-      <i class="bi bi-diagram-3 me-1" aria-hidden="true"></i>Local graph
-    </span>
-    <a href="{{ '/docs/obsidian/graph/' | relative_url }}"
-       class="small text-decoration-none"
-       title="Open the full site graph">full&nbsp;&rsaquo;</a>
-  </div>
-  <div id="obsidian-local-graph"
-       data-depth="{{ lg_depth }}"
-       data-index-url="{{ '/assets/data/wiki-index.json' | relative_url }}"
-       role="img"
-       aria-label="Local graph of pages linked to this page"></div>
+<div class="obsidian-local-graph-fab d-print-none" data-obsidian-local-graph-toggle>
+  <button class="btn btn-primary rounded-circle shadow-lg obsidian-local-graph-toggle"
+          type="button"
+          data-bs-toggle="offcanvas"
+          data-bs-target="#obsidianLocalGraphPanel"
+          aria-controls="obsidianLocalGraphPanel"
+          aria-label="Open local graph"
+          title="Open local graph">
+    <i class="bi bi-diagram-3 fs-5" aria-hidden="true"></i>
+  </button>
 </div>
+
+<aside class="offcanvas offcanvas-start obsidian-local-graph-panel"
+       tabindex="-1"
+       id="obsidianLocalGraphPanel"
+       aria-labelledby="obsidianLocalGraphLabel"
+       data-bs-scroll="true"
+       data-bs-backdrop="false"
+       data-obsidian-local-graph-panel>
+  <div class="offcanvas-header">
+    <h2 class="offcanvas-title h5 mb-0" id="obsidianLocalGraphLabel">
+      <i class="bi bi-diagram-3 me-2" aria-hidden="true"></i>Local graph
+    </h2>
+    <button type="button"
+            class="btn-close"
+            data-bs-dismiss="offcanvas"
+            data-bs-target="#obsidianLocalGraphPanel"
+            aria-label="Close local graph"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div class="obsidian-local-graph-widget" aria-label="Local graph">
+      <div class="obsidian-local-graph-meta d-flex align-items-center justify-content-between gap-2 mb-3">
+        <span class="badge text-bg-secondary">Depth {{ lg_depth }}</span>
+        <a href="{{ '/docs/obsidian/graph/' | relative_url }}"
+           class="btn btn-outline-primary btn-sm"
+           title="Open the full site graph">
+          <i class="bi bi-arrows-fullscreen me-1" aria-hidden="true"></i>Full graph
+        </a>
+      </div>
+      <div id="obsidian-local-graph"
+           data-depth="{{ lg_depth }}"
+           data-index-url="{{ '/assets/data/wiki-index.json' | relative_url }}"
+           role="img"
+           aria-label="Local graph of pages linked to this page"></div>
+      <p class="obsidian-local-graph-status small text-secondary mt-2 mb-0"
+         data-obsidian-local-graph-status
+         role="status">Loading graph...</p>
+    </div>
+  </div>
+</aside>
 <script src="{{ '/assets/js/obsidian-local-graph.js' | relative_url }}" defer></script>
 {%- endif -%}

data/_includes/navigation/sidebar-left.html

@@ -48,12 +48,6 @@
   <!-- Scrollable content area with dynamic navigation options -->
   <div class="offcanvas-body overflow-auto">
 
-    <!-- ========================== -->
-    <!-- LOCAL GRAPH WIDGET        -->
-    <!-- ========================== -->
-    <!-- Mini Obsidian-style local graph of the current page + neighbors -->
-    {% include navigation/local-graph.html %}
-
     <!-- ========================== -->
     <!-- AUTO MODE: Collection Docs -->
     <!-- ========================== -->

data/_includes/obsidian/full-graph.html

@@ -0,0 +1,170 @@
+<style>
+  /* Scoped to the graph page so we don't leak into other docs. */
+  #obsidian-graph {
+    width: 100%;
+    height: 82vh;
+    min-height: 620px;
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-radius: var(--bs-border-radius-lg, .5rem);
+    background: var(--bs-tertiary-bg, #f8f9fa);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
+    position: relative;
+    overflow: hidden;
+  }
+  #obsidian-graph-stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .375rem;
+  }
+  #obsidian-graph-stats .badge {
+    font-size: .8125rem;
+    font-weight: 500;
+    padding: .35rem .6rem;
+  }
+  .obsidian-graph-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem .75rem;
+    align-items: center;
+    margin: .75rem 0;
+    padding: .625rem .75rem;
+    background: var(--bs-tertiary-bg, #f8f9fa);
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-radius: var(--bs-border-radius, .375rem);
+  }
+  .obsidian-graph-toolbar .form-control {
+    max-width: 280px;
+    flex: 1 1 200px;
+  }
+  .obsidian-graph-toolbar .form-check {
+    margin-bottom: 0;
+  }
+  #obsidian-graph-status {
+    flex-basis: 100%;
+    font-size: .8125rem;
+    color: var(--bs-secondary-color, #6c757d);
+    min-height: 1.25rem;
+  }
+  .obsidian-graph-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem;
+    margin-top: .75rem;
+    font-size: .8125rem;
+  }
+  .obsidian-graph-legend > span {
+    display: inline-flex;
+    align-items: center;
+    gap: .375rem;
+    padding: .25rem .55rem;
+    background: var(--bs-body-bg, #fff);
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-radius: 999px;
+    color: var(--bs-body-color, #212529);
+  }
+  .obsidian-graph-legend .swatch {
+    display: inline-block;
+    width: .7rem;
+    height: .7rem;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
+  }
+  .obsidian-graph-legend .swatch-broken {
+    border: 1.5px dashed #dc3545;
+    background: transparent !important;
+    box-shadow: none;
+  }
+  .obsidian-graph-tips {
+    margin-top: .75rem;
+    padding: .625rem .75rem;
+    font-size: .8125rem;
+    color: var(--bs-secondary-color, #6c757d);
+    background: var(--bs-tertiary-bg, #f8f9fa);
+    border-left: 3px solid var(--bs-primary, #0d6efd);
+    border-radius: .25rem;
+  }
+  .obsidian-graph-tips strong {
+    color: var(--bs-body-color, #212529);
+  }
+</style>
+
+# Obsidian Graph View
+
+A live, force-directed map of every page on this site and every
+`[[wiki-link]]` between them. This is the rendered-site equivalent of
+Obsidian's local graph view — built from the same
+[`assets/data/wiki-index.json`]({{ "/assets/data/wiki-index.json" | relative_url }})
+that powers the [client-side resolver]({{ "/docs/obsidian/syntax-reference/" | relative_url }})
+and [backlinks panel]({{ "/docs/obsidian/syntax-reference/#backlinks-panel" | relative_url }}).
+
+<div id="obsidian-graph-stats" class="mb-2" aria-live="polite"></div>
+
+<div class="obsidian-graph-toolbar">
+  <input type="search"
+         class="form-control form-control-sm"
+         id="obsidian-graph-search"
+         placeholder="Filter nodes by title…"
+         aria-label="Filter graph nodes by title" />
+  <button type="button"
+          class="btn btn-outline-secondary btn-sm"
+          id="obsidian-graph-fit">
+    <i class="bi bi-arrows-fullscreen" aria-hidden="true"></i>
+    Reset view
+  </button>
+  <div class="form-check form-switch">
+    <input class="form-check-input"
+           type="checkbox"
+           role="switch"
+           id="obsidian-graph-orphans" />
+    <label class="form-check-label" for="obsidian-graph-orphans">
+      Show orphans
+    </label>
+  </div>
+  <span id="obsidian-graph-status" role="status"></span>
+</div>
+
+<div id="obsidian-graph" role="img" aria-label="Site knowledge graph"></div>
+
+<div class="obsidian-graph-legend" aria-label="Graph legend">
+  <span><span class="swatch" style="background:#0d6efd"></span>Posts</span>
+  <span><span class="swatch" style="background:#198754"></span>Docs</span>
+  <span><span class="swatch" style="background:#6f42c1"></span>Notes</span>
+  <span><span class="swatch" style="background:#d63384"></span>Notebooks</span>
+  <span><span class="swatch" style="background:#fd7e14"></span>Quickstart</span>
+  <span><span class="swatch" style="background:#6c757d"></span>Pages</span>
+  <span><span class="swatch swatch-broken"></span>Broken links</span>
+</div>
+
+<div class="obsidian-graph-tips">
+  <strong>Tips:</strong> click a node to open the page · ⌘/Ctrl-click to
+  open in a new tab · drag to reposition · scroll to zoom · hover to
+  highlight a node's neighborhood · type in the search box to filter.
+</div>
+
+## How it's built
+
+| Piece | File |
+| --- | --- |
+| Build-time index (nodes + outgoing edges) | [`assets/data/wiki-index.json`]({{ "/assets/data/wiki-index.json" | relative_url }}) (Liquid template at [`assets/data/wiki-index.json`](https://github.com/bamr87/zer0-mistakes/blob/main/assets/data/wiki-index.json)) |
+| Renderer | `assets/js/obsidian-graph.js` |
+| Layout engine | [cytoscape.js](https://js.cytoscape.org/) (loaded from CDN, only on this page) |
+
+Outgoing edges come from the same `[[…]]` syntax the resolver handles —
+unresolved targets show up as dashed red nodes so you can find dangling
+links at a glance. The graph is regenerated every Jekyll build; nothing
+runs client-side except cytoscape's force layout.
+
+<!-- Cytoscape.js (only loaded on this page). -->
+<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.30.0/dist/cytoscape.min.js"
+        integrity="sha384-kpMsYllYzyaWU69Piok08rPNktpnjqAoDMdB00fjqUkEk3lkuUbSuwJ+oXrjvN6B"
+        crossorigin="anonymous"
+        defer></script>
+<script src="{{ '/assets/js/obsidian-graph.js' | relative_url }}" defer></script>
+
+## See also
+
+- [[Obsidian Vault Integration]]
+- [[Obsidian Syntax Reference]]
+- [[Obsidian Authoring Workflow]]
+- [[Getting Started with the Obsidian Vault]]
+- [[Obsidian Integration Troubleshooting]]