Use cnjs for mermaid, add support for jszoom

config.toml

@@ -35,6 +35,9 @@ author_url = "https://fosstodon.org/@gamingrobot"
 # https://www.goatcounter.com/
 goatcounter = "grbt-doingstuff"
 
+# https://github.com/francoischalifour/medium-zoom
+jszoom = false
+
 # https://mermaid.js.org/
 mermaid_theme = "default"
 mermaid_theme_dark = "dark"

themes/hyde-hyde-hyde-zola/config.toml

@@ -31,6 +31,9 @@ author_url = "https://example.com"
 # https://www.goatcounter.com/
 # goatcounter = "goatcounter-code-here"
 
+# https://github.com/francoischalifour/medium-zoom
+jszoom = false
+
 # https://mermaid.js.org/
 mermaid_theme = "default"
 mermaid_theme_dark = "dark"

themes/hyde-hyde-hyde-zola/templates/page.html

@@ -80,8 +80,8 @@ <h1>{{ page.title }}</h1>
 
 {% block js_body %}
     {% if page.extra.mermaid %}
-        <script type="module">
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js" integrity="sha512-6a80OTZVmEJhqYJUmYd5z8yHUCDlYnj6q9XwB/gKOEyNQV/Q8u+XeSG59a2ZKFEHGTYzgfOQKYEBtrZV7vBr+Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
             var theme = '{{ config.extra.mermaid_theme }}'
             if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
                 theme = '{{ config.extra.mermaid_theme_dark }}'
@@ -94,5 +94,12 @@ <h1>{{ page.title }}</h1>
             mermaid.initialize(config);
         </script>
     {% endif %}
+    {% if page.extra.jszoom %}
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.1.0/medium-zoom.min.js" integrity="sha512-9ZKhgaFdKlsELap/dGw3Iaz5Bj+Las0XXZiRKYZaN9QArg6FtkD5rULNmNH4rTCTFxjPiBGr3MX8smRADRorDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+        const images = Array.from(document.querySelectorAll("img"));
+        images.forEach((img) => { mediumZoom(img, { margin: 0, background: "", scrollOffset: 40, container: null, template: null }); });
+        </script>  
+    {% endif %}
 {% endblock js_body %}
 

themes/hyde-hyde-hyde-zola/templates/shortcodes/mermaid.html

@@ -1,5 +1,5 @@
 <figure>
-    <div class="mermaid">
+    <div class="mermaid" style="text-align: {{ config.extra.mermaid_align }}">
         {{ body }}
     </div>
 </figure>