SanYeCao-blog/src/components/Posts/PostList.astro

---
import { getCollection } from "astro:content";
import PostItem from "./PostItem.astro";
import { getLangFromUrl } from "@/i18n";

const token = import.meta.env.GITHUB_TOKEN;
const owner = import.meta.env.GISCUS_REPO_OWNER;
const name = import.meta.env.GISCUS_REPO_NAME;
const categoryId = import.meta.env.GISCUS_CATEGORY_ID;
const lang = getLangFromUrl(Astro.url);
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: owner,
        name: name,
        categoryId: categoryId,
      },
    }),
  });

  const json = await res.json();
  return (json?.data?.repository?.discussions?.nodes ?? []) as DiscussionNode[];
}

const discussions = await fetchDiscussionStats();

const sortedPosts = [...allPosts].sort(
  (a, b) =>
    new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime(),
);

const latestPosts = sortedPosts.slice(0, 5);
---

<ul>
  {
    latestPosts.map((post: any) => {
      const formattedDate = new Date(post.data.pubDate)
        .toISOString()
        .split("T")[0];

      const pathname = `/${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}/`}
          title={post.data.title}
          description={post.data.description}
          date={formattedDate}
          img={post.data.image.url}
          commentCount={commentCount}
          reactionCount={reactionCount}
        />
      );
    })
  }
</ul>

<div class="more-link-wrap">
  <a href={`/${lang}/timeline`} class="more-link">
    {lang === "zh" ? ">>>更多" : ">>>More"}
  </a>
</div>

<style>
  ul {
    margin: 0;
    padding-left: 0;
  }

  .more-link-wrap {
    margin-top: 1rem;
    text-align: right;
  }

  .more-link {
    color: #6f8090;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.14rem;
  }

  .more-link:hover {
    text-decoration: underline;
  }

  :global(.dark) .more-link {
    color: #aab7c4;
  }
</style>