From 0596edc4b2e3e77f3c3f67d898f6d2a3a59fc08f Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Wed, 21 May 2025 18:39:33 +0100
Subject: [PATCH] blog: nice comment tweaks

---
 public/script/blog.js | 19 +++++++++++++++++++
 public/style/blog.css |  2 +-
 view/blog.html        | 12 ++++++++----
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/public/script/blog.js b/public/script/blog.js
index e69de29..6b9fee4 100644
--- a/public/script/blog.js
+++ b/public/script/blog.js
@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.comment-hover').forEach((/** @type {HTMLDivElement} */ comment) => {
+        /** @type {HTMLLinkElement} */
+        const commentBody = comment.querySelector('a.comment-body');
+
+        comment.querySelectorAll('a').forEach((/** @type {HTMLLinkElement} */ element) => {
+            element.addEventListener('click', event => {
+                event.stopPropagation();
+            });
+        });
+
+        comment.addEventListener('click', () => {
+            commentBody.click();
+        });
+
+        comment.style.cursor = 'pointer';
+        comment.role = 'link';
+    });
+});
diff --git a/public/style/blog.css b/public/style/blog.css
index ee637bb..19d87b4 100644
--- a/public/style/blog.css
+++ b/public/style/blog.css
@@ -204,7 +204,7 @@ article.blog {
     white-space: break-spaces;
 }
 
-.comment .comment-footer .comment-date {
+.comment .comment-footer {
     margin: 0;
     font-size: .8em;
     opacity: .5;
diff --git a/view/blog.html b/view/blog.html
index a5f8130..eb8c4a1 100644
--- a/view/blog.html
+++ b/view/blog.html
@@ -38,8 +38,10 @@
     join the conversation on
     <a class="btn bluesky" href="{{.BlueskyURL}}" target="_blank">Bluesky 🦋</a>
     <!-- TODO: mastodon support -->
-    or
-    <a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
+    <!--
+        or
+        <a class="btn mastodon" href="{{.MastodonURL}}" target="_blank">Mastodon 🐘</a>
+    -->
     </p>
 
     <div class="comments">
@@ -74,8 +76,10 @@
                 {{end}}
             </div>
             <div class="comment-footer">
-                <!-- <span>{{.Post.LikeCount}} likes</span> -->
-                <!-- <span>{{.Post.RepostCount}} reposts</span> -->
+                <span>{{.Post.LikeCount}} like{{if ne .Post.LikeCount 1}}s{{end}}</span>
+                &bull;
+                <span>{{.Post.RepostCount}} repost{{if ne .Post.RepostCount 1}}s{{end}}</span>
+                &bull;
                 <span class="comment-date">{{.Post.Record.CreatedAtPrint}}</span>
             </div>
         </a>