From 3366fc6f09ae9e5031f82f753af2688010a3f3b5 Mon Sep 17 00:00:00 2001
From: Tyler Mercer <acct@tylermercer.net>
Date: Mon, 3 Mar 2025 21:00:51 -0700
Subject: [PATCH] Fix pluralization of 'N comments' on LinkCard and Post layout

Also deleted vestigial getCommentCount
---
 src/components/CommentsCount.astro | 16 ++++++++++++++++
 src/components/LinkCard.astro      |  6 ++----
 src/layouts/Post.astro             |  6 +++---
 src/utils/getCommentCount.ts       | 26 --------------------------
 4 files changed, 21 insertions(+), 33 deletions(-)
 create mode 100644 src/components/CommentsCount.astro
 delete mode 100644 src/utils/getCommentCount.ts

diff --git a/src/components/CommentsCount.astro b/src/components/CommentsCount.astro
new file mode 100644
index 00000000..afbf7767
--- /dev/null
+++ b/src/components/CommentsCount.astro
@@ -0,0 +1,16 @@
+---
+import getCommentCount from "lib/utils/getJamCommentsCommentCount";
+
+export interface Props {
+    pathname?: string;
+}
+
+const commentCount = getCommentCount(Astro.props.pathname ?? Astro.url.pathname);
+---
+{
+    commentCount > 0
+      ? commentCount === 1
+        ? "1 comment"
+        : `${commentCount} comments`
+      : "No comments yet"
+  }
\ No newline at end of file
diff --git a/src/components/LinkCard.astro b/src/components/LinkCard.astro
index 0628294b..2a0e1d50 100644
--- a/src/components/LinkCard.astro
+++ b/src/components/LinkCard.astro
@@ -3,7 +3,7 @@ import getLinkDate from "@utils/getLinkDate";
 import type { CollectionEntry } from "astro:content";
 import formatPostDate from "../utils/formatPostDate";
 import getLinkSlug from "@utils/getLinkSlug";
-import getCommentCount from "lib/utils/getJamCommentsCommentCount";
+import CommentsCount from "./CommentsCount.astro";
 
 export type Props = {
     link: CollectionEntry<"links">;
@@ -33,9 +33,7 @@ const permalink = `/links/${getLinkSlug(l)}`;
                 {formatPostDate(getLinkDate(l.slug))}
             </time>
         </a> &middot;{" "}
-        <a href={permalink + "#comments"}>
-            {getCommentCount(permalink)} comments
-        </a>
+        <a href={permalink + "#comments"}><CommentsCount pathname={permalink} /></a>
     </p>
 </article>
 
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
index 307b3dde..7653d101 100644
--- a/src/layouts/Post.astro
+++ b/src/layouts/Post.astro
@@ -10,7 +10,7 @@ import countWords from "@utils/countWords";
 import formatPostDate from "@utils/formatPostDate";
 import getPostDate from "@utils/getPostDate";
 import type { WithNextAndPrev } from "lib/utils/toWithNextAndPrev";
-import getCommentCount from "@utils/getCommentCount";
+import CommentsCount from "@components/CommentsCount.astro";
 
 export type Props = {
   post: WithNextAndPrev<CollectionEntry<"posts">>;
@@ -68,7 +68,7 @@ const ogImagePath = `/posts/${post.slug}`;
       }
       <span> &mdash;</span>
       {wordCount} words &mdash; {readingTime} min read{" "}
-      <span> &mdash; <a href="#comments">{getCommentCount(Astro.url.pathname)} comments</a></span>
+      <span> &mdash; <a href="#comments"><CommentsCount /></a></span>
     </p>
     <div class:list={{ "article-content": true, "drop-caps": dropCaps }}>
       <slot />
@@ -76,7 +76,7 @@ const ogImagePath = `/posts/${post.slug}`;
         <MungedEmail label="Reply via email" subject={post.data.title} />
         <ShareLinks url={url} title={post.data.title} />
       </div> -->
-      <Comments/>
+      <Comments />
     </div>
   </div>
   <NextPrevLinks previous={previousLink} next={nextLink} labelLinks />
diff --git a/src/utils/getCommentCount.ts b/src/utils/getCommentCount.ts
deleted file mode 100644
index 097aa113..00000000
--- a/src/utils/getCommentCount.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import trimTrailingSlash from "./trimTrailingSlash";
-
-// @ts-expect-error
-const commentHtmlMap = globalThis.jamCommentsStore as Map<string, string>;
-
-const commentCountMap = new Map<string, number>();
-
-export default function getCommentCount(slug: string) {
-    if (commentCountMap.has(slug)) return commentCountMap.get(slug)!;
-
-    // commentHtmlMap contains the HTML from JamComments, which contains the comment count
-    // as a data attribute. We extract it using a simple regex.
-    const comments = commentHtmlMap.get(trimTrailingSlash(slug)) ?? 'data-jam-comments-count="0"';
-
-    const match = comments.match(/data-jam-comments-count="(\d+)"/);
-
-    if (match) {
-        const count = parseInt(match[1]!, 10);
-        commentCountMap.set(slug, count);
-        return count;
-    } else {
-        // The commentHtmlMap contains HTML for the slug, but that HTML
-        // unexpectedly doesn't contain a comment count.
-        throw new Error(`Comment count not found for slug: ${slug}`);
-    }
-}
\ No newline at end of file