From 846417580eadf76fe7ddf5245bcdbd0de3d65044 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Tue, 7 Apr 2026 00:03:25 -0400
Subject: [PATCH] Add image rendering to markdown parser

Support ![alt](url) syntax in comments/descriptions. Images are only
rendered for http/https URLs. Style via .md-image (max-width, border,
block display) consistent with existing .lt-markdown img rule.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/base.css   | 2 +-
 assets/js/markdown.js | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index 6e4c566..772f46f 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -5162,7 +5162,7 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
 .lt-markdown a:hover { text-decoration: underline; }
 .lt-markdown a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
 .lt-markdown strong { color: var(--text-primary); }
-.lt-markdown img { max-width: 100%; border: 1px solid var(--border-dim); }
+.lt-markdown img, .md-image { max-width: 100%; height: auto; border: 1px solid var(--border-dim); border-radius: 2px; display: block; margin: 0.5rem 0; }
 .lt-markdown table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin: 0.75rem 0; }
 .lt-markdown th  { background: var(--bg-secondary); color: var(--accent-cyan); padding: 0.4rem 0.6rem; border: 1px solid var(--border-dim); text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
 .lt-markdown td  { padding: 0.35rem 0.6rem; border: 1px solid var(--border-dim); color: var(--text-secondary); }
diff --git a/assets/js/markdown.js b/assets/js/markdown.js
index 42cfd9a..c5825fc 100644
--- a/assets/js/markdown.js
+++ b/assets/js/markdown.js
@@ -41,6 +41,14 @@ function parseMarkdown(markdown) {
     html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
     html = html.replace(/_(.+?)_/g, '<em>$1</em>');
 
+    // Images ![alt](url) - must come before link handler
+    html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, function(match, alt, url) {
+        if (/^https?:/i.test(url)) {
+            return '<img src="' + url + '" alt="' + alt + '" class="md-image" loading="lazy">';
+        }
+        return match;
+    });
+
     // Links [text](url) - only allow safe protocols
     html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, function(match, text, url) {
         // Only allow http, https, mailto protocols