⬆️ Fix: bump Mermaid from 9.x to 10.x and fix error (#420)

assets/css/_partials/_single/_code.scss

@@ -18,7 +18,7 @@ code {
 }
 
 // indented code
-pre {
+pre:not(.mermaid[data-processed='true']) {
   margin: 0;
   line-height: 1.45em;
   padding: 0.5rem;

assets/css/_shortcodes/_mermaid.scss

@@ -1,5 +1,7 @@
 .mermaid {
-  text-align: center;
+  &[data-processed='true'] {
+    text-align: center;
+  }
 
   svg {
     max-width: 100%;

assets/data/cdn/jsdelivr.yml

@@ -57,9 +57,6 @@ libFiles:
   # TODO update to 3.x
   mapboxGLCSS: [email protected]/dist/mapbox-gl.css
   mapboxGLJS: [email protected]/dist/mapbox-gl.js
-  # [email protected] https://github.com/mermaid-js/mermaid
-  # TODO bump Mermaid from 9.x to 10.x
-  mermaidJS: [email protected]/dist/mermaid.min.js
   # [email protected] https://github.com/metowolf/MetingJS
   metingJS: [email protected]/dist/Meting.min.js
   # [email protected] https://github.com/fregante/object-fit-images

assets/data/cdn/unpkg.yml

@@ -57,9 +57,6 @@ libFiles:
   # TODO update to 3.x
   mapboxGLCSS: [email protected]/dist/mapbox-gl.css
   mapboxGLJS: [email protected]/dist/mapbox-gl.js
-  # [email protected] https://github.com/mermaid-js/mermaid
-  # TODO bump Mermaid from 9.x to 10.x
-  mermaidJS: [email protected]/dist/mermaid.min.js
   # [email protected] https://github.com/metowolf/MetingJS
   metingJS: [email protected]/dist/Meting.min.js
   # [email protected] https://github.com/fregante/object-fit-images

assets/js/theme.js

@@ -550,24 +550,23 @@ class FixIt {
     }
   }
 
-  switchMermaidTheme(theme) {
-    const $mermaidElements = document.getElementsByClassName('mermaid');
-    if ($mermaidElements.length) {
-      // TODO perf
-      const themes = this.config.mermaid.themes ?? ['default', 'dark', 'neutral'];
-      mermaid.initialize({ startOnLoad: false, theme: theme ?? (this.isDark ? themes[1] : themes[0]), securityLevel: 'loose' });
-      this.util.forEach($mermaidElements, $mermaid => {
-        mermaid.render('svg-' + $mermaid.id, this.data[$mermaid.id], svgCode => {
-          $mermaid.innerHTML = svgCode;
-        }, $mermaid);
-      });
-    }
-  };
-
   initMermaid() {
-    this.switchMermaidTheme();
-    this.switchThemeEventSet.add(() => { this.switchMermaidTheme(); });
-    this.beforeprintEventSet.add(() => { this.switchMermaidTheme('neutral'); });
+    if (!window.mermaid) {
+      return;
+    }
+    const themes = window.mermaid.themes ?? ['default', 'dark'];
+    window.mermaid.initialize({
+      securityLevel: 'loose',
+      startOnLoad: true,
+      theme: this.isDark ? themes[1] : themes[0],
+    });
+    this.switchThemeEventSet.add(() => {
+      // Mermaid does not provide a method for switching yet. When switching themes, refresh the page.
+      window.location.reload();
+    });
+    this.beforeprintEventSet.add(() => { 
+      // Set the theme to neutral when printing.
+    });
   }
 
   initEcharts() {
@@ -1101,7 +1100,6 @@ class FixIt {
             event();
           }
           this.initToc();
-          this.switchMermaidTheme();
           this.initSearch();
 
           const isMobile = this.util.isMobile()

assets/lib/VERSION

@@ -17,7 +17,6 @@ [email protected] https://github.com/instantpage/instant.page
 [email protected] https://github.com/KaTeX/KaTeX
 [email protected] https://github.com/sachinchoolur/lightgallery
 [email protected] https://github.com/mapbox/mapbox-gl-js
-[email protected] https://github.com/mermaid-js/mermaid
 [email protected] https://github.com/metowolf/MetingJS
 [email protected] https://github.com/necolas/normalize.css
 [email protected] https://github.com/fregante/object-fit-images [archived]

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -1,3 +1,4 @@
-{{- $id := dict "Content" (trim (partial "function/dos2unix.html" .Inner) "\n") "Scratch" .Page.Scratch | partial "function/id.html" -}}
-<div class="mermaid" id="{{ $id }}"></div>
-{{- .Page.Scratch.SetInMap "this" "mermaid" true -}}
+<pre class="mermaid">
+  {{- .Inner | safeHTML }}
+</pre>
+{{- .Page.Store.Set "hasMermaid" true -}}

layouts/partials/assets.html

@@ -114,11 +114,12 @@
 {{- end -}}
 
 {{- /* mermaid */ -}}
-{{- if (.HasShortcode "mermaid") | or (.Scratch.Get "this").mermaid -}}
-  {{- $source := $cdn.mermaidJS | default "lib/mermaid/mermaid.min.js" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-  {{- $mermaid := .Site.Params.mermaid -}}
-  {{- $config = dict "themes" $mermaid.themes | dict "mermaid" | merge $config -}}
+{{- if .Store.Get "hasMermaid" -}}
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+    window.mermaid = mermaid;
+    window.mermaid.themes = {{ .Site.Params.mermaid.themes }};
+  </script>
 {{- end -}}
 
 {{- /* ECharts */ -}}

layouts/shortcodes/mermaid.html

@@ -1,3 +1,5 @@
-{{- $id := dict "Content" (trim (partial "function/dos2unix.html" .Inner) "\n") "Scratch" .Page.Scratch | partial "function/id.html" -}}
-<div class="mermaid" id="{{ $id }}"></div>
+<pre class="mermaid">
+  {{- .Inner | safeHTML }}
+</pre>
+{{- .Page.Store.Set "hasMermaid" true -}}
 {{- /* EOF */ -}}