@ -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 "/" .Site.BaseURL}},
{{$.Site.Data.graphConfig.paths}},
{{$.Site.Data.graphConfig.depth}},
{{$.Site.Data.graphConfig.enableDrag}},
{{$.Site.Data.graphConfig.enableLegend}},
{{$.Site.Data.graphConfig.enableZoom}}
);
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);
{{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 >
Jacky Zhao
3 years ago