diff --git a/assets/js/graph.js b/assets/js/graph.js
index c5829e927..f71e44d37 100644
--- a/assets/js/graph.js
+++ b/assets/js/graph.js
@@ -1,5 +1,4 @@
 async function drawGraph(
-  url,
   baseUrl,
   pathColors,
   depth,
@@ -8,9 +7,12 @@ async function drawGraph(
   enableZoom
 ) {
   const container = document.getElementById('graph-container')
-
   const { index, links, content } = await fetchData
-  const curPage = url.replace(baseUrl, '')
+
+  // Use .pathname to remove hashes / searchParams / text fragments
+  const cleanUrl = window.location.origin + window.location.pathname
+
+  const curPage = cleanUrl.replace(/\/$/g, "").replace(baseUrl, "")
 
   const parseIdsFromLinks = (links) => [
     ...new Set(links.flatMap((link) => [link.source, link.target])),
diff --git a/assets/js/popover.js b/assets/js/popover.js
index ea01156bb..9270b8ae0 100644
--- a/assets/js/popover.js
+++ b/assets/js/popover.js
@@ -1,5 +1,5 @@
 function htmlToElement(html) {
-  const template = document.createElement('template')
+  const template = document.createElement("template")
   html = html.trim()
   template.innerHTML = html
   return template.content.firstChild
@@ -7,19 +7,33 @@ function htmlToElement(html) {
 
 function initPopover(baseURL, useContextualBacklinks) {
   const basePath = baseURL.replace(window.location.origin, "")
-  document.addEventListener("DOMContentLoaded", () => {
-    fetchData.then(({ content }) => {
-      const links = [...document.getElementsByClassName("internal-link")]
-      links
-        .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
-        .forEach(li => {
-          if (li.dataset.ctx) {
-            console.log(li.dataset.ctx)
-            const linkDest = content[li.dataset.src]
-            const popoverElement = `<div class="popover">
+  fetchData.then(({ content }) => {
+    const links = [...document.getElementsByClassName("internal-link")]
+    links
+      .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
+      .forEach(li => {
+        if (li.dataset.ctx) {
+          const linkDest = content[li.dataset.src]
+          const popoverElement = `<div class="popover">
     <h3>${linkDest.title}</h3>
     <p>${highlight(removeMarkdown(linkDest.content), li.dataset.ctx)}...</p>
     <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
+</div>`
+          const el = htmlToElement(popoverElement)
+          li.appendChild(el)
+          li.addEventListener("mouseover", () => {
+            el.classList.add("visible")
+          })
+          li.addEventListener("mouseout", () => {
+            el.classList.remove("visible")
+          })
+        } else {
+          const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
+          if (linkDest) {
+            const popoverElement = `<div class="popover">
+    <h3>${linkDest.title}</h3>
+    <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
+    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
 </div>`
             const el = htmlToElement(popoverElement)
             li.appendChild(el)
@@ -29,25 +43,8 @@ function initPopover(baseURL, useContextualBacklinks) {
             li.addEventListener("mouseout", () => {
               el.classList.remove("visible")
             })
-          } else {
-            const linkDest = content[li.dataset.src.replace(/\/$/g, "").replace(basePath, "")]
-            if (linkDest) {
-              const popoverElement = `<div class="popover">
-    <h3>${linkDest.title}</h3>
-    <p>${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...</p>
-    <p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</p>
-</div>`
-              const el = htmlToElement(popoverElement)
-              li.appendChild(el)
-              li.addEventListener("mouseover", () => {
-                el.classList.add("visible")
-              })
-              li.addEventListener("mouseout", () => {
-                el.classList.remove("visible")
-              })
-            }
           }
-        })
-    })
+        }
+      })
   })
 }
diff --git a/assets/js/router.js b/assets/js/router.js
new file mode 100644
index 000000000..81c25ac1c
--- /dev/null
+++ b/assets/js/router.js
@@ -0,0 +1,12 @@
+import { router, navigate } from "https://unpkg.com/million@1.8.9-0/dist/router.mjs"
+
+export const attachSPARouting = (draw) => {
+  // SPA navigation for access later
+  window.navigate = navigate
+  // We only mutate document.title and content within .singlePage element
+  router(".singlePage")
+  // We need on initial load, then subsequent redirs
+  // requestAnimationFrame() delays graph draw until SPA routing is finished
+  window.addEventListener("million:navigate", () => requestAnimationFrame(draw))
+  window.addEventListener("DOMContentLoaded", () => requestAnimationFrame(draw))
+}
diff --git a/assets/js/search.js b/assets/js/search.js
index c5e293cc1..975eaa657 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -154,7 +154,7 @@ const highlight = (content, term) => {
     // SPA navigation
     window.navigate(
       new URL(
-        `${BASE_URL}${id}#:~:text=${encodeURIComponent(term)}/`
+        `${BASE_URL.replace(/\/$/g, "")}${id}#:~:text=${encodeURIComponent(term)}/`
       ),
       '.singlePage'
     )
diff --git a/data/config.yaml b/data/config.yaml
index ccf38eb71..2b606e74e 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -3,7 +3,7 @@ enableToc: true
 openToc: false
 enableLinkPreview: true
 enableLatex: true
-enableSPA: false
+enableSPA: true
 enableContextualBacklinks: true
 description:
   Host your second brain and digital garden for free. Quartz features extremely fast full-text search,
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index 1a4aae058..abdf0b05c 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -19,7 +19,6 @@
     </article>
     {{partial "contact.html" .}}
 </div>
-{{partial "popover.html" .}}
 </body>
 
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 88a859c3b..91eda290b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -22,11 +22,10 @@
           <li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
           {{ end }}
       </ul>
-      {{partial "toc.html" .}} 
+      {{partial "toc.html" .}}
       {{partial "textprocessing.html" . }}
     </article>
     {{partial "footer.html" .}}
-    {{partial "popover.html" .}}
 </div>
 </body>
 
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index b7a45b10f..e0a1e876c 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -28,7 +28,6 @@
     </article>
     {{partial "contact.html" .}}
 </div>
-{{partial "popover.html" .}}
 </body>
 
 </html>
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index 16ea85cf8..58f024bcc 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -19,7 +19,6 @@
     </article>
     {{partial "contact.html" .}}
 </div>
-{{partial "popover.html" .}}
 </body>
 
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index ee33d7cc8..224c99784 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -13,12 +13,10 @@
         {{partial "darkmode.html" .}}
     </header>
     <article>
-        {{partial "toc.html" .}} 
+        {{partial "toc.html" .}}
         {{partial "textprocessing.html" . }}
     </article>
     {{partial "footer.html" .}}
-    {{partial "popover.html" .}}
 </div>
 </body>
 </html>
-
diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
index b8b2f6162..b9f79763c 100644
--- a/layouts/partials/graph.html
+++ b/layouts/partials/graph.html
@@ -16,14 +16,3 @@
 </style>
 {{ $js := resources.Get "js/graph.js" | resources.Fingerprint "md5" }}
 <script src="{{ $js.Permalink }}"></script>
-<script>
-drawGraph(
-  {{strings.TrimRight "/" .Page.Permalink}},
-  {{strings.TrimRight "/" .Site.BaseURL}},
-  {{$.Site.Data.graphConfig.paths}},
-  {{$.Site.Data.graphConfig.depth}},
-  {{$.Site.Data.graphConfig.enableDrag}},
-  {{$.Site.Data.graphConfig.enableLegend}},
-  {{$.Site.Data.graphConfig.enableZoom}}
-);
-</script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 37938a556..a8d947e46 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -35,6 +35,10 @@
   <script src="{{$darkMode.Permalink}}"></script>
   {{partial "katex.html" .}}
 
+  {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
+  resources.Minify }}
+  <script src="{{$popover.Permalink}}"></script>
+
   <!--  Preload page vars  -->
   {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
   "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -59,36 +63,41 @@
         }))
   </script>
   {{if $.Site.Data.config.enableSPA}}
+  {{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
+  resources.Minify }}
   <script type="module">
-    import { router, navigate } from "https://unpkg.com/million/dist/router.mjs";
-    // SPA navigation for access later
-    window.navigate = navigate;
-    // We only mutate document.title and content within .singlePage element
-    router(".singlePage");
-    const callback = () => {
-      // requestAnimationFrame() delays graph draw until SPA routing is finished
-      const draw = () => {
-        const container = document.getElementById("graph-container");
-        // retry if the graph is not ready
-        if (!container) return requestAnimationFrame(draw);
-        // clear the graph in case there is anything within it
-        container.textContent = "";
+    import { attachSPARouting } from '{{$router.Permalink}}';
+    // NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page.
+    const draw = () => {
+      const container = document.getElementById("graph-container")
+      // retry if the graph is not ready
+      if (!container) return requestAnimationFrame(draw)
+      // clear the graph in case there is anything within it
+      container.textContent = ""
 
-        drawGraph(
-          {{strings.TrimRight "/" .Page.Permalink}},
-          {{strings.TrimRight "/" .Site.BaseURL}},
-          {{$.Site.Data.graphConfig.paths}},
-          {{$.Site.Data.graphConfig.depth}},
-          {{$.Site.Data.graphConfig.enableDrag}},
-          {{$.Site.Data.graphConfig.enableLegend}},
-          {{$.Site.Data.graphConfig.enableZoom}}
-        );
-      };
-      requestAnimationFrame(draw);
+      drawGraph(
+        {{strings.TrimRight "/" .Site.BaseURL}},
+        {{$.Site.Data.graphConfig.paths}},
+        {{$.Site.Data.graphConfig.depth}},
+        {{$.Site.Data.graphConfig.enableDrag}},
+        {{$.Site.Data.graphConfig.enableLegend}},
+        {{$.Site.Data.graphConfig.enableZoom}}
+      );
+
+      {{if $.Site.Data.config.enableLinkPreview}}
+      initPopover({{strings.TrimRight "/" .Site.BaseURL }}, {{$.Site.Data.config.enableContextualBacklinks}})
+      {{end}}
+      {{if $.Site.Data.config.enableLatex}}
+      renderMathInElement(document.body, {
+        delimiters: [
+          {left: '$$', right: '$$', display: true},
+          {left: '$', right: '$', display: false},
+        ],
+        throwOnError : false
+      });
+      {{end}}
     };
-    // We need on initial load, then subsequent redirs
-    window.addEventListener("million:navigate", callback);
-    window.addEventListener("DOMContentLoaded", callback);
+    attachSPARouting(draw);
   </script>
   {{else}}
   <script>window.navigate = (url) => window.location.href = url</script>
diff --git a/layouts/partials/katex.html b/layouts/partials/katex.html
index e11c4f14e..756ef779e 100644
--- a/layouts/partials/katex.html
+++ b/layouts/partials/katex.html
@@ -2,15 +2,4 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    renderMathInElement(document.body, {
-      delimiters: [
-        {left: '$$', right: '$$', display: true},
-        {left: '$', right: '$', display: false},
-      ],
-      throwOnError : false
-    });
-  });
-</script>
 {{end}}
diff --git a/layouts/partials/popover.html b/layouts/partials/popover.html
deleted file mode 100644
index ba1fd0373..000000000
--- a/layouts/partials/popover.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{{if $.Site.Data.config.enableLinkPreview}}
-{{ $js := resources.Get "js/popover.js" |  resources.Fingerprint "md5" | resources.Minify }}
-<script src="{{ $js.Permalink }}"></script>
-<script>
-  const useContextual = {{ $.Site.Data.config.enableContextualBacklinks }}
-  initPopover({{strings.TrimRight "/" .Site.BaseURL }}, useContextual)
-</script>
-{{end}}