diff --git a/assets/js/graph.js b/assets/js/graph.js
index c5829e92..f71e44d3 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 ea01156b..9270b8ae 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 = `
+ 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 = `
${linkDest.title}
${highlight(removeMarkdown(linkDest.content), li.dataset.ctx)}...
${new Date(linkDest.lastmodified).toLocaleDateString()}
+
`
+ 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 = `
+
${linkDest.title}
+
${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...
+
${new Date(linkDest.lastmodified).toLocaleDateString()}
`
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 = `
-
${linkDest.title}
-
${removeMarkdown(linkDest.content).split(" ", 20).join(" ")}...
-
${new Date(linkDest.lastmodified).toLocaleDateString()}
-
`
- 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 00000000..81c25ac1
--- /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 c5e293cc..975eaa65 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 ccf38eb7..2b606e74 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 1a4aae05..abdf0b05 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -19,7 +19,6 @@
{{partial "contact.html" .}}
-{{partial "popover.html" .}}