From c2286c9dd144a696e380e1620b97a7c308b6affb Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Wed, 26 Feb 2025 08:39:26 +0000
Subject: [PATCH] refactor: modularize scripts partial into separate components
 (#587)

* refactor: modularize scripts partial into separate components

* fix: conditionally load Mermaid and KaTeX scripts
---
 layouts/partials/scripts.html         | 100 ++------------------------
 layouts/partials/scripts/core.html    |  14 ++++
 layouts/partials/scripts/katex.html   |  33 +++++++++
 layouts/partials/scripts/mermaid.html |  33 +++++++++
 layouts/partials/scripts/search.html  |  16 +++++
 5 files changed, 102 insertions(+), 94 deletions(-)
 create mode 100644 layouts/partials/scripts/core.html
 create mode 100644 layouts/partials/scripts/katex.html
 create mode 100644 layouts/partials/scripts/mermaid.html
 create mode 100644 layouts/partials/scripts/search.html

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 03d5926..0bc62dc 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -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 }}
-  {{- 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 }}
+  {{- partial "scripts/katex.html" . -}}
+{{- end -}}
diff --git a/layouts/partials/scripts/core.html b/layouts/partials/scripts/core.html
new file mode 100644
index 0000000..4fce55c
--- /dev/null
+++ b/layouts/partials/scripts/core.html
@@ -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>
diff --git a/layouts/partials/scripts/katex.html b/layouts/partials/scripts/katex.html
new file mode 100644
index 0000000..fe5604e
--- /dev/null
+++ b/layouts/partials/scripts/katex.html
@@ -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>
diff --git a/layouts/partials/scripts/mermaid.html b/layouts/partials/scripts/mermaid.html
new file mode 100644
index 0000000..148d975
--- /dev/null
+++ b/layouts/partials/scripts/mermaid.html
@@ -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>
diff --git a/layouts/partials/scripts/search.html b/layouts/partials/scripts/search.html
new file mode 100644
index 0000000..b71e890
--- /dev/null
+++ b/layouts/partials/scripts/search.html
@@ -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 -}}