{{/* Mermaid */}}
{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
  {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
  <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
      mermaid.initialize({ startOnLoad: true, theme: theme });
    });
  </script>
{{- end -}}

{{/* KaTex */}}
{{- if .Page.Params.math -}}
  {{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
  {{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
  {{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
  {{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
  <link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
  <script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
  <script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
  <script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
  {{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
  {{- range $katexFonts -}}
    {{ .Publish }}
  {{- end -}}
  <script>
    // TODO: make render options configurable
    document.addEventListener("DOMContentLoaded", function () {
      renderMathInElement(document.body, {
        delimiters: [
          { left: "$$", right: "$$", display: true },
          { left: "$", right: "$", display: false },
          { left: "\\(", right: "\\)", display: false },
          { left: "\\[", right: "\\]", display: true },
        ],
        throwOnError: false,
      });
    });
  </script>
{{ end }}