From 12d3c00fd71ef5019733d96bb9fadc3fa9042dfe Mon Sep 17 00:00:00 2001
From: Ralph Thesen <mail@redimp.de>
Date: Thu, 10 Oct 2024 00:33:49 +0200
Subject: [PATCH] refactor: update_mermaid() does exactly that. diagrams in
 documentation as svgs.

---
 otterwiki/renderer.py                          |  3 ++-
 otterwiki/static/img/mermaid-example-dark.svg  |  2 ++
 otterwiki/static/img/mermaid-example-light.svg |  1 +
 otterwiki/static/js/otterwiki.js               | 10 ++++++++++
 otterwiki/templates/editor.html                |  2 +-
 otterwiki/templates/snippets/syntax.html       | 17 +++++++++++------
 6 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 otterwiki/static/img/mermaid-example-dark.svg
 create mode 100644 otterwiki/static/img/mermaid-example-light.svg

diff --git a/otterwiki/renderer.py b/otterwiki/renderer.py
index 79dbbdd..3129420 100644
--- a/otterwiki/renderer.py
+++ b/otterwiki/renderer.py
@@ -150,9 +150,10 @@ def block_code(self, code, info=None):
             )
             # replace \n with <br/> for convinient diagram writing (and match the github syntax)
             code = code.replace("\\n","<br/>")
-            return '\n<pre class="mermaid">{}</pre>\n'.format(
+            html = '\n<pre class="mermaid">{}\n</pre>\n'.format(
                 code.strip()
             )
+            return html
         else:
             html = prefix + pygments_render(code, info)
         html = showmagicword(cursorline, html)
diff --git a/otterwiki/static/img/mermaid-example-dark.svg b/otterwiki/static/img/mermaid-example-dark.svg
new file mode 100644
index 0000000..e4920ba
--- /dev/null
+++ b/otterwiki/static/img/mermaid-example-dark.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mermaid-1728512129940" aria-roledescription="flowchart-v2" class="flowchart mermaidexample-dark" style="max-width:404.984375px" viewBox="0 0 405 70"><defs><path id="reuse-0" stroke-dasharray="1 0" stroke-width="2" d="m1 1 9 9m0-9-9 9" class="arrowMarkerPath"/></defs><style>#mermaid-1728512129940{fill:#ccc}#mermaid-1728512129940 .edge-thickness-normal{stroke-width:1px}#mermaid-1728512129940 .edge-pattern-solid{stroke-dasharray:0}#mermaid-1728512129940 .marker{fill:#d3d3d3;stroke:#d3d3d3}#mermaid-1728512129940 .marker.cross{stroke:#d3d3d3}#mermaid-1728512129940,#mermaid-1728512129940 svg{font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;font-size:16px}#mermaid-1728512129940 p{margin:0}#mermaid-1728512129940 .label{font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;color:#ccc}#mermaid-1728512129940 span{fill:#ccc;color:#ccc}#mermaid-1728512129940 .node circle,#mermaid-1728512129940 .node path,#mermaid-1728512129940 .node rect{fill:#1f2020;stroke:#ccc;stroke-width:1px}#mermaid-1728512129940 .node .label{text-align:center}#mermaid-1728512129940 .flowchart-link{stroke:#d3d3d3;fill:none}#mermaid-1728512129940 .edgeLabel{background-color:#585858;text-align:center}#mermaid-1728512129940 .edgeLabel p{background-color:#585858}#mermaid-1728512129940 .edgeLabel rect{opacity:.5;background-color:#585858;fill:#585858}#mermaid-1728512129940 .labelBkg{background-color:rgba(88,88,88,.5)}#mermaid-1728512129940 :root{--mermaid-font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif}</style><marker id="mermaid-1728512129940_flowchart-v2-pointEnd" class="marker flowchart-v2" markerHeight="8" markerUnits="userSpaceOnUse" markerWidth="8" orient="auto" refX="5" refY="5" viewBox="0 0 10 10"><path stroke-dasharray="1 0" d="m0 0 10 5-10 5z" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512129940_flowchart-v2-pointStart" class="marker flowchart-v2" markerHeight="8" markerUnits="userSpaceOnUse" markerWidth="8" orient="auto" refX="4.5" refY="5" viewBox="0 0 10 10"><path stroke-dasharray="1 0" d="m0 5 10 5V0z" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512129940_flowchart-v2-circleEnd" class="marker flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="11" refY="5" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" stroke-dasharray="1 0" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512129940_flowchart-v2-circleStart" class="marker flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="-1" refY="5" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" stroke-dasharray="1 0" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512129940_flowchart-v2-crossEnd" class="marker cross flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="12" refY="5.2" viewBox="0 0 11 11"><use xlink:href="#reuse-0" stroke-dasharray="1 0" stroke-width="2" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512129940_flowchart-v2-crossStart" class="marker cross flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="-1" refY="5.2" viewBox="0 0 11 11"><use xlink:href="#reuse-0" stroke-dasharray="1 0" stroke-width="2" class="arrowMarkerPath"/></marker><g class="root"><g class="edgePaths"><path id="L_A_Mermaid_0" marker-end="url(#mermaid-1728512129940_flowchart-v2-pointEnd)" d="M164.8 35H271.6" class="edge-thickness-normal edge-pattern-solid flowchart-link"/></g><g class="edgeLabels"><g class="edgeLabel"><foreignObject width="60.7" height="24" class="label" transform="translate(189.8 23)"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" display="table-cell" style="white-space:nowrap;line-height:1.5;max-width:200px;text-align:center"><span class="edgeLabel"><p>supports</p></span></div></foreignObject></g></g><g class="nodes"><g id="flowchart-A-12" class="node default"><path d="M-78.4-27H78.4v54H-78.4z" class="basic label-container" data-et="node" data-id="abc" transform="translate(86.4 35)"/><g class="label" transform="translate(38 23)"><rect/><foreignObject width="96.8" height="24"><div xmlns="http://www.w3.org/1999/xhtml" display="table-cell" style="white-space:nowrap;line-height:1.5;max-width:200px;text-align:center"><span class="nodeLabel"><p>An Otter Wiki</p></span></div></foreignObject></g></g><g id="flowchart-Mermaid-13" class="node default"><path d="M-60.7-27H60.8v54H-60.7z" class="basic label-container" data-et="node" data-id="abc" transform="translate(336.3 35)"/><g class="label" transform="translate(305.5 23)"><rect/><foreignObject width="61.5" height="24"><div xmlns="http://www.w3.org/1999/xhtml" display="table-cell" style="white-space:nowrap;line-height:1.5;max-width:200px;text-align:center"><span class="nodeLabel"><p>Mermaid</p></span></div></foreignObject></g></g></g></g></svg>
+
diff --git a/otterwiki/static/img/mermaid-example-light.svg b/otterwiki/static/img/mermaid-example-light.svg
new file mode 100644
index 0000000..f145e64
--- /dev/null
+++ b/otterwiki/static/img/mermaid-example-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="mermaid-1728512220753" aria-roledescription="flowchart-v2" class="mermaidexample-light flowchart" style="max-width:404.984375px" viewBox="0 0 405 70"><defs><path id="reuse-0" stroke-dasharray="1 0" stroke-width="2" d="m1 1 9 9m0-9-9 9" class="arrowMarkerPath"/></defs><style>#mermaid-1728512220753{fill:#000}#mermaid-1728512220753 .edge-thickness-normal{stroke-width:1px}#mermaid-1728512220753 .edge-pattern-solid{stroke-dasharray:0}#mermaid-1728512220753 .marker{fill:#666;stroke:#666}#mermaid-1728512220753 .marker.cross{stroke:#666}#mermaid-1728512220753,#mermaid-1728512220753 svg{font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;font-size:16px}#mermaid-1728512220753 p{margin:0}#mermaid-1728512220753 .label{font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif;color:#000}#mermaid-1728512220753 span{fill:#000;color:#000}#mermaid-1728512220753 .node circle,#mermaid-1728512220753 .node path,#mermaid-1728512220753 .node rect{fill:#eee;stroke:#999;stroke-width:1px}#mermaid-1728512220753 .node .label{text-align:center}#mermaid-1728512220753 .flowchart-link{stroke:#666;fill:none}#mermaid-1728512220753 .edgeLabel{background-color:#fff;text-align:center}#mermaid-1728512220753 .edgeLabel p{background-color:#fff}#mermaid-1728512220753 .edgeLabel rect{opacity:.5;background-color:#fff;fill:#fff}#mermaid-1728512220753 .labelBkg{background-color:rgba(255,255,255,.5)}#mermaid-1728512220753 :root{--mermaid-font-family:&quot;trebuchet ms&quot;,verdana,arial,sans-serif}</style><marker id="mermaid-1728512220753_flowchart-v2-pointEnd" class="marker flowchart-v2" markerHeight="8" markerUnits="userSpaceOnUse" markerWidth="8" orient="auto" refX="5" refY="5" viewBox="0 0 10 10"><path stroke-dasharray="1 0" d="m0 0 10 5-10 5z" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512220753_flowchart-v2-pointStart" class="marker flowchart-v2" markerHeight="8" markerUnits="userSpaceOnUse" markerWidth="8" orient="auto" refX="4.5" refY="5" viewBox="0 0 10 10"><path stroke-dasharray="1 0" d="m0 5 10 5V0z" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512220753_flowchart-v2-circleEnd" class="marker flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="11" refY="5" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" stroke-dasharray="1 0" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512220753_flowchart-v2-circleStart" class="marker flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="-1" refY="5" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" stroke-dasharray="1 0" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512220753_flowchart-v2-crossEnd" class="marker cross flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="12" refY="5.2" viewBox="0 0 11 11"><use xlink:href="#reuse-0" stroke-dasharray="1 0" stroke-width="2" class="arrowMarkerPath"/></marker><marker id="mermaid-1728512220753_flowchart-v2-crossStart" class="marker cross flowchart-v2" markerHeight="11" markerUnits="userSpaceOnUse" markerWidth="11" orient="auto" refX="-1" refY="5.2" viewBox="0 0 11 11"><use xlink:href="#reuse-0" stroke-dasharray="1 0" stroke-width="2" class="arrowMarkerPath"/></marker><g class="root"><g class="edgePaths"><path id="L_A_Mermaid_0" marker-end="url(#mermaid-1728512220753_flowchart-v2-pointEnd)" d="M164.8 35H271.6" class="edge-thickness-normal edge-pattern-solid flowchart-link"/></g><g class="edgeLabels"><g class="edgeLabel"><foreignObject width="60.7" height="24" class="label" transform="translate(189.8 23)"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" display="table-cell" style="white-space:nowrap;line-height:1.5;max-width:200px;text-align:center"><span class="edgeLabel"><p>supports</p></span></div></foreignObject></g></g><g class="nodes"><g id="flowchart-A-12" class="node default"><path d="M-78.4-27H78.4v54H-78.4z" class="basic label-container" data-et="node" data-id="abc" transform="translate(86.4 35)"/><g class="label" transform="translate(38 23)"><rect/><foreignObject width="96.8" height="24"><div xmlns="http://www.w3.org/1999/xhtml" display="table-cell" style="white-space:nowrap;line-height:1.5;max-width:200px;text-align:center"><span class="nodeLabel"><p>An Otter Wiki</p></span></div></foreignObject></g></g><g id="flowchart-Mermaid-13" class="node default"><path d="M-60.7-27H60.8v54H-60.7z" class="basic label-container" data-et="node" data-id="abc" transform="translate(336.3 35)"/><g class="label" transform="translate(305.5 23)"><rect/><foreignObject width="61.5" height="24"><div xmlns="http://www.w3.org/1999/xhtml" display="table-cell" style="white-space:nowrap;line-height:1.5;max-width:200px;text-align:center"><span class="nodeLabel"><p>Mermaid</p></span></div></foreignObject></g></g></g></g></svg>
diff --git a/otterwiki/static/js/otterwiki.js b/otterwiki/static/js/otterwiki.js
index 0813b7e..025bde8 100644
--- a/otterwiki/static/js/otterwiki.js
+++ b/otterwiki/static/js/otterwiki.js
@@ -633,6 +633,7 @@ var otterwiki = {
         if (ehm.style.display === "none")
         {
             ehm.style.display = "block";
+            otterwiki.update_mermaid();
         }
         else
         {
@@ -664,6 +665,15 @@ var otterwiki = {
         }
         return false;
     },
+    update_mermaid: function() {
+        if (typeof(mermaid) == 'undefined' || mermaid == null) { return; }
+
+        var mm_diagrams = document.getElementsByClassName('mermaid');
+        for (var i = 0; i < mm_diagrams.length; ++i) {
+            mm_diagrams[i].removeAttribute('data-processed');
+        }
+        mermaid.contentLoaded();
+    },
 }
 
 var MathJax = {
diff --git a/otterwiki/templates/editor.html b/otterwiki/templates/editor.html
index 1567270..313fd76 100644
--- a/otterwiki/templates/editor.html
+++ b/otterwiki/templates/editor.html
@@ -426,7 +426,7 @@ <h5 class="sidebar-title"><a class="sidebar-title-link" href="{{ url_for('attach
                 // update MathJax
                 MathJax.typeset();
                 // update Mermaid
-                mermaid.contentLoaded();
+                otterwiki.update_mermaid();
                 if (cursor) {
                     cursor.scrollIntoView({
                         behavior: 'instant',
diff --git a/otterwiki/templates/snippets/syntax.html b/otterwiki/templates/snippets/syntax.html
index 4cc9c01..616f87e 100644
--- a/otterwiki/templates/snippets/syntax.html
+++ b/otterwiki/templates/snippets/syntax.html
@@ -357,11 +357,11 @@ <h4>Alerts</h4>
 <pre class="block-compact">
 &gt; [!NOTE]
 &gt; Useful for highlighting special
-&gt; information in your code.
+&gt; information.
 </pre>
 </div>
 <div class="col-md-6 col-sm-12 p-5">
-<div class="quote-alert quote-alert-note" style="margin:0;"><div class="quote-alert-header"><i class="fas fa-info-circle"></i> Note</div><p>Useful for highlighting special information in your code.</p></div>
+<div class="quote-alert quote-alert-note" style="margin:0;"><div class="quote-alert-header"><i class="fas fa-info-circle"></i> Note</div><p>Useful for highlighting special information.</p></div>
 </div>
 </div> {# row #}
 Alerts available: <code>[!NOTE]</code>, <code>[!TIP]</code>, <code>[!IMPORTANT]</code>, <code>[!WARNING]</code> and <code>[!CAUTION]</code>.
@@ -379,10 +379,15 @@ <h4>Alerts</h4>
 </pre>
 </div>
 <div class="col-md-6 col-sm-12 p-5">
-<pre class="mermaid">
-flowchart LR
-  A[An Otter Wiki]-- supports ---Mermaid
-</pre>
+<style type="text/css">
+    .example-light { display: block; }
+    .dark-mode .example-light { display: none; }
+    .example-dark { display: none; }
+    .dark-mode .example-dark { display: block; }
+</style>
+<img class="example-light" src="{{ url_for("static", filename="img/mermaid-example-light.svg")}}">
+<img class="example-dark" src="{{ url_for("static", filename="img/mermaid-example-dark.svg")}}">
+
 </div>
 </div> {# row #}