fix: merge conf

This commit is contained in:
Jacky Zhao 2022-05-05 01:03:09 -04:00
commit b61392bea6
14 changed files with 84 additions and 100 deletions

View File

@ -1,5 +1,4 @@
async function drawGraph( async function drawGraph(
url,
baseUrl, baseUrl,
pathColors, pathColors,
depth, depth,
@ -8,9 +7,12 @@ async function drawGraph(
enableZoom enableZoom
) { ) {
const container = document.getElementById('graph-container') const container = document.getElementById('graph-container')
const { index, links, content } = await fetchData 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) => [ const parseIdsFromLinks = (links) => [
...new Set(links.flatMap((link) => [link.source, link.target])), ...new Set(links.flatMap((link) => [link.source, link.target])),

View File

@ -1,5 +1,5 @@
function htmlToElement(html) { function htmlToElement(html) {
const template = document.createElement('template') const template = document.createElement("template")
html = html.trim() html = html.trim()
template.innerHTML = html template.innerHTML = html
return template.content.firstChild return template.content.firstChild
@ -7,19 +7,33 @@ function htmlToElement(html) {
function initPopover(baseURL, useContextualBacklinks) { function initPopover(baseURL, useContextualBacklinks) {
const basePath = baseURL.replace(window.location.origin, "") const basePath = baseURL.replace(window.location.origin, "")
document.addEventListener("DOMContentLoaded", () => { fetchData.then(({ content }) => {
fetchData.then(({ content }) => { const links = [...document.getElementsByClassName("internal-link")]
const links = [...document.getElementsByClassName("internal-link")] links
links .filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks))
.filter(li => li.dataset.src || (li.dataset.idx && useContextualBacklinks)) .forEach(li => {
.forEach(li => { if (li.dataset.ctx) {
if (li.dataset.ctx) { const linkDest = content[li.dataset.src]
console.log(li.dataset.ctx) const popoverElement = `<div class="popover">
const linkDest = content[li.dataset.src]
const popoverElement = `<div class="popover">
<h3>${linkDest.title}</h3> <h3>${linkDest.title}</h3>
<p>${highlight(removeMarkdown(linkDest.content), li.dataset.ctx)}...</p> <p>${highlight(removeMarkdown(linkDest.content), li.dataset.ctx)}...</p>
<p class="meta">${new Date(linkDest.lastmodified).toLocaleDateString()}</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>` </div>`
const el = htmlToElement(popoverElement) const el = htmlToElement(popoverElement)
li.appendChild(el) li.appendChild(el)
@ -29,25 +43,8 @@ function initPopover(baseURL, useContextualBacklinks) {
li.addEventListener("mouseout", () => { li.addEventListener("mouseout", () => {
el.classList.remove("visible") 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")
})
}
} }
}) }
}) })
}) })
} }

12
assets/js/router.js Normal file
View File

@ -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))
}

View File

@ -154,7 +154,7 @@ const highlight = (content, term) => {
// SPA navigation // SPA navigation
window.navigate( window.navigate(
new URL( new URL(
`${BASE_URL}${id}#:~:text=${encodeURIComponent(term)}/` `${BASE_URL.replace(/\/$/g, "")}${id}#:~:text=${encodeURIComponent(term)}/`
), ),
'.singlePage' '.singlePage'
) )

View File

@ -3,7 +3,7 @@ enableToc: true
openToc: false openToc: false
enableLinkPreview: true enableLinkPreview: true
enableLatex: true enableLatex: true
enableSPA: false enableSPA: true
enableContextualBacklinks: true enableContextualBacklinks: true
description: description:
Host your second brain and digital garden for free. Quartz features extremely fast full-text search, Host your second brain and digital garden for free. Quartz features extremely fast full-text search,

View File

@ -19,7 +19,6 @@
</article> </article>
{{partial "contact.html" .}} {{partial "contact.html" .}}
</div> </div>
{{partial "popover.html" .}}
</body> </body>
</html> </html>

View File

@ -22,11 +22,10 @@
<li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li> <li><a href="{{ .Permalink }}">{{ .LinkTitle | humanize }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
{{partial "toc.html" .}} {{partial "toc.html" .}}
{{partial "textprocessing.html" . }} {{partial "textprocessing.html" . }}
</article> </article>
{{partial "footer.html" .}} {{partial "footer.html" .}}
{{partial "popover.html" .}}
</div> </div>
</body> </body>

View File

@ -28,7 +28,6 @@
</article> </article>
{{partial "contact.html" .}} {{partial "contact.html" .}}
</div> </div>
{{partial "popover.html" .}}
</body> </body>
</html> </html>

View File

@ -19,7 +19,6 @@
</article> </article>
{{partial "contact.html" .}} {{partial "contact.html" .}}
</div> </div>
{{partial "popover.html" .}}
</body> </body>
</html> </html>

View File

@ -13,12 +13,10 @@
{{partial "darkmode.html" .}} {{partial "darkmode.html" .}}
</header> </header>
<article> <article>
{{partial "toc.html" .}} {{partial "toc.html" .}}
{{partial "textprocessing.html" . }} {{partial "textprocessing.html" . }}
</article> </article>
{{partial "footer.html" .}} {{partial "footer.html" .}}
{{partial "popover.html" .}}
</div> </div>
</body> </body>
</html> </html>

View File

@ -16,14 +16,3 @@
</style> </style>
{{ $js := resources.Get "js/graph.js" | resources.Fingerprint "md5" }} {{ $js := resources.Get "js/graph.js" | resources.Fingerprint "md5" }}
<script src="{{ $js.Permalink }}"></script> <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>

View File

@ -35,6 +35,10 @@
<script src="{{$darkMode.Permalink}}"></script> <script src="{{$darkMode.Permalink}}"></script>
{{partial "katex.html" .}} {{partial "katex.html" .}}
{{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
resources.Minify }}
<script src="{{$popover.Permalink}}"></script>
<!-- Preload page vars --> <!-- Preload page vars -->
{{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
"md5" | resources.Minify | }} {{$contentIndex := resources.Get "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@ -59,36 +63,41 @@
})) }))
</script> </script>
{{if $.Site.Data.config.enableSPA}} {{if $.Site.Data.config.enableSPA}}
{{ $router := resources.Get "js/router.js" | resources.Fingerprint "md5" |
resources.Minify }}
<script type="module"> <script type="module">
import { router, navigate } from "https://unpkg.com/million/dist/router.mjs"; import { attachSPARouting } from '{{$router.Permalink}}';
// SPA navigation for access later // 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.
window.navigate = navigate; const draw = () => {
// We only mutate document.title and content within .singlePage element const container = document.getElementById("graph-container")
router(".singlePage"); // retry if the graph is not ready
const callback = () => { if (!container) return requestAnimationFrame(draw)
// requestAnimationFrame() delays graph draw until SPA routing is finished // clear the graph in case there is anything within it
const draw = () => { container.textContent = ""
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( drawGraph(
{{strings.TrimRight "/" .Page.Permalink}}, {{strings.TrimRight "/" .Site.BaseURL}},
{{strings.TrimRight "/" .Site.BaseURL}}, {{$.Site.Data.graphConfig.paths}},
{{$.Site.Data.graphConfig.paths}}, {{$.Site.Data.graphConfig.depth}},
{{$.Site.Data.graphConfig.depth}}, {{$.Site.Data.graphConfig.enableDrag}},
{{$.Site.Data.graphConfig.enableDrag}}, {{$.Site.Data.graphConfig.enableLegend}},
{{$.Site.Data.graphConfig.enableLegend}}, {{$.Site.Data.graphConfig.enableZoom}}
{{$.Site.Data.graphConfig.enableZoom}} );
);
}; {{if $.Site.Data.config.enableLinkPreview}}
requestAnimationFrame(draw); 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 attachSPARouting(draw);
window.addEventListener("million:navigate", callback);
window.addEventListener("DOMContentLoaded", callback);
</script> </script>
{{else}} {{else}}
<script>window.navigate = (url) => window.location.href = url</script> <script>window.navigate = (url) => window.location.href = url</script>

View File

@ -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"> <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/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 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}} {{end}}

View File

@ -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}}