From 299b52458bb1783755044b3489316cf07d3bfc99 Mon Sep 17 00:00:00 2001 From: Vuong Hoang Date: Wed, 19 Aug 2026 11:06:36 -0700 Subject: [PATCH] feat(booth): render .md/.txt/.log inline in the gallery, collapsible + closable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Docs used to render as a clumsy link that navigated to a separate page. They now render in place: build_gallery pre-renders each doc (markdown -> HTML, plain text raw) and the gallery shows it inside a native
disclosure that spans the full grid width so prose has a readable measure. The doc bar carries: a collapse chevron (the whole
summary toggles, works with JS off), a full-page link (still reaches the standalone viewer), a download link, and a session-close ✕. The ✕ needed stopPropagation + preventDefault because it lives inside — otherwise its click would toggle the disclosure instead of hiding the item. Close is JS (progressive enhancement); collapse is native. Two design points: - Plain text is returned RAW from build_gallery and escaped by the template inside 
. Pre-escaping in Python plus Jinja autoescape would
  double-encode angle brackets; a test pins the single-escape.
- Inlining is bounded by DOC_MAX_BYTES. A doc over the limit keeps the old
  link-out behaviour rather than being rendered into every index load; a test
  covers the fallback.

The shared .markdown-body / .textview typography moved from doc.html's scoped

 
 
diff --git a/booth/templates/booth.html b/booth/templates/booth.html
index 52b8fcf..ebfb242 100644
--- a/booth/templates/booth.html
+++ b/booth/templates/booth.html
@@ -25,6 +25,29 @@
 {% else %}
   

     {% for it in items %}
+    {% if it.doc and it.rendered is not none %}
+      {# Docs render INLINE, collapsible, and closable — not a link to a
+         separate page. 
 is native collapse (works with JS off);
+         the ✕ hides the item for the session (JS, progressive enhancement).
+         The item spans the full grid width so prose has room to read. #}
+      

+        

+          
+            
+            {{ it.name }}
+            
+            ⤢
+            ⬇
+            
+          
+          {% if it.rendered_html %}
+            
{{ it.rendered|safe }}

+          {% else %}
+            
{{ it.rendered }}

+          {% endif %}
+        

+      

+    {% else %}
     

       {% if it.kind == 'image' %}
         {{ it.name }}
@@ -36,6 +59,7 @@
       {% elif it.kind == 'audio' %}
         
       {% elif it.doc %}
+        {# a doc too large to inline (over DOC_MAX_BYTES) still links out #}
         📄 {{ it.name }}
       {% else %}
         ⬇ {{ it.name }}
@@ -49,6 +73,7 @@
         
       {% endif %}
     

+    {% endif %}
     {% endfor %}
   

 {% endif %}
@@ -85,5 +110,21 @@
       });
     });
   })();
+
+  /* Inline-doc ✕ closes (hides) a rendered doc for the session. The button sits
+     inside , so without this its click would just toggle the 

+     open/closed — stopPropagation + preventDefault make ✕ mean "close", not
+     "collapse". Collapse stays available via the rest of the summary bar. With
+     JS off the button is inert and collapse via 
 still works. */
+  (function () {
+    document.querySelectorAll('.doc-close').forEach(function (btn) {
+      btn.addEventListener('click', function (ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        var item = btn.closest('.item-doc');
+        if (item) item.classList.add('is-closed');
+      });
+    });
+  })();
 
 {% endblock %}
diff --git a/booth/templates/doc.html b/booth/templates/doc.html
index 66f19ce..265a0c5 100644
--- a/booth/templates/doc.html
+++ b/booth/templates/doc.html
@@ -15,26 +15,10 @@
   {% endif %}