feat: content reader modal

html-router/templates/content/read_content_modal.html

@@ -0,0 +1,42 @@
+{% extends "modal_base.html" %}
+
+
+{% block modal_class %}w-11/12 max-w-[90ch] max-h-[95%]{% endblock %}
+
+{% block modal_content %}
+{% if text_content.url_info.image_id %}
+<img class="rounded-t-md overflow-clip" src="/file/{{text_content.url_info.image_id}}" />
+{% endif %}
+
+<div class="markdown-content prose" data-content="{{text_content.text | escape }}">
+  {{text_content.text | escape }}
+</div>
+<script src="/assets/marked.min.js"></script>
+<script>
+  function initialize() {
+    marked.setOptions({
+      breaks: true, gfm: true, headerIds: false, mangle: false,
+      smartLists: true, smartypants: true, xhtml: false
+    });
+    console.log('initialized');
+  }
+
+  function renderStaticMarkdown() {
+    document.querySelectorAll('.markdown-content').forEach(el => {
+      console.log('hello');
+      const raw = el.getAttribute('data-content') || '';
+      el.innerHTML = marked.parse(raw);
+    });
+  }
+
+  function processMarkdown() {
+    initialize();
+    renderStaticMarkdown();
+  }
+
+  document.body.addEventListener('htmx:afterSettle', processMarkdown);
+</script>
+{% endblock %}
+
+{% block primary_actions %}
+{% endblock %}