refactor: update_mermaid() does exactly that. diagrams in documentati…

…on as svgs.
redimp · Oct 9, 2024 · 12d3c00 · 12d3c00
1 parent 0cea9f5
commit 12d3c00
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git 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
diff --git a/otterwiki/static/img/mermaid-example-light.svg b/otterwiki/static/img/mermaid-example-light.svg
diff --git 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
@@ -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
@@ -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 #}