chore: use CDN to download mermaid js (#651)

* chore: download js assets during build time

* chore: remove CDN asset download task and update Mermaid script fingerprinting

dev.toml

@@ -5,7 +5,7 @@
     enable = true
     disableIDs = true
   [[build.cachebusters]]
-    source = 'assets/watching/hugo_stats\.json'
+    source = 'assets/notwatching/hugo_stats\.json'
     target = 'styles\.css'
   [[build.cachebusters]]
     source = '(postcss|tailwind)\.config\.mjs'
@@ -23,4 +23,5 @@
     target = "assets"
   [[module.mounts]]
     source = "hugo_stats.json"
-    target = "assets/watching/hugo_stats.json"
+    target = "assets/notwatching/hugo_stats.json"
+    disableWatch = true

layouts/partials/head.html

@@ -30,11 +30,11 @@
   {{- partialCached "head-css.html" . -}}
 
 
-<!-- Google Analytics -->
+  <!-- Google Analytics -->
-{{- if and (eq hugo.Environment "production") .Site.Config.Services.GoogleAnalytics.ID }}
+  {{- if and (eq hugo.Environment "production") .Site.Config.Services.GoogleAnalytics.ID }}
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
     {{ partial "google-analytics.html" . }}
-{{- end }}
+  {{- end }}
 
   <script>
     /* Initialize light/dark mode */
@@ -60,20 +60,20 @@
   </script>
 
   <!-- KaTeX-->
-  {{ $noop := .WordCount }}
+  {{ $noop := .WordCount -}}
-  {{ if .Page.Store.Get "hasMath" }}
+  {{ if .Page.Store.Get "hasMath" -}}
-    {{ $katex_css_url := printf "https://cdn.jsdelivr.net/npm/katex@latest/dist/katex%s.css" (cond hugo.IsProduction ".min" "") -}}
+    <!-- TODO: make url configurable -->
-    {{ with try (resources.GetRemote $katex_css_url) -}}
+    {{ $katexCssUrl := printf "https://cdn.jsdelivr.net/npm/katex@latest/dist/katex%s.css" (cond hugo.IsProduction ".min" "") -}}
+    {{ with try (resources.GetRemote $katexCssUrl) -}}
       {{ with .Err -}}
-        {{ errorf "Could not retrieve KaTeX css file from CDN. Reason: %s." . -}}
+        {{ errorf "Could not retrieve KaTeX css file from %s. Reason: %s." $katexCssUrl . -}}
       {{ else with.Value -}}
-        {{ with resources.Copy (printf "css/katex%s.css" (cond hugo.IsProduction ".min" "")) . }}
+        {{ with resources.Copy (printf "css/katex%s.css" (cond hugo.IsProduction ".min" "")) . -}}
-          {{ $secureCSS := . | resources.Fingerprint "sha512" -}}
+          <link rel="stylesheet" href="{{- .RelPermalink -}}" integrity="{{- . | fingerprint -}}" crossorigin="anonymous" />
-<link rel="stylesheet" href="{{- .RelPermalink -}}" integrity="{{- $secureCSS.Data.Integrity -}}" crossorigin="anonymous">
+        {{ end -}}
       {{ end -}}
     {{ end -}}
   {{ end -}}
-  {{ end }}
 
-  {{ partial "custom/head-end.html" . }}
+  {{ partial "custom/head-end.html" . -}}
 </head>

layouts/partials/scripts/mermaid.html

@@ -1,11 +1,22 @@
 {{/* Mermaid */}}
 
-{{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
+{{ $mermaidJsUrl := printf "https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid%s.js" (cond hugo.IsProduction ".min" "") -}}
-<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
+{{ with try (resources.GetRemote $mermaidJsUrl) -}}
+  {{ with .Err -}}
+    {{ errorf "Could not retrieve Mermaid js file from %s. Reason: %s." $mermaidJsUrl . -}}
+  {{ else with.Value -}}
+    {{ with resources.Copy (printf "js/mermaid.min.js") . -}}
+      {{ $mermaidJs := . | fingerprint -}}
+      <script defer src="{{ $mermaidJs.RelPermalink }}" integrity="{{ $mermaidJs.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
+  {{ end -}}
+{{ end -}}
+
+
 <script>
   document.addEventListener("DOMContentLoaded", () => {
     // Store original mermaid code for each diagram
-    document.querySelectorAll(".mermaid").forEach(el => {
+    document.querySelectorAll(".mermaid").forEach((el) => {
       el.dataset.original = el.innerHTML;
     });
 
@@ -17,7 +28,7 @@
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
-        document.querySelectorAll(".mermaid").forEach(el => {
+        document.querySelectorAll(".mermaid").forEach((el) => {
           // Reset to original content, preserving HTML
           el.innerHTML = el.dataset.original;
           el.removeAttribute("data-processed");
@@ -27,7 +38,7 @@
       }, 150);
     }).observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["class"]
+      attributeFilter: ["class"],
     });
   });
 </script>

taskfile.yaml

@@ -16,9 +16,3 @@ tasks:
     desc: Start development server for Hextra theme
     cmds:
       - npm run dev:theme
-
-  libs:
-    desc: Download libs from CDN
-    cmds:
-      - curl -o assets/lib/flexsearch/flexsearch.bundle.min.js https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.min.js
-      - curl -o assets/lib/mermaid/mermaid.min.js https://cdn.jsdelivr.net/npm/mermaid@11.3.0/dist/mermaid.min.js