Implementing Mermaid support as an include and changing config for local testing

Author: janhalen

_config.yml

@@ -3,12 +3,12 @@
 title: OS²Product
 email: [email protected]
 description: The Jekyll version of the Spectral theme by HTML5 UP.
-#baseurl: ""
-#url: "http://localhost:4000"
+baseurl: ""
+url: "http://localhost:4000"
 
 # Uncomment the lines below if you are deploying to GitHub Pages
-baseurl: "/spectral-jekyll-theme" 
-url: "https://janhalen.github.io" 
+# baseurl: "/spectral-jekyll-theme" 
+# url: "https://janhalen.github.io" 
 
 # Homepage tiles
 tiles-source: posts # accepts "posts" or "pages"

_includes/mermaid-init.html

@@ -0,0 +1,13 @@
+https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const blocks = document.querySelectorAll("pre code.language-mermaid");
+    blocks.forEach(block => {
+      const container = document.createElement("div");
+      container.className = "mermaid";
+      container.textContent = block.textContent;
+      block.parentElement.replaceWith(container);
+    });
+    mermaid.initialize({ startOnLoad: true });
+  });
+</script>

_layouts/default.html

@@ -15,6 +15,7 @@
 {% include section-three.html %}
 {% include cta.html %}
 {% include footer.html %}
+{% include mermaid-init.html %}
 </body>
 
 </html>