blog: nice comment tweaks

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';
+    });
+});

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;

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>