mirror of
https://github.com/imfing/hextra.git
synced 2025-10-31 15:34:53 -04:00
9f70e8a87b
* refactor(mermaid): enhance Mermaid JS loading logic for flexibility - Updated the Mermaid JS loader to support configurable remote or local asset loading based on site parameters. - Improved error handling for asset retrieval and added comments for clarity on behavior based on different configurations. - Ensured that the default behavior falls back to a CDN if no base is provided, enhancing usability and maintainability. * chore: clean up comments * fix: comment typo
80 lines
2.9 KiB
HTML
80 lines
2.9 KiB
HTML
{{- /* Mermaid */ -}}
|
|
|
|
{{- $mermaidBase := "" -}}
|
|
{{- $useDefaultCdn := true -}}
|
|
{{- with site.Params.mermaid.base -}}
|
|
{{- $mermaidBase = . -}}
|
|
{{- $useDefaultCdn = false -}}
|
|
{{- end -}}
|
|
|
|
{{- $mermaidJsAsset := "" -}}
|
|
{{- with site.Params.mermaid.js -}}
|
|
{{- $mermaidJsAsset = . -}}
|
|
{{- end -}}
|
|
|
|
{{- /* If only js is set without base, use local asset loading */ -}}
|
|
{{- if and $useDefaultCdn (ne $mermaidJsAsset "") -}}
|
|
{{- $useDefaultCdn = false -}}
|
|
{{- end -}}
|
|
|
|
{{- /* Set default CDN base if needed */ -}}
|
|
{{- if $useDefaultCdn -}}
|
|
{{- $mermaidBase = "https://cdn.jsdelivr.net/npm/mermaid@latest/dist" -}}
|
|
{{- end -}}
|
|
|
|
{{- $isRemoteBase := or (strings.HasPrefix $mermaidBase "http://") (strings.HasPrefix $mermaidBase "https://") -}}
|
|
{{- $minSuffix := cond hugo.IsProduction ".min" "" -}}
|
|
|
|
{{- /* JS retrieval: get raw JS from either local asset or remote, then process */ -}}
|
|
{{- if $isRemoteBase -}}
|
|
{{- $jsPath := cond (ne $mermaidJsAsset "") $mermaidJsAsset (printf "mermaid%s.js" $minSuffix) -}}
|
|
{{- $mermaidJsUrl := printf "%s/%s" $mermaidBase $jsPath -}}
|
|
{{- 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%s.js" $minSuffix) . -}}
|
|
{{- $mermaidJs := . | fingerprint -}}
|
|
<script defer src="{{ $mermaidJs.RelPermalink }}" integrity="{{ $mermaidJs.Data.Integrity }}" crossorigin="anonymous"></script>
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
{{- else if $mermaidJsAsset -}}
|
|
{{- with resources.Get $mermaidJsAsset -}}
|
|
{{- $mermaidJs := . | fingerprint -}}
|
|
<script defer src="{{ $mermaidJs.RelPermalink }}" integrity="{{ $mermaidJs.Data.Integrity }}" crossorigin="anonymous"></script>
|
|
{{- else -}}
|
|
{{- errorf "Mermaid js asset not found at %q" $mermaidJsAsset -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Store original mermaid code for each diagram
|
|
document.querySelectorAll(".mermaid").forEach((el) => {
|
|
el.dataset.original = el.innerHTML;
|
|
});
|
|
|
|
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
|
|
mermaid.initialize({ startOnLoad: true, theme: theme });
|
|
|
|
let timeout;
|
|
new MutationObserver(() => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
|
|
document.querySelectorAll(".mermaid").forEach((el) => {
|
|
// Reset to original content, preserving HTML
|
|
el.innerHTML = el.dataset.original;
|
|
el.removeAttribute("data-processed");
|
|
});
|
|
mermaid.initialize({ startOnLoad: true, theme: theme });
|
|
mermaid.init();
|
|
}, 150);
|
|
}).observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["class"],
|
|
});
|
|
});
|
|
</script>
|