From fece0f5da676c9b78957b530d6d1760567871ef9 Mon Sep 17 00:00:00 2001
From: ari melody <ari@arimelody.me>
Date: Wed, 21 May 2025 18:38:50 +0100
Subject: [PATCH 1/2] blog: display bluesky like and repost counts

---
 view/blog.go | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/view/blog.go b/view/blog.go
index 9ab52d2..1f3bb1d 100644
--- a/view/blog.go
+++ b/view/blog.go
@@ -16,6 +16,15 @@ import (
 	"github.com/gomarkdown/markdown/parser"
 )
 
+type BlogView struct {
+    *model.Blog
+    Comments []*model.ThreadViewPost
+    Likes int
+    Reposts int
+    BlueskyURL string
+    MastodonURL string
+}
+
 var mdRenderer = html.NewRenderer(html.RendererOptions{
 	Flags: html.CommonFlags | html.HrefTargetBlank,
 })
@@ -109,20 +118,11 @@ this is `+"`"+`aridoodle`+"`"+`. please take care of her.
 			comments = append(comments, blueskyPost.Replies...)
 		}
 
-		type BlogView struct {
-			*model.Blog
-			Comments []*model.ThreadViewPost
-			Likes int
-			Reposts int
-			BlueskyURL string
-			MastodonURL string
-		}
-
 		err = templates.BlogTemplate.Execute(w, BlogView{
 			Blog: &blog,
 			Comments: blueskyPost.Replies,
-			Likes: 10,
-			Reposts: 10,
+			Likes: blueskyPost.Post.LikeCount,
+			Reposts: blueskyPost.Post.RepostCount,
 			BlueskyURL: fmt.Sprintf("https://bsky.app/profile/%s/post/%s", blog.BlueskyActorID, blog.BlueskyPostID),
 			MastodonURL: "#",
 		})

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 2/2] 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>