From 91d8947761f9c3fe7b459cbcedaf6a3e3cbe8a30 Mon Sep 17 00:00:00 2001
From: ClovertaTheTrilobita <cloverta@petalmail.com>
Date: Wed, 25 Mar 2026 10:43:02 +0200
Subject: [PATCH] added comments preview

---
 src/components/Posts/PostItem.astro | 49 ++++++++++++++---
 src/components/Posts/PostList.astro | 84 ++++++++++++++++++++++++++++-
 2 files changed, 124 insertions(+), 9 deletions(-)

diff --git a/src/components/Posts/PostItem.astro b/src/components/Posts/PostItem.astro
index 5f68afd..272b168 100644
--- a/src/components/Posts/PostItem.astro
+++ b/src/components/Posts/PostItem.astro
@@ -7,7 +7,15 @@ const data = Astro.props;
     <div class="post-text">
       <span class="post-title">{data.title}</span>
       <span class="post-description">{data.description}</span>
-      <span class="post-date">{data.date}</span>
+
+      <div class="post-meta-row">
+        <span class="post-date">{data.date}</span>
+
+        <span class="post-stats">
+          <span class="post-stat">💬 {data.commentCount ?? 0}</span>
+          <span class="post-stat">👍 {data.reactionCount ?? 0}</span>
+        </span>
+      </div>
     </div>
 
     <img src={data.img} alt={data.title} class="post-image" />
@@ -53,6 +61,19 @@ const data = Astro.props;
     overflow: hidden;
   }
 
+  .post-description {
+    color: black;
+    font-weight: 400;
+    font-style: italic;
+  }
+
+  .post-meta-row {
+    display: flex;
+    align-items: center;
+    gap: 0.9rem;
+    flex-wrap: wrap;
+  }
+
   .post-date {
     color: gray;
     font-size: 0.95rem;
@@ -60,6 +81,22 @@ const data = Astro.props;
     line-height: 1.6;
   }
 
+  .post-stats {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+    color: #6f8090;
+    font-size: 0.92rem;
+    line-height: 1.6;
+    white-space: nowrap;
+  }
+
+  .post-stat {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
+  }
+
   .post-image {
     width: calc((1.6em * 4) * 16 / 9);
     height: calc(1.6em * 4);
@@ -71,16 +108,14 @@ const data = Astro.props;
     display: block;
   }
 
-  .post-description {
-    color: black;
-    font-weight: 400;
-    font-style: italic;
-  }
-
   :global(.dark) .post-description {
     color: #e6e6e6;
   }
 
+  :global(.dark) .post-stats {
+    color: #aab7c4;
+  }
+
   @media (max-width: 640px) {
     .post-link {
       gap: 0.75rem;
diff --git a/src/components/Posts/PostList.astro b/src/components/Posts/PostList.astro
index f0b0a3e..ce6c22e 100644
--- a/src/components/Posts/PostList.astro
+++ b/src/components/Posts/PostList.astro
@@ -1,11 +1,74 @@
 ---
 import { getCollection } from "astro:content";
 import PostItem from "./PostItem.astro";
-import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
+import { getLangFromUrl } from "@/i18n";
 
 const lang = getLangFromUrl(Astro.url);
-const t = getTranslations(lang);
 const allPosts = await getCollection("blog");
+
+type ReactionGroup = {
+  users?: {
+    totalCount?: number;
+  };
+};
+
+type DiscussionNode = {
+  title: string;
+  comments?: {
+    totalCount?: number;
+  };
+  reactionGroups?: ReactionGroup[];
+};
+
+function normalizePath(path: string) {
+  return path.replace(/^\/+|\/+$/g, "");
+}
+
+async function fetchDiscussionStats(): Promise<DiscussionNode[]> {
+  const token = import.meta.env.GITHUB_TOKEN;
+  if (!token) return [];
+
+  const query = `
+    query($owner: String!, $name: String!, $categoryId: ID!) {
+      repository(owner: $owner, name: $name) {
+        discussions(first: 100, categoryId: $categoryId) {
+          nodes {
+            title
+            comments(first: 0) {
+              totalCount
+            }
+            reactionGroups {
+              users {
+                totalCount
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  const res = await fetch("https://api.github.com/graphql", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      query,
+      variables: {
+        owner: "ClovertaTheTrilobita",
+        name: "SanYeCao-blog",
+        categoryId: "DIC_kwDORvuVpM4C5MDE",
+      },
+    }),
+  });
+
+  const json = await res.json();
+  return (json?.data?.repository?.discussions?.nodes ?? []) as DiscussionNode[];
+}
+
+const discussions = await fetchDiscussionStats();
 ---
 
 <ul>
@@ -15,6 +78,21 @@ const allPosts = await getCollection("blog");
         .toISOString()
         .split("T")[0];
 
+      const pathname = `/${lang}/posts/${post.id}/`;
+
+      const matchedDiscussion = discussions.find((d: DiscussionNode) => {
+        return normalizePath(d.title) === normalizePath(pathname);
+      });
+
+      const reactionCount =
+        matchedDiscussion?.reactionGroups?.reduce(
+          (sum: number, group: ReactionGroup) =>
+            sum + (group.users?.totalCount ?? 0),
+          0,
+        ) ?? 0;
+
+      const commentCount = matchedDiscussion?.comments?.totalCount ?? 0;
+
       return (
         <PostItem
           url={`/${lang}/posts/${post.id}/`}
@@ -22,6 +100,8 @@ const allPosts = await getCollection("blog");
           description={post.data.description}
           date={formattedDate}
           img={post.data.image.url}
+          commentCount={commentCount}
+          reactionCount={reactionCount}
         />
       );
     })