add img to babycode

data/static/style.css

@@ -435,6 +435,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   width: 50%;
 }
 
+.block-img {
+  object-fit: contain;
+  max-width: 400px;
+  max-height: 400px;
+}
+
 .thread-info-container {
   grid-area: thread-info-container;
   background-color: #c1ceb1;

lib/babycode.lua

@@ -96,6 +96,13 @@ function babycode.to_html(s, escape_html)
     return "<ol>" .. get_list_items(list_body, escape_html) .. "</ol>"
   end)
   
+  -- images
+  local images = {}
+  text = text:gsub("%[img=(.-)%](.-)%[/img%]", function (img, alt)
+    table.insert(images, {img = img, alt = alt})
+    return "\1IMG:"..#images.."\1"
+  end)
+  
   -- normalize newlines, attempt #4
   text = text:gsub("  +%s*\r?\n", "<br>")
   text = text:gsub("(%S)(\r?\n\r?\n)\r?\n*", "%1<br><br>")
@@ -131,6 +138,11 @@ function babycode.to_html(s, escape_html)
   -- rule
   text = text:gsub("\n+%-%-%-", "<hr>")
 
+  -- <div class=\"post-img-container\"><img src=%1 alt=%2></div>
+  text = text:gsub("\1IMG:(%d+)\1", function (n)
+    local img = images[tonumber(n)]
+    return ("<div class=\"block-img-container\"><img class=\"block-img\" src=\"%s\" alt=\"%s\"></div>"):format(img.img, img.alt)
+  end)
   -- replace code block placeholders back with their original contents
   text = text:gsub("\1CODE:(%d+)\1", function(n)
     local code = code_blocks[tonumber(n)]

sass/style.scss

@@ -447,6 +447,12 @@ input[type="text"], input[type="password"], textarea, select {
   width: 50%;
 }
 
+.block-img {
+  object-fit: contain;
+  max-width: 400px;
+  max-height: 400px;
+}
+
 .thread-info-container {
   grid-area: thread-info-container;
   background-color: $accent_color;

views/common/bbcode_help.etlua

@@ -5,6 +5,7 @@
     <li>[b]<b>bold</b>[/b]</li>
     <li>[i]<i>italic</i>[/i]</li>
     <li>[s]<del>strikethrough</del>[/s]</li>
+    <li>[img=https://example.com/some-image]alt text[/img] creates an image</li>
     <li>[url=https://example.com]<a href="https://example.com">labeled URL</a>[/url]</li>
     <li>
       [ul] and [ol] are unordered and ordered lists: