diff --git a/docs/layouts/partials/scripts.html b/docs/layouts/partials/scripts.html
new file mode 100644
index 00000000..08a19d5c
--- /dev/null
+++ b/docs/layouts/partials/scripts.html
@@ -0,0 +1,75 @@
+{{- $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 }}"></script>
+
+
+{{/* 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 }}"></script>
+    <script defer src="{{ $jsSearch.RelPermalink }}"></script>
+  {{- else -}}
+    {{- warnf `search type "%s" is not supported` $searchType -}}
+  {{- end -}}
+{{- end -}}
+
+{{/* 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 }}"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
+      mermaid.initialize({ startOnLoad: true, theme: theme });
+    });
+  </script>
+{{- 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 }}" />
+  <script defer src="{{ $katexJS.RelPermalink }}"></script>
+  <script defer src="{{ $katexAutoRenderJS.RelPermalink }}"></script>
+  <script defer src="{{ $mhchemJS.RelPermalink }}"></script>
+  {{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
+  {{- range $katexFonts -}}
+    {{ .Publish }}
+  {{- end -}}
+  <script>
+    // TODO: make render options configurable
+    document.addEventListener("DOMContentLoaded", function () {
+      renderMathInElement(document.body, {
+        delimiters: [
+          { left: "$$", right: "$$", display: true },
+          { left: "$", right: "$", display: false },
+          { left: "\\(", right: "\\)", display: false },
+          { left: "\\[", right: "\\]", display: true },
+        ],
+        throwOnError: false,
+      });
+    });
+  </script>
+{{ end }}