- Allow and improve viewing of different content types. First type implemented: changelog

eveai_app/templates/basic/view_markdown.html

@@ -0,0 +1,102 @@
+{% extends "base.html" %}
+{% block title %}{{ title }}{% endblock %}
+
+{% block content_title %}{{ title }}{% endblock %}
+{% block content_description %}{{ description }}{% endblock %}
+
+{% block content %}
+<div class="container mt-5">
+    <div class="card">
+        <div class="card-header bg-light d-flex justify-content-between align-items-center">
+            <div class="btn-group" role="group">
+                <button class="btn btn-sm btn-outline-secondary" id="showRaw">Show Raw</button>
+                <button class="btn btn-sm btn-outline-primary active" id="showRendered">Show Rendered</button>
+            </div>
+        </div>
+        <div class="card-body">
+            <!-- Raw markdown view (hidden by default) -->
+            <div id="rawMarkdown" class="code-wrapper" style="display: none;">
+                <pre><code class="language-markdown">{{ markdown_content }}</code></pre>
+            </div>
+
+            <!-- Rendered markdown view -->
+            <div id="renderedMarkdown" class="markdown-body">
+                {{ markdown_content | markdown }}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
+<style>
+    pre, code {
+        margin: 0;
+        padding: 0;
+        white-space: pre-wrap !important;
+        word-wrap: break-word !important;
+        max-width: 100%;
+    }
+
+    pre code {
+        padding: 1rem !important;
+        border-radius: 4px;
+        font-size: 0.75rem;
+        line-height: 1.5;
+        white-space: pre-wrap !important;
+    }
+
+    .code-wrapper {
+        position: relative;
+        width: 100%;
+    }
+
+    .markdown-body {
+        padding: 1rem;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        line-height: 1.6;
+    }
+
+    /* Dark mode styling (optional) */
+    @media (prefers-color-scheme: dark) {
+        .markdown-body {
+            color: #c9d1d9;
+            background-color: #0d1117;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize syntax highlighting
+    document.querySelectorAll('pre code').forEach((block) => {
+        hljs.highlightElement(block);
+    });
+
+    // Toggle buttons for display
+    const showRawBtn = document.getElementById('showRaw');
+    const showRenderedBtn = document.getElementById('showRendered');
+    const rawMarkdown = document.getElementById('rawMarkdown');
+    const renderedMarkdown = document.getElementById('renderedMarkdown');
+
+    showRawBtn.addEventListener('click', function() {
+        rawMarkdown.style.display = 'block';
+        renderedMarkdown.style.display = 'none';
+        showRawBtn.classList.add('active');
+        showRenderedBtn.classList.remove('active');
+    });
+
+    showRenderedBtn.addEventListener('click', function() {
+        rawMarkdown.style.display = 'none';
+        renderedMarkdown.style.display = 'block';
+        showRawBtn.classList.remove('active');
+        showRenderedBtn.classList.add('active');
+    });
+});
+</script>
+{% endblock %}