made it possible to load markdown at runtime (janky af)

DolfeLive · DolfeLive · commit 6c2afe0f3ead · 2025-02-17T22:21:35.000+11:00
diff --git a/Scripts/LiveMarkdownLoader/Collector.js b/Scripts/LiveMarkdownLoader/Collector.js
@@ -0,0 +1,9 @@
+import MarkdownConverter  from "/Scripts/runtimeMarkdown.js";
+
+document.addEventListener('DOMContentLoaded', () => {
+    const converter = new MarkdownConverter();
+    
+    const test = converter.parse("# Sample\n\n**Bold Text**")
+    const html = converter.convertToHTML(test)
+    document.querySelector('.text').innerHTML = html;
+});
diff --git a/Scripts/LiveMarkdownLoader/GUIDList.html b/Scripts/LiveMarkdownLoader/GUIDList.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UltraModding wiki</title>
+    <link rel="stylesheet" href="../styles.css">
+</head>
+<body>
+    <div id="sidebar"></div>
+    
+    <div id="content" class="content">
+        <div class="textbox">
+            <div class="text">
+                
+            </div>
+        </div>
+    </div>
+    
+    <script type="module" src="/Scripts/runtimeMarkdown.js"></script>
+    <script type="module" src="Collector.js"></script>
+    <script src="/Scripts/sidebar.js"></script>
+    <script src="/Scripts/dropdown.js"></script>
+    
+</body>
+</html>
diff --git a/Scripts/markdown-converter.js b/Scripts/markdown-converter.js
@@ -63,13 +63,17 @@ class MarkdownConverter {
         }        
         return html.replace(/\n/g, '<br>');
     }
-    
-    
 }
+//export default MarkdownConverter;
 document.addEventListener('DOMContentLoaded', () => {
     const scriptTag = document.querySelector('script[src*="markdown-converter.js"]');
     const file = scriptTag?.getAttribute('data-md');
-
+    
+    if (file == null)
+    {
+        return;
+    }
+    
     fetch(file)
         .then(response => response.text())
         .then(markdown => {
@@ -78,4 +82,5 @@ document.addEventListener('DOMContentLoaded', () => {
             updateContent();
         })
         .catch(err => console.error('Error loading markdown:', err));
-});
+});
+
diff --git a/Scripts/runtimeMarkdown.js b/Scripts/runtimeMarkdown.js
@@ -0,0 +1,67 @@
+class MarkdownConverter {
+    parse(markdown) {
+        let result = '';
+        let currentContent = '';
+                const lines = markdown.split('\n');
+        let i = 0;
+        
+        while (i < lines.length) {
+            const line = lines[i];
+            
+            if (line.startsWith('---os:')) {
+                if (currentContent) {
+                    result += this.convertToHTML(currentContent);
+                    currentContent = '';
+                }
+                
+                const osType = line.replace('---os:', '').trim();
+                let osContent = '';
+                i++;
+                
+                while (i < lines.length && !lines[i].includes('---end---')) {
+                    osContent += lines[i] + '\n';
+                    i++;
+                }
+                
+                result += `
+                    <div class="OSSpesific">
+                        <div class="os-content" data-os="windows">${osType === 'windows' ? this.convertToHTML(osContent) : ''}</div>
+                        <div class="os-content" data-os="mac">${osType === 'mac' ? this.convertToHTML(osContent) : ''}</div>
+                        <div class="os-content" data-os="linux">${osType === 'linux' ? this.convertToHTML(osContent) : ''}</div>
+                    </div>
+                `;
+            } else {
+                currentContent += line + '\n';
+            }
+            
+            i++;
+        }
+        
+        if (currentContent) {
+            result += this.convertToHTML(currentContent);
+        }
+        
+        return result;
+    }
+    convertToHTML(markdown) {
+        let html = markdown
+            .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+            .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+            .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            .replace(/!\[([^\]]*)\]\(([^)]+)\s*"(.*?)"\)/g, (match, alt, src, size) => {
+                const sizeStyle = size ? ` style="${size}"` : '';
+                return `<img src="${src}" alt="${alt}"${sizeStyle} />`;
+            })            
+            .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
+            .replace(/```([^`]+)```/gs, '<pre><code>$1</code></pre>');
+        
+        if (html.includes('<li>')) {
+            html = html.replace(/(<li>.*?<\/li>)/gs, '<ul>$1</ul>');
+            html = html.replace(/<\/ul>\s*<ul>/g, ''); // Merge consecutive <ul>
+        }        
+        return html.replace(/\n/g, '<br>');
+    }
+}
+export default MarkdownConverter;
