feat: content reader modal

html-router/templates/content/content_list.html

@@ -29,6 +29,10 @@
         </p>
         <div class="badge badge-soft badge-secondary mr-2">{{ text_content.category }}</div>
         <div class="flex gap-2">
+          <button hx-get="/content/{{ text_content.id }}/read" hx-target="#modal" hx-swap="innerHTML"
+            class="btn btn-square btn-ghost btn-sm">
+            {% include "icons/read_icon.html" %}
+          </button>
           <button hx-get="/content/{{ text_content.id }}" hx-target="#modal" hx-swap="innerHTML"
             class="btn btn-square btn-ghost btn-sm">
             {% include "icons/edit_icon.html" %}

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 %}

html-router/templates/icons/read_icon.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+  class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
+</svg>

html-router/templates/modal_base.html

@@ -1,5 +1,5 @@
 <dialog id="body_modal" class="modal">
-  <div class="modal-box">
+  <div class="modal-box {% block modal_class %}{% endblock %} ">
     <form id="modal_form" {% block form_attributes %}{% endblock %}>
       <div class="flex flex-col space-y-4">
         {% block modal_content %} <!-- Form fields go here in child templates -->
@@ -35,4 +35,7 @@
       evt.target.innerHTML = '';
     });
   </script>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
 </dialog>