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" .}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 88a859c3..91eda290 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -22,11 +22,10 @@
  • {{ .LinkTitle | humanize }}
  • {{ end }} - {{partial "toc.html" .}} + {{partial "toc.html" .}} {{partial "textprocessing.html" . }} {{partial "footer.html" .}} - {{partial "popover.html" .}} diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html index b7a45b10..e0a1e876 100644 --- a/layouts/_default/taxonomy.html +++ b/layouts/_default/taxonomy.html @@ -28,7 +28,6 @@ {{partial "contact.html" .}} -{{partial "popover.html" .}} diff --git a/layouts/_default/term.html b/layouts/_default/term.html index 16ea85cf..58f024bc 100644 --- a/layouts/_default/term.html +++ b/layouts/_default/term.html @@ -19,7 +19,6 @@ {{partial "contact.html" .}} -{{partial "popover.html" .}} diff --git a/layouts/index.html b/layouts/index.html index ee33d7cc..224c9978 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -13,12 +13,10 @@ {{partial "darkmode.html" .}}
    - {{partial "toc.html" .}} + {{partial "toc.html" .}} {{partial "textprocessing.html" . }}
    {{partial "footer.html" .}} - {{partial "popover.html" .}} - diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html index b8b2f616..b9f79763 100644 --- a/layouts/partials/graph.html +++ b/layouts/partials/graph.html @@ -16,14 +16,3 @@ {{ $js := resources.Get "js/graph.js" | resources.Fingerprint "md5" }} - diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 37938a55..a8d947e4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -35,6 +35,10 @@ {{partial "katex.html" .}} + {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" | + resources.Minify }} + + {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" | resources.Minify | }} {{$contentIndex := resources.Get @@ -59,36 +63,41 @@ })) {{if $.Site.Data.config.enableSPA}} + {{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" | + resources.Minify }} {{else}} diff --git a/layouts/partials/katex.html b/layouts/partials/katex.html index e11c4f14..756ef779 100644 --- a/layouts/partials/katex.html +++ b/layouts/partials/katex.html @@ -2,15 +2,4 @@ - {{end}} diff --git a/layouts/partials/popover.html b/layouts/partials/popover.html deleted file mode 100644 index ba1fd037..00000000 --- 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 }} - - -{{end}}