Skip to content

Commit c2286c9

Browse files
imfingimfing
authored
refactor: modularize scripts partial into separate components (#587)
* refactor: modularize scripts partial into separate components * fix: conditionally load Mermaid and KaTeX scripts
1 parent 49b1cd1 commit c2286c9

File tree

5 files changed

+102
-94
lines changed

5 files changed

+102
-94
lines changed

‎layouts/partials/scripts.html‎

Lines changed: 6 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,16 @@
1-
{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
2-
{{- $jsMenu := resources.Get "js/menu.js" -}}
3-
{{- $jsTabs := resources.Get "js/tabs.js" -}}
4-
{{- $jsLang := resources.Get "js/lang.js" -}}
5-
{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
6-
{{- $jsFileTree := resources.Get "js/filetree.js" -}}
7-
{{- $jsSidebar := resources.Get "js/sidebar.js" -}}
8-
{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
9-
10-
{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
11-
{{- if hugo.IsProduction -}}
12-
{{- $scripts = $scripts | minify | fingerprint -}}
13-
{{- end -}}
14-
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
15-
1+
{{/* Core scripts (theme, menu, tabs, etc.) */}}
2+
{{- partial "scripts/core.html" . -}}
163

174
{{/* Search */}}
18-
{{- if (site.Params.search.enable | default true) -}}
19-
{{- $searchType := site.Params.search.type | default "flexsearch" -}}
20-
{{- if eq $searchType "flexsearch" -}}
21-
{{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
22-
{{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
23-
{{- if hugo.IsProduction -}}
24-
{{- $jsSearch = $jsSearch | minify | fingerprint -}}
25-
{{- end -}}
26-
{{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
27-
<script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
28-
<script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
29-
{{- else -}}
30-
{{- warnf `search type "%s" is not supported` $searchType -}}
31-
{{- end -}}
32-
{{- end -}}
5+
{{- partial "scripts/search.html" . -}}
336

347
{{/* Mermaid */}}
358
{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
369
{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
37-
{{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
38-
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
39-
<script>
40-
document.addEventListener("DOMContentLoaded", () => {
41-
// Store original mermaid code for each diagram
42-
document.querySelectorAll(".mermaid").forEach(el => {
43-
el.dataset.original = el.innerHTML;
44-
});
45-
46-
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
47-
mermaid.initialize({ startOnLoad: true, theme: theme });
48-
49-
let timeout;
50-
new MutationObserver(() => {
51-
clearTimeout(timeout);
52-
timeout = setTimeout(() => {
53-
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
54-
document.querySelectorAll(".mermaid").forEach(el => {
55-
// Reset to original content, preserving HTML
56-
el.innerHTML = el.dataset.original;
57-
el.removeAttribute("data-processed");
58-
});
59-
mermaid.initialize({ startOnLoad: true, theme: theme });
60-
mermaid.init();
61-
}, 150);
62-
}).observe(document.documentElement, {
63-
attributes: true,
64-
attributeFilter: ["class"]
65-
});
66-
});
67-
</script>
10+
{{- partial "scripts/mermaid.html" . -}}
6811
{{- end -}}
6912

7013
{{/* KaTex */}}
7114
{{- if .Page.Params.math -}}
72-
{{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
73-
{{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
74-
{{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
75-
{{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
76-
<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
77-
<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
78-
<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
79-
<script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
80-
{{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
81-
{{- range $katexFonts -}}
82-
{{ .Publish }}
83-
{{- end -}}
84-
<script>
85-
// TODO: make render options configurable
86-
// Reference: https://katex.org/docs/autorender#api
87-
document.addEventListener("DOMContentLoaded", function () {
88-
renderMathInElement(document.body, {
89-
delimiters: [
90-
{ left: "$$", right: "$$", display: true },
91-
{ left: "$", right: "$", display: false },
92-
{ left: "\\(", right: "\\)", display: false },
93-
{ left: "\\begin{equation}", right: "\\end{equation}", display: true },
94-
{left: "\\begin{align}", right: "\\end{align}", display: true},
95-
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
96-
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
97-
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
98-
{ left: "\\[", right: "\\]", display: true },
99-
],
100-
throwOnError: false,
101-
});
102-
});
103-
</script>
104-
{{ end }}
15+
{{- partial "scripts/katex.html" . -}}
16+
{{- end -}}

‎layouts/partials/scripts/core.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
2+
{{- $jsMenu := resources.Get "js/menu.js" -}}
3+
{{- $jsTabs := resources.Get "js/tabs.js" -}}
4+
{{- $jsLang := resources.Get "js/lang.js" -}}
5+
{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
6+
{{- $jsFileTree := resources.Get "js/filetree.js" -}}
7+
{{- $jsSidebar := resources.Get "js/sidebar.js" -}}
8+
{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
9+
10+
{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
11+
{{- if hugo.IsProduction -}}
12+
{{- $scripts = $scripts | minify | fingerprint -}}
13+
{{- end -}}
14+
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>

‎layouts/partials/scripts/katex.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{{/* KaTex */}}
2+
{{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
3+
{{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
4+
{{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
5+
{{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
6+
<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
7+
<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
8+
<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
9+
<script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
10+
{{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
11+
{{- range $katexFonts -}}
12+
{{ .Publish }}
13+
{{- end -}}
14+
<script>
15+
// TODO: make render options configurable
16+
// Reference: https://katex.org/docs/autorender#api
17+
document.addEventListener("DOMContentLoaded", function () {
18+
renderMathInElement(document.body, {
19+
delimiters: [
20+
{ left: "$$", right: "$$", display: true },
21+
{ left: "$", right: "$", display: false },
22+
{ left: "\\(", right: "\\)", display: false },
23+
{ left: "\\begin{equation}", right: "\\end{equation}", display: true },
24+
{left: "\\begin{align}", right: "\\end{align}", display: true},
25+
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
26+
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
27+
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
28+
{ left: "\\[", right: "\\]", display: true },
29+
],
30+
throwOnError: false,
31+
});
32+
});
33+
</script>

‎layouts/partials/scripts/mermaid.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{{/* Mermaid */}}
2+
3+
{{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
4+
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
5+
<script>
6+
document.addEventListener("DOMContentLoaded", () => {
7+
// Store original mermaid code for each diagram
8+
document.querySelectorAll(".mermaid").forEach(el => {
9+
el.dataset.original = el.innerHTML;
10+
});
11+
12+
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
13+
mermaid.initialize({ startOnLoad: true, theme: theme });
14+
15+
let timeout;
16+
new MutationObserver(() => {
17+
clearTimeout(timeout);
18+
timeout = setTimeout(() => {
19+
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
20+
document.querySelectorAll(".mermaid").forEach(el => {
21+
// Reset to original content, preserving HTML
22+
el.innerHTML = el.dataset.original;
23+
el.removeAttribute("data-processed");
24+
});
25+
mermaid.initialize({ startOnLoad: true, theme: theme });
26+
mermaid.init();
27+
}, 150);
28+
}).observe(document.documentElement, {
29+
attributes: true,
30+
attributeFilter: ["class"]
31+
});
32+
});
33+
</script>

‎layouts/partials/scripts/search.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{{/* Search */}}
2+
{{- if (site.Params.search.enable | default true) -}}
3+
{{- $searchType := site.Params.search.type | default "flexsearch" -}}
4+
{{- if eq $searchType "flexsearch" -}}
5+
{{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
6+
{{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
7+
{{- if hugo.IsProduction -}}
8+
{{- $jsSearch = $jsSearch | minify | fingerprint -}}
9+
{{- end -}}
10+
{{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
11+
<script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
12+
<script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
13+
{{- else -}}
14+
{{- warnf `search type "%s" is not supported` $searchType -}}
15+
{{- end -}}
16+
{{- end -}}

0 commit comments

Comments
 (0)