113 lines
4.1 KiB
HTML
113 lines
4.1 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 := urls.JoinPath $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 -}}
|
|
|
|
{{- $lightTheme := site.Params.mermaid.lightTheme | default "neutral" -}}
|
|
{{- $darkTheme := site.Params.mermaid.darkTheme | default "dark" -}}
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".mermaid").forEach((el) => {
|
|
el.dataset.original = el.innerHTML;
|
|
});
|
|
|
|
const isDark = document.documentElement.classList.contains("dark");
|
|
const theme = isDark ? "{{ $darkTheme }}" : "{{ $lightTheme }}";
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: theme,
|
|
flowchart: { useMaxWidth: true, wrappingWidth: 180 }
|
|
});
|
|
|
|
let timeout;
|
|
new MutationObserver(() => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
const isDark = document.documentElement.classList.contains("dark");
|
|
const theme = isDark ? "{{ $darkTheme }}" : "{{ $lightTheme }}";
|
|
document.querySelectorAll(".mermaid").forEach((el) => {
|
|
el.innerHTML = el.dataset.original;
|
|
el.removeAttribute("data-processed");
|
|
});
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: theme,
|
|
flowchart: { useMaxWidth: true, wrappingWidth: 180 }
|
|
});
|
|
mermaid.init();
|
|
setTimeout(fixViewBox, 600);
|
|
setTimeout(fixViewBox, 1200);
|
|
}, 400);
|
|
}).observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["class"],
|
|
});
|
|
|
|
setTimeout(fixViewBox, 600);
|
|
setTimeout(fixViewBox, 1200);
|
|
|
|
function fixViewBox() {
|
|
document.querySelectorAll(".mermaid svg").forEach(function (svg) {
|
|
if (svg.getAttribute("aria-roledescription") === "pie") return;
|
|
var groups = svg.querySelectorAll("g");
|
|
if (!groups.length) return;
|
|
var maxX = -Infinity, maxY = -Infinity;
|
|
groups.forEach(function (g) {
|
|
var bb = g.getBBox();
|
|
if (bb.width === 0 || bb.height === 0) return;
|
|
if (bb.x + bb.width > maxX) maxX = bb.x + bb.width;
|
|
if (bb.y + bb.height > maxY) maxY = bb.y + bb.height;
|
|
});
|
|
if (!isFinite(maxX)) return setTimeout(fixViewBox, 200);
|
|
svg.setAttribute("viewBox", [-8, -8, maxX + 16, maxY + 16].join(" "));
|
|
});
|
|
}
|
|
});
|
|
</script> |