chore(scripts): generic way to build scripts (#829)

* chore: move core scripts

* chore: extract head scripts

assets/js/head/banner.js

@@ -0,0 +1,6 @@
+// The section must not be in the banner.js (body) file because it can create a quick flash.
+
+if (localStorage.getItem('{{ site.Params.banner.key | default `banner-closed` }}')) {
+  document.documentElement.style.setProperty("--hextra-banner-height", "0px");
+  document.documentElement.classList.add("hextra-banner-hidden");
+}

assets/js/head/theme.js

@@ -0,0 +1,14 @@
+// The section must not be in the theme.js (body) file because it can create a quick flash (switch between light and dark).
+
+function setTheme(theme) {
+  document.documentElement.classList.remove("light", "dark");
+
+  if (theme !== "light" && theme !== "dark") {
+    theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+
+  document.documentElement.classList.add(theme);
+  document.documentElement.style.colorScheme = theme;
+}
+
+setTheme("color-theme" in localStorage ? localStorage.getItem("color-theme") : '{{ site.Params.theme.default | default `system`}}')

layouts/_partials/head.html

@@ -55,32 +55,17 @@
 
   {{ partial "components/analytics/analytics.html" . }}
 
-  <script>
+  {{- $scriptsHead := slice -}}
-    // The section must not be in the theme.js file because it can create a quick flash (switch between light and dark).
+  {{- range resources.Match "js/head/*.js" -}}
+    {{ $scriptsHead = $scriptsHead | append (resources.ExecuteAsTemplate .Name $ .) }}
+  {{- end -}}
 
-    function setTheme(theme) {
+  {{- $scripts := $scriptsHead | resources.Concat "js/main-head.js" -}}
-      document.documentElement.classList.remove("light", "dark");
 
-      if (theme !== "light" && theme !== "dark") {
+  {{- if hugo.IsProduction -}}
-       theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  {{- $scripts = $scripts | minify | fingerprint -}}
-      }
+  {{- end -}}
-
+  <script src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
-      document.documentElement.classList.add(theme);
-      document.documentElement.style.colorScheme = theme;
-    }
-
-    setTheme("color-theme" in localStorage ? localStorage.getItem("color-theme") : '{{ site.Params.theme.default | default `system`}}')
-
-  </script>
-
-  <script>
-    // The section must not be in the banner.js file because it can create a quick flash.
-
-    if (localStorage.getItem('{{ site.Params.banner.key | default `banner-closed` }}')) {
-      document.documentElement.style.setProperty("--hextra-banner-height", "0px");
-      document.documentElement.classList.add("hextra-banner-hidden");
-    }
-  </script>
 
   <!-- Math engine -->
   {{ $noop := .WordCount -}}

layouts/_partials/scripts/core.html

@@ -1,18 +1,9 @@
-{{- $jsSwitcherMenu := resources.Get "js/switcher-menu.js" -}}
+{{- $scriptsBody := slice }}
-{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
+{{- range resources.Match "js/core/*.js" -}}
-{{- $jsBanner := resources.Get "js/banner.js" | resources.ExecuteAsTemplate "banner.js" . -}}
+  {{ $scriptsBody = $scriptsBody | append (resources.ExecuteAsTemplate .Name $ .) }}
-{{- $jsMenu := resources.Get "js/menu.js" -}}
+{{- end -}}
-{{- $jsTabs := resources.Get "js/tabs.js" -}}
-{{- $jsLang := resources.Get "js/lang.js" -}}
-{{- $jsNavMenu := resources.Get "js/nav-menu.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" -}}
-{{- $jsTocScroll := resources.Get "js/toc-scroll.js" -}}
-{{- $jsFavicon := resources.Get "js/favicon.js" | resources.ExecuteAsTemplate "favicon.js" . -}}
 
-{{- $scripts := slice $jsSwitcherMenu $jsTheme $jsBanner $jsMenu $jsCodeCopy $jsTabs $jsLang $jsNavMenu $jsFileTree $jsSidebar $jsBackToTop $jsTocScroll $jsFavicon | resources.Concat "js/main.js" -}}
+{{- $scripts := $scriptsBody | resources.Concat "js/main.js" -}}
 {{- if hugo.IsProduction -}}
   {{- $scripts = $scripts | minify | fingerprint -}}
 {{- end -}}