From 364aee36fc8891c48ab2bd20c396ce321cd7a0a6 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 05 May 2022 05:03:09 +0000
Subject: [PATCH] fix: merge conf
---
layouts/_default/single.html | 3
layouts/_default/section.html | 1
assets/js/search.js | 2
layouts/partials/graph.html | 11 --
assets/js/graph.js | 8 +
layouts/_default/taxonomy.html | 1
layouts/_default/term.html | 1
/dev/null | 8 --
assets/js/router.js | 12 +++
data/config.yaml | 2
assets/js/popover.js | 57 ++++++-------
layouts/index.html | 4
layouts/partials/head.html | 63 +++++++++------
layouts/partials/katex.html | 11 --
14 files changed, 84 insertions(+), 100 deletions(-)
diff --git a/assets/js/graph.js b/assets/js/graph.js
index c5829e9..f71e44d 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 @@
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 ea01156..9270b8a 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,20 +7,34 @@
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)
li.addEventListener("mouseover", () => {
@@ -29,25 +43,8 @@
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 0000000..81c25ac
--- /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 c5e293c..975eaa6 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -154,7 +154,7 @@
// 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 ccf38eb..2b606e7 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -3,7 +3,7 @@
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 1a4aae0..abdf0b0 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 88a859c..91eda29 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 b7a45b1..e0a1e87 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 16ea85c..58f024b 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 ee33d7c..224c997 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 b8b2f61..b9f7976 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 37938a5..a8d947e 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 e11c4f1..756ef77 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 ba1fd03..0000000
--- 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}}
--
Gitblit v1.10.0