feat: re-render when switching themes

assets/hb/modules/mermaid/init.ts

@@ -0,0 +1,34 @@
+(() => {
+  const elements = Array.from(document.querySelectorAll<HTMLElement>('pre.mermaid'))
+  if (!elements) {
+    return
+  }
+  elements.forEach((ele) => {
+    ele.setAttribute('data-src', ele.innerHTML);
+  })
+
+  const resetElements = (): Promise<void> => {
+    return new Promise((resolve) => {
+      elements.forEach((ele) => {
+        ele.innerHTML = ele.getAttribute('data-src')??'';
+        ele.removeAttribute('data-processed')
+      })
+      resolve()
+    })
+  }
+  const init = (theme: string): void => {
+    window.mermaid.initialize({ theme })
+    window.mermaid.init({ theme }, elements)
+  }
+
+  const theme = localStorage.getItem('hb-theme')
+  if (theme === 'dark') {
+    init('dark')
+  }
+
+  document.addEventListener('hb:theme', (e) => {
+    resetElements()
+      .then(init(e.detail.theme === 'dark' ? 'dark' : 'default'))
+      .catch(console.error)
+  })
+})()

layouts/partials/mermaid/assets/init-js.html

@@ -0,0 +1,6 @@
+{{- $opts := dict "targetPath" "js/mermaid-init.js" "minify" hugo.IsProduction }}
+{{- $js := resources.Get "hb/modules/mermaid/init.ts" | js.Build $opts }}
+{{- if hugo.IsProduction }}
+  {{- $js = $js | fingerprint }}
+{{- end }}
+<script src="{{ $js.RelPermalink }}" defer></script>

layouts/partials/mermaid/assets/js.html

@@ -0,0 +1,7 @@
+{{- if or (.HasShortcode "mermaid") (.Store.Get "hasMermaid") }}
+  <script type="module">
+    import mermaid from "{{ .Site.Params.mermaid.js_url }}";
+    window.mermaid = mermaid
+  </script>
+  {{ partialCached "mermaid/assets/init-js" . }}
+{{- end -}}