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
This commit is contained in:
Xin
2025-03-30 21:20:50 +01:00
committed by GitHub
parent b700825943
commit 8021437f77
5 changed files with 34 additions and 2253 deletions

View File

@ -1,11 +1,22 @@
{{/* Mermaid */}}
{{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
{{ $mermaidJsUrl := printf "https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid%s.js" (cond hugo.IsProduction ".min" "") -}}
{{ 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>