Simplify Mermaid approach with direct div method

- Remove complex JavaScript code conversion
- Add inline script to Albatross post for direct rendering
- Simplify test page with direct div elements
- Use unpkg CDN for more reliable loading
- Focus on working solution over complex automation

Author: devnomadic

_includes/head-custom.html

@@ -20,57 +20,12 @@
 .mermaid {
   text-align: center;
   margin: 1rem 0;
+  background: white;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  padding: 16px;
 }
 </style>
 
-<!-- Mermaid.js for diagram rendering -->
-<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
-<script>
-// Simple and reliable Mermaid initialization
-window.addEventListener('load', function() {
-  if (typeof mermaid !== 'undefined') {
-    // Configure mermaid
-    mermaid.initialize({ 
-      startOnLoad: true,
-      theme: 'default',
-      themeVariables: {
-        primaryColor: '#ff4757',
-        primaryTextColor: '#fff',
-        primaryBorderColor: '#ff3742',
-        lineColor: '#5f27cd',
-        secondaryColor: '#f1f2f6',
-        tertiaryColor: '#ffffff'
-      }
-    });
-    
-    // Find and convert code blocks
-    const codeBlocks = document.querySelectorAll('pre code.language-mermaid');
-    if (codeBlocks.length > 0) {
-      console.log('Found ' + codeBlocks.length + ' mermaid code blocks');
-      
-      codeBlocks.forEach(function(codeBlock, index) {
-        const content = codeBlock.textContent;
-        const mermaidDiv = document.createElement('div');
-        mermaidDiv.className = 'mermaid';
-        mermaidDiv.setAttribute('data-processed', 'false');
-        mermaidDiv.textContent = content;
-        
-        // Replace the pre element
-        const preElement = codeBlock.closest('pre');
-        if (preElement && preElement.parentNode) {
-          preElement.parentNode.replaceChild(mermaidDiv, preElement);
-          console.log('Replaced code block ' + index + ' with mermaid div');
-        }
-      });
-      
-      // Re-initialize mermaid to process new divs
-      setTimeout(function() {
-        mermaid.init();
-        console.log('Mermaid re-initialized');
-      }, 100);
-    }
-  } else {
-    console.log('Mermaid library not loaded');
-  }
-});
-</script>
+<!-- Mermaid.js library -->
+<script src="https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js"></script>

mermaid-test.md

@@ -5,37 +5,28 @@ title: Mermaid Test
 
 # Mermaid Diagram Test
 
-This is a test page to verify Mermaid.js integration is working properly.
+This page tests Mermaid.js integration.
 
-## Method 1: Code Blocks (Automatic Conversion)
-
-```mermaid
+<div class="mermaid">
 graph TD
     A[Start] --> B{Is it working?}
     B -->|Yes| C[Great!]
     B -->|No| D[Debug it]
     D --> B
     C --> E[End]
-```
-
-## Method 2: Architecture Diagram
+</div>
 
-```mermaid
+<div class="mermaid">
 graph LR
     A[Blazor WASM<br/>Client] -->|HMAC Auth| B[Cloudflare<br/>Worker]
     B -->|API Key| C[AbuseIPDB<br/>API]
     C -->|JSON Data| B
     B -->|CORS + JSON| A
-```
-
-## Method 3: Include Method (Alternative)
-
-{% include mermaid.html id="test-include" content="
-graph TD
-    A[Jekyll Include] --> B[Mermaid Rendering]
-    B --> C[Success!]
-" %}
+</div>
 
-If you can see rendered diagrams above instead of code blocks, Mermaid.js is working correctly!
+If you see rendered diagrams above, Mermaid is working!
 
-Check the browser console for debug messages.
+<script src="https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js"></script>
+<script>
+mermaid.initialize({ startOnLoad: true, theme: 'default' });
+</script>

staging/2025-06-10-albatross.md

@@ -858,4 +858,38 @@ Whether you're building your own API proxy or exploring modern web security patt
 
 ---
 
+**Albatross** is live at [https://albatross.devnomadic.com](https://albatross.devnomadic.com/) and the source code is available on [GitHub](https://github.com/devnomadic/albatross).
+
+<script src="https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  if (typeof mermaid !== 'undefined') {
+    mermaid.initialize({ 
+      startOnLoad: false,
+      theme: 'default',
+      securityLevel: 'loose'
+    });
+    
+    // Convert mermaid code blocks
+    const blocks = document.querySelectorAll('pre code.language-mermaid');
+    blocks.forEach(function(block, i) {
+      const div = document.createElement('div');
+      div.className = 'mermaid';
+      div.style.textAlign = 'center';
+      div.style.margin = '20px 0';
+      div.textContent = block.textContent.trim();
+      
+      const pre = block.closest('pre');
+      if (pre && pre.parentNode) {
+        pre.parentNode.replaceChild(div, pre);
+      }
+    });
+    
+    if (blocks.length > 0) {
+      mermaid.init();
+    }
+  }
+});
+</script>
+
 *Albatross is live at [https://albatross.devnomadic.com](https://albatross.devnomadic.com) and the source code is available on [GitHub](https://github.com/devnomadic/albatross).*