wip

Author: acharneski

_layouts/post.html

@@ -14,6 +14,55 @@
     {% include seo_head.html %}
     <!-- MathJax Configuration (loaded early) -->
     {% if page.mathjax or site.mathjax %}
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
+<style>
+    .mermaid-modal {
+        display: none;
+        position: fixed;
+        z-index: 10000;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background-color: rgba(0,0,0,0.9);
+    }
+    .mermaid-modal-content {
+        margin: auto;
+        display: block;
+        width: 95%;
+        height: 95%;
+        position: relative;
+        top: 2.5%;
+        background: white;
+        border-radius: 4px;
+        overflow: hidden;
+    }
+    .mermaid-modal-close {
+        position: absolute;
+        top: 10px;
+        right: 25px;
+        color: #f1f1f1;
+        font-size: 35px;
+        font-weight: bold;
+        transition: 0.3s;
+        z-index: 10001;
+        cursor: pointer;
+    }
+    .mermaid-modal-close:hover,
+    .mermaid-modal-close:focus {
+        color: #bbb;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    .mermaid svg {
+        cursor: pointer;
+    }
+</style>
+<div id="mermaid-modal" class="mermaid-modal">
+    <span class="mermaid-modal-close">&times;</span>
+    <div id="mermaid-modal-content" class="mermaid-modal-content"></div>
+</div>
     <script>
         window.MathJax = {
             tex: {
@@ -198,8 +247,8 @@ <h3>Related Posts</h3>
 </script>
 
 <!-- Mermaid.js integration -->
-{% if page.mermaid or site.mermaid %}
-<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+ {% if page.mermaid or site.mermaid %}
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         mermaid.initialize({
@@ -226,7 +275,58 @@ <h3>Related Posts</h3>
             }
         });
         // Manually run Mermaid after transformations
-        mermaid.run();
+        mermaid.run().catch(err => console.error(err)).then(() => {
+            const modal = document.getElementById('mermaid-modal');
+            const modalContent = document.getElementById('mermaid-modal-content');
+            const closeBtn = document.querySelector('.mermaid-modal-close');
+            let panZoomInstance;
+
+            const closeModal = () => {
+                modal.style.display = 'none';
+                if (panZoomInstance) {
+                    panZoomInstance.destroy();
+                    panZoomInstance = null;
+                }
+                modalContent.innerHTML = '';
+            };
+
+            closeBtn.onclick = closeModal;
+            
+            window.onclick = function(event) {
+                if (event.target == modal) {
+                    closeModal();
+                }
+            };
+
+            document.addEventListener('keydown', function(event) {
+                if (event.key === "Escape" && modal.style.display === 'block') {
+                    closeModal();
+                }
+            });
+
+            document.querySelectorAll('.mermaid').forEach(div => {
+                const svg = div.querySelector('svg');
+                if (svg) {
+                    div.addEventListener('click', function() {
+                        modal.style.display = 'block';
+                        const clonedSvg = svg.cloneNode(true);
+                        clonedSvg.style.maxWidth = 'none';
+                        clonedSvg.style.maxHeight = 'none';
+                        clonedSvg.style.width = '100%';
+                        clonedSvg.style.height = '100%';
+                        modalContent.appendChild(clonedSvg);
+                        panZoomInstance = svgPanZoom(clonedSvg, {
+                            zoomEnabled: true,
+                            controlIconsEnabled: true,
+                            fit: true,
+                            center: true,
+                            minZoom: 0.1,
+                            maxZoom: 10
+                        });
+                    });
+                }
+            });
+        });
     });
  </script>
  {% endif %}