forked from drowl87/hextra_mirror
refactor: modularize scripts partial into separate components (#587)
* refactor: modularize scripts partial into separate components * fix: conditionally load Mermaid and KaTeX scripts
This commit is contained in:
Xin
GitHub
parent
49b1cd11ee
commit
c2286c9dd1
@ -1,104 +1,16 @@
|
||||
{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
|
||||
{{- $jsMenu := resources.Get "js/menu.js" -}}
|
||||
{{- $jsTabs := resources.Get "js/tabs.js" -}}
|
||||
{{- $jsLang := resources.Get "js/lang.js" -}}
|
||||
{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
|
||||
{{- $jsFileTree := resources.Get "js/filetree.js" -}}
|
||||
{{- $jsSidebar := resources.Get "js/sidebar.js" -}}
|
||||
{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
|
||||
|
||||
{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $scripts = $scripts | minify | fingerprint -}}
|
||||
{{- end -}}
|
||||
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
|
||||
|
||||
{{/* Core scripts (theme, menu, tabs, etc.) */}}
|
||||
{{- partial "scripts/core.html" . -}}
|
||||
|
||||
{{/* Search */}}
|
||||
{{- if (site.Params.search.enable | default true) -}}
|
||||
{{- $searchType := site.Params.search.type | default "flexsearch" -}}
|
||||
{{- if eq $searchType "flexsearch" -}}
|
||||
{{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
|
||||
{{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $jsSearch = $jsSearch | minify | fingerprint -}}
|
||||
{{- end -}}
|
||||
{{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
|
||||
<script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
|
||||
<script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
|
||||
{{- else -}}
|
||||
{{- warnf `search type "%s" is not supported` $searchType -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- partial "scripts/search.html" . -}}
|
||||
|
||||
{{/* Mermaid */}}
|
||||
{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
|
||||
{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
|
||||
{{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
|
||||
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Store original mermaid code for each diagram
|
||||
document.querySelectorAll(".mermaid").forEach(el => {
|
||||
el.dataset.original = el.innerHTML;
|
||||
});
|
||||
|
||||
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
|
||||
mermaid.initialize({ startOnLoad: true, theme: theme });
|
||||
|
||||
let timeout;
|
||||
new MutationObserver(() => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
|
||||
document.querySelectorAll(".mermaid").forEach(el => {
|
||||
// Reset to original content, preserving HTML
|
||||
el.innerHTML = el.dataset.original;
|
||||
el.removeAttribute("data-processed");
|
||||
});
|
||||
mermaid.initialize({ startOnLoad: true, theme: theme });
|
||||
mermaid.init();
|
||||
}, 150);
|
||||
}).observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{- partial "scripts/mermaid.html" . -}}
|
||||
{{- end -}}
|
||||
|
||||
{{/* KaTex */}}
|
||||
{{- if .Page.Params.math -}}
|
||||
{{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
|
||||
{{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
|
||||
{{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
|
||||
{{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
|
||||
<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
|
||||
<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
|
||||
<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
|
||||
<script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
|
||||
{{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
|
||||
{{- range $katexFonts -}}
|
||||
{{ .Publish }}
|
||||
{{- partial "scripts/katex.html" . -}}
|
||||
{{- end -}}
|
||||
<script>
|
||||
// TODO: make render options configurable
|
||||
// Reference: https://katex.org/docs/autorender#api
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
renderMathInElement(document.body, {
|
||||
delimiters: [
|
||||
{ left: "$$", right: "$$", display: true },
|
||||
{ left: "$", right: "$", display: false },
|
||||
{ left: "\\(", right: "\\)", display: false },
|
||||
{ left: "\\begin{equation}", right: "\\end{equation}", display: true },
|
||||
{left: "\\begin{align}", right: "\\end{align}", display: true},
|
||||
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
|
||||
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
|
||||
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
|
||||
{ left: "\\[", right: "\\]", display: true },
|
||||
],
|
||||
throwOnError: false,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
14
layouts/partials/scripts/core.html
Normal file
14
layouts/partials/scripts/core.html
Normal file
@ -0,0 +1,14 @@
|
||||
{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
|
||||
{{- $jsMenu := resources.Get "js/menu.js" -}}
|
||||
{{- $jsTabs := resources.Get "js/tabs.js" -}}
|
||||
{{- $jsLang := resources.Get "js/lang.js" -}}
|
||||
{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
|
||||
{{- $jsFileTree := resources.Get "js/filetree.js" -}}
|
||||
{{- $jsSidebar := resources.Get "js/sidebar.js" -}}
|
||||
{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
|
||||
|
||||
{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $scripts = $scripts | minify | fingerprint -}}
|
||||
{{- end -}}
|
||||
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
|
||||
33
layouts/partials/scripts/katex.html
Normal file
33
layouts/partials/scripts/katex.html
Normal file
@ -0,0 +1,33 @@
|
||||
{{/* KaTex */}}
|
||||
{{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
|
||||
{{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
|
||||
{{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
|
||||
{{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
|
||||
<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
|
||||
<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
|
||||
<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
|
||||
<script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
|
||||
{{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
|
||||
{{- range $katexFonts -}}
|
||||
{{ .Publish }}
|
||||
{{- end -}}
|
||||
<script>
|
||||
// TODO: make render options configurable
|
||||
// Reference: https://katex.org/docs/autorender#api
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
renderMathInElement(document.body, {
|
||||
delimiters: [
|
||||
{ left: "$$", right: "$$", display: true },
|
||||
{ left: "$", right: "$", display: false },
|
||||
{ left: "\\(", right: "\\)", display: false },
|
||||
{ left: "\\begin{equation}", right: "\\end{equation}", display: true },
|
||||
{left: "\\begin{align}", right: "\\end{align}", display: true},
|
||||
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
|
||||
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
|
||||
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
|
||||
{ left: "\\[", right: "\\]", display: true },
|
||||
],
|
||||
throwOnError: false,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
33
layouts/partials/scripts/mermaid.html
Normal file
33
layouts/partials/scripts/mermaid.html
Normal file
@ -0,0 +1,33 @@
|
||||
{{/* Mermaid */}}
|
||||
|
||||
{{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
|
||||
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Store original mermaid code for each diagram
|
||||
document.querySelectorAll(".mermaid").forEach(el => {
|
||||
el.dataset.original = el.innerHTML;
|
||||
});
|
||||
|
||||
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
|
||||
mermaid.initialize({ startOnLoad: true, theme: theme });
|
||||
|
||||
let timeout;
|
||||
new MutationObserver(() => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
|
||||
document.querySelectorAll(".mermaid").forEach(el => {
|
||||
// Reset to original content, preserving HTML
|
||||
el.innerHTML = el.dataset.original;
|
||||
el.removeAttribute("data-processed");
|
||||
});
|
||||
mermaid.initialize({ startOnLoad: true, theme: theme });
|
||||
mermaid.init();
|
||||
}, 150);
|
||||
}).observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ["class"]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
16
layouts/partials/scripts/search.html
Normal file
16
layouts/partials/scripts/search.html
Normal file
@ -0,0 +1,16 @@
|
||||
{{/* Search */}}
|
||||
{{- if (site.Params.search.enable | default true) -}}
|
||||
{{- $searchType := site.Params.search.type | default "flexsearch" -}}
|
||||
{{- if eq $searchType "flexsearch" -}}
|
||||
{{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
|
||||
{{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
|
||||
{{- if hugo.IsProduction -}}
|
||||
{{- $jsSearch = $jsSearch | minify | fingerprint -}}
|
||||
{{- end -}}
|
||||
{{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
|
||||
<script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
|
||||
<script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
|
||||
{{- else -}}
|
||||
{{- warnf `search type "%s" is not supported` $searchType -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
Loading…
x
Reference in New Issue
Block a user