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.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,
+			Likes: blueskyPost.Post.LikeCount,
-			Reposts: 10,
+			Reposts: blueskyPost.Post.RepostCount,
 			BlueskyURL: fmt.Sprintf("https://bsky.app/profile/%s/post/%s", blog.BlueskyActorID, blog.BlueskyPostID),
 			MastodonURL: "#",
 		})

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.LikeCount}} like{{if ne .Post.LikeCount 1}}s{{end}}</span>
-                <!-- <span>{{.Post.RepostCount}} reposts</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>