⚡️ Bundle css and js assets using Hugo pipes

CHANGELOG.md

@@ -20,12 +20,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+- ⚠️ Required Hugo version is now 0.87.0 or later
+- ⚠️ Author images are now Hugo assets
+- ⚠️ Overhauled `figure` shortcode which now resizes images
+- ⚠️ Renamed parameter: `darkToggle` -> `showDarkToggle`
 - Upgrade to Tailwind v3.0.15
 - Upgrade to KaTeX v0.15.2
 - Inline Javascript moved to external files
-- Author images are now Hugo assets
-- Required Hugo version is now 0.87.0 or later
-- Overhauled `figure` shortcode which now resizes images
 - Improved JSON-LD structured data
 - Minor style and layout improvements
 

layouts/partials/head.html

@@ -32,41 +32,32 @@
   {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
   {{ end -}}
-  {{/* Styles */}}
+  {{/* Asset bundles */}}
-  {{ $schemeCSS := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
+  {{ $assets := newScratch }}
-  {{ if not $schemeCSS }}
+  {{ $cssScheme := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
-    {{ $schemeCSS = resources.Get "css/schemes/congo.css" }}
+  {{ if not $cssScheme }}
+    {{ $cssScheme = resources.Get "css/schemes/congo.css" }}
   {{ end }}
-  {{ $schemeStyles := $schemeCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  {{ $assets.Add "css" (slice $cssScheme) }}
-  <link
+  {{ $cssMain := resources.Get "css/compiled/main.css" }}
-    type="text/css"
+  {{ $assets.Add "css" (slice $cssMain) }}
-    rel="stylesheet"
+  {{ $cssCustom := resources.Get "css/custom.css" }}
-    href="{{ $schemeStyles.RelPermalink }}"
+  {{ if $cssCustom }}
-    integrity="{{ $schemeStyles.Data.Integrity }}"
+    {{ $assets.Add "css" (slice $cssCustom) }}
-  />
-  {{ $mainCSS := resources.Get "css/compiled/main.css" }}
-  {{ $mainStyles := $mainCSS | resources.Minify | resources.Fingerprint "sha512" }}
-  <link
-    type="text/css"
-    rel="stylesheet"
-    href="{{ $mainStyles.RelPermalink }}"
-    integrity="{{ $mainStyles.Data.Integrity }}"
-  />
-  {{ $customCSS := resources.Get "css/custom.css" }}
-  {{ if $customCSS }}
-    {{ $customStyles := $customCSS | resources.Minify | resources.Fingerprint "sha512" }}
-    <link
-      type="text/css"
-      rel="stylesheet"
-      href="{{ $customStyles.RelPermalink }}"
-      integrity="{{ $customStyles.Data.Integrity }}"
-    />
   {{ end }}
+  {{ $bundleCSS := $assets.Get "css" | resources.Concat "css/main.bundle.css" | resources.Minify | resources.Fingerprint "sha512" }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $bundleCSS.RelPermalink }}"
+    integrity="{{ $bundleCSS.Data.Integrity }}"
+  />
   {{ if eq (.Site.Params.darkMode | default "auto") "auto" }}
-    {{ $darkJS := resources.Get "js/dark.js" }}
+    {{ $jsDark := resources.Get "js/dark.js" }}
-    {{ $darkJS := $darkJS | resources.Minify | resources.Fingerprint "sha512" }}    
+    {{ $assets.Add "js" (slice $jsDark) }}
-    <script defer type="text/javascript" src="{{ $darkJS.RelPermalink }}" integrity="{{ $darkJS.Data.Integrity }}"></script>
   {{ end }}
+  {{ $bundleJS := $assets.Get "js" | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint "sha512" }}
+  <script defer type="text/javascript" src="{{ $bundleJS.RelPermalink }}" integrity="{{ $bundleJS.Data.Integrity }}"></script>
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}