feat: use post list in tag page

src/app/[locale]/site/[site]/tag/[tag]/page.tsx

@@ -1,6 +1,9 @@
+import { getTranslations } from "next-intl/server"
+
 import { dehydrate, Hydrate } from "@tanstack/react-query"
 
-import { SiteArchives } from "~/components/site/SiteArchives"
+import PostTitle from "~/components/site/PostTitle"
+import SiteTag from "~/components/site/SiteTag"
 import getQueryClient from "~/lib/query-client"
 import { PageVisibilityEnum } from "~/lib/types"
 import { withHrefLang } from "~/lib/with-hreflang"
@@ -16,9 +19,10 @@ export const generateMetadata = withHrefLang<{
   const queryClient = getQueryClient()
 
   const site = await fetchGetSite(params.site, queryClient)
+  const t = await getTranslations()
 
   params.tag = decodeURIComponent(params.tag)
-  const title = `Tag: ${params.tag} - ${
+  const title = `${t("Tag")}: ${params.tag} - ${
     site?.metadata?.content?.name || site?.handle
   }`
 
@@ -44,9 +48,9 @@ export default async function SiteTagPage({
       characterId: site?.characterId,
       type: "post",
       visibility: PageVisibilityEnum.Published,
-      limit: 100,
-      skipExpansion: true,
+      limit: 18,
       tags: [params.tag],
+      sortType: "latest",
     },
     queryClient,
   )
@@ -54,8 +58,14 @@ export default async function SiteTagPage({
   const dehydratedState = dehydrate(queryClient)
 
   return (
-    <Hydrate state={dehydratedState}>
-      <SiteArchives />
-    </Hydrate>
+    <>
+      <PostTitle
+        title={params.tag}
+        icon={<i className="i-mingcute-tag-line mr-[2px]" />}
+      />
+      <Hydrate state={dehydratedState}>
+        <SiteTag handle={params.site} tag={params.tag} />
+      </Hydrate>
+    </>
   )
 }

src/components/site/SiteTag.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { useState } from "react"
+
+import PostList from "~/components/site/PostList"
+import { Tabs, type TabItem } from "~/components/ui/Tabs"
+import { PagesSortTypes, PageVisibilityEnum } from "~/lib/types"
+import { useGetPagesBySiteLite } from "~/queries/page"
+import { useGetSite } from "~/queries/site"
+
+import { Loading } from "../common/Loading"
+
+export default function SiteTag({
+  handle,
+  tag,
+}: {
+  handle: string
+  tag: string
+}) {
+  const site = useGetSite(handle)
+  const [sortType, setSortType] = useState<PagesSortTypes>("latest")
+  const posts = useGetPagesBySiteLite({
+    characterId: site.data?.characterId,
+    type: "post",
+    visibility: PageVisibilityEnum.Published,
+    limit: 18,
+    tags: [tag],
+    sortType: sortType,
+  })
+
+  let tabs: TabItem[] = [
+    {
+      text: "Latest",
+      onClick: () => setSortType("latest"),
+      active: sortType === "latest",
+    },
+    {
+      text: "Hottest",
+      onClick: () => setSortType("hottest"),
+      active: sortType === "hottest",
+    },
+    {
+      text: "Most Commented",
+      onClick: () => setSortType("commented"),
+      active: sortType === "commented",
+    },
+  ]
+
+  return (
+    <>
+      <Tabs items={tabs} className="mb-6" type="rounded" />
+      {!posts.data?.pages?.length && posts.isLoading && <Loading />}
+      <PostList posts={posts} />
+    </>
+  )
+}

src/messages/zh.json

@@ -190,6 +190,7 @@
   "This post will be accessible at": "此文章将可通过以下链接访问",
   "This page will be accessible at": "此页面将可通过以下链接访问",
   "Tags": "标签",
+  "Tag": "标签",
   "Separate multiple tags with English commas": "多个标签请用英文逗号分隔",
   "Excerpt": "摘要",
   "Leave it blank to use auto-generated excerpt": "留空则使用自动生成的摘要",