From 811affc9b35e19c30677dea39c2224c8d64a4943 Mon Sep 17 00:00:00 2001
From: Daniel Nitsikopoulos <daniel@dnitza.com>
Date: Mon, 6 Feb 2023 15:03:18 +1100
Subject: [PATCH] Improve suport for image posts

---
 app/decorators/posts/decorator.rb   | 4 ++++
 app/templates/feeds/rss.xml.builder | 2 +-
 app/templates/posts/show.html.slim  | 7 +++++--
 app/templates/tags/show.html.slim   | 2 +-
 public/assets/index.css             | 4 ++++
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/decorators/posts/decorator.rb b/app/decorators/posts/decorator.rb
index 0122d23..638f392 100644
--- a/app/decorators/posts/decorator.rb
+++ b/app/decorators/posts/decorator.rb
@@ -42,6 +42,10 @@ module Adamantium
           published_at.rfc2822
         end
 
+        def feed_content
+          photos? ? "<div>#{photos.map { |p| "<img src='#{p["value"]}'/>" }.join("")} #{content}</div>" : content
+        end
+
         def excerpt
           truncate_html(content, 140, true)
         end
diff --git a/app/templates/feeds/rss.xml.builder b/app/templates/feeds/rss.xml.builder
index e2f024b..eda69bf 100644
--- a/app/templates/feeds/rss.xml.builder
+++ b/app/templates/feeds/rss.xml.builder
@@ -11,7 +11,7 @@ xml.channel do |channel|
     channel.item do |item|
       item.title post.display_title
       item.description do |desc|
-        desc.cdata! post.content
+        desc.cdata! post.feed_content
       end
       item.guid(post.slug, isPermaLink: true)
       item.pubDate post.machine_published_at
diff --git a/app/templates/posts/show.html.slim b/app/templates/posts/show.html.slim
index 16dbdbf..025ffd6 100644
--- a/app/templates/posts/show.html.slim
+++ b/app/templates/posts/show.html.slim
@@ -1,10 +1,13 @@
 div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
   h1 = post.display_title
 
-article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline"
+article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-img:rounded"
   - if post.photos?
     - post.photos.each do |photo|
-      img src=photo["value"] alt=photo["alt"]
+      figure
+        img src=photo["value"] alt=photo["alt"]
+        figcaption
+          = photo["alt"]
   == post.content
 
 div class="mb-4 max-w-screen-md mx-auto border-t-4 border-solid border-gray-400 dark:border-gray-600"
diff --git a/app/templates/tags/show.html.slim b/app/templates/tags/show.html.slim
index 6302783..5daf41e 100644
--- a/app/templates/tags/show.html.slim
+++ b/app/templates/tags/show.html.slim
@@ -1,5 +1,5 @@
 div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
-  h1 = "Tagged: \"#{tag.label}\""
+  h2 = "#{posts.count} item(s) tagged \"#{tag.label}\""
 
 div class="mb-12 max-w-prose mx-auto"
   - posts.each do |post|
diff --git a/public/assets/index.css b/public/assets/index.css
index f7601a0..0cde529 100644
--- a/public/assets/index.css
+++ b/public/assets/index.css
@@ -1435,6 +1435,10 @@ video {
   color: rgb(219 234 254 / var(--tw-text-opacity));
 }
 
+.prose-img\:rounded :is(:where(img):not(:where([class~="not-prose"] *))) {
+  border-radius: 0.25rem;
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:border-gray-600 {
     --tw-border-opacity: 1;