From 3e690c8402e523e97ccd7ac532f6076ae05e5f29 Mon Sep 17 00:00:00 2001
From: Nikola Petrov <nikolavp@gmail.com>
Date: Wed, 10 Jul 2024 00:10:49 +0300
Subject: [PATCH 1/2] Add mermaid diagrams support through javascript

This is the best option that I could find for this. Another way would be
to shellout to the `mermaid-cli` but that seems too heavyweight and needs
yet another cli to be installed on the machine. Where the pure
javascript library is just portable.

What this does is that it reverses the highlighting done github API and
then it runs the mermaid javascript library on top of the pre tags that
are created.

The only downside that I can see is that there is now a dependency on
the mermaid javascript library in the template. There might be ways to
get around this by loading the file dynamically but that seems far too
complex for my taste.
---
 grip/templates/index.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/grip/templates/index.html b/grip/templates/index.html
index 14d54de..80c9d64 100644
--- a/grip/templates/index.html
+++ b/grip/templates/index.html
@@ -33,7 +33,8 @@
 {%- endblock -%}
 
 {%- block scripts -%}
-  <script>
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
     function showCanonicalImages() {
       var images = document.getElementsByTagName('img');
       if (!images) {
@@ -83,12 +84,30 @@
       }
     }
 
+    function enableMermaidSupport() {
+      const elements = document.querySelectorAll('.highlight-source-mermaid pre')
+      if (elements.length === 0) {
+        return;
+      }
+      // There is no way to tell the github API to not highlight mermaid. So we need
+      // to reverse what they've done in terms of highlighting.
+      elements.forEach(function(pre) {
+        pre.innerHTML = pre.innerText;
+      });
+
+      mermaid.run({
+        querySelector: '.highlight-source-mermaid pre',
+      });
+    }
+
     window.onhashchange = function() {
       scrollToHash();
     }
 
     window.onload = function() {
       scrollToHash();
+
+      enableMermaidSupport();
     }
 
     showCanonicalImages();

From 14146b00199ef86e7674d282cf3d7d80cf1a5ddb Mon Sep 17 00:00:00 2001
From: Nikola Petrov <nikolavp@gmail.com>
Date: Wed, 10 Jul 2024 09:39:18 +0300
Subject: [PATCH 2/2] Reenable on refresh

---
 grip/templates/index.html | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/grip/templates/index.html b/grip/templates/index.html
index 80c9d64..5d586c7 100644
--- a/grip/templates/index.html
+++ b/grip/templates/index.html
@@ -57,6 +57,22 @@
       }
     }
 
+    function enableMermaidSupport() {
+      const elements = document.querySelectorAll('.highlight-source-mermaid pre')
+      if (elements.length === 0) {
+        return;
+      }
+      // There is no way to tell the github API to not highlight mermaid. So we need
+      // to reverse what they've done in terms of highlighting.
+      elements.forEach(function(pre) {
+        pre.innerHTML = pre.innerText;
+      });
+
+      mermaid.run({
+        querySelector: '.highlight-source-mermaid pre',
+      });
+    }
+
     function autorefreshContent(eventSourceUrl) {
       var initialTitle = document.title;
       var contentElement = document.getElementById('grip-content');
@@ -73,6 +89,7 @@
           document.title = initialTitle;
           contentElement.innerHTML = msg.content;
           showCanonicalImages();
+          enableMermaidSupport();
         }
       }
 
@@ -84,22 +101,6 @@
       }
     }
 
-    function enableMermaidSupport() {
-      const elements = document.querySelectorAll('.highlight-source-mermaid pre')
-      if (elements.length === 0) {
-        return;
-      }
-      // There is no way to tell the github API to not highlight mermaid. So we need
-      // to reverse what they've done in terms of highlighting.
-      elements.forEach(function(pre) {
-        pre.innerHTML = pre.innerText;
-      });
-
-      mermaid.run({
-        querySelector: '.highlight-source-mermaid pre',
-      });
-    }
-
     window.onhashchange = function() {
       scrollToHash();
     }
@@ -107,10 +108,10 @@
     window.onload = function() {
       scrollToHash();
 
-      enableMermaidSupport();
     }
 
     showCanonicalImages();
+    enableMermaidSupport();
 
     var autorefreshUrl = document.getElementById('preview-page').getAttribute('data-autorefresh-url');
     if (autorefreshUrl) {