Add mermaid charts

Co-Authored-By: Imtiaz Khan <imtiaz.khan.BDS@gmail.com>

main.py

@@ -43,13 +43,22 @@
 }
 """)
 
+def MermaidJS(
+        sel='.language-mermaid',  # CSS selector for mermaid elements
+        theme='base',  # Mermaid theme to use
+        delay=500  # Delay in milliseconds before rendering
+    ):
+    "Implements browser-based Mermaid diagram rendering."
+    return Script(src='/mermaid.js', type='module')    
+
 hdrs = (
     MarkdownJS(),
     HighlightJS(langs=['python', 'javascript', 'html', 'css',]),
     Link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css', type='text/css'),
     Link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css', type='text/css'),    
     Link(rel='stylesheet', href='/public/style.css', type='text/css'),        
-    search_modal_css
+    search_modal_css,
+    MermaidJS()
 )
 
 class ContentNotFound(Exception): pass

mermaid.js

@@ -0,0 +1,34 @@
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+
+mermaid.initialize({
+    startOnLoad: false,
+    theme: 'base',
+    securityLevel: 'loose',
+    flowchart: { useMaxWidth: false, useMaxHeight: false }
+});
+
+function renderMermaidDiagrams() {
+    const diagrams = document.querySelectorAll('.language-mermaid');
+    diagrams.forEach((element, index) => {
+        try {
+            const graphDefinition = element.textContent;
+            const graphId = `mermaid-diagram-${index}`;
+            mermaid.render(graphId, graphDefinition)
+                .then(({svg, bindFunctions}) => {
+                    element.innerHTML = svg;
+                    bindFunctions?.(element);
+                })
+                .catch(error => {
+                    console.error(`Error rendering Mermaid diagram ${index}:`, error);
+                    element.innerHTML = `<p>Error rendering diagram: ${error.message}</p>`;
+                });
+        } catch (error) {
+            console.error(`Error processing Mermaid diagram ${index}:`, error);
+        }
+    });
+}
+
+proc_htmx('.language-mermaid', () => {
+    renderMermaidDiagrams()
+    // setTimeout(renderMermaidDiagrams, 100);
+});

posts/mermaid-charts.md

@@ -0,0 +1,23 @@
+---
+date: "2024-10-15"
+published: true
+slug: mermaid-charts
+tags:
+  - python
+  - fasthtml
+  - javascript 
+  - nodejs 
+time_to_read: 1
+title: Mermaid charts!
+description: My site now has mermaid charts! Many thanks to Imtiaz Khan!
+---
+
+MermaidJS is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. I've been a fan of tools like it (which includes Graphviz) for years. 
+
+Many thanks to [Imtiaz Khan](https://github.com/ImtiazKhanDS) for sharing with me how to implement it. 
+
+```mermaid
+flowchart LR
+    A[Idea] -->|Code| B(Deploy)
+    B -->|Share| C[Enjoy]
+```