From 785371bb3eccca455e5ce5fccbe9b6e3752a03f6 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Tue, 16 Dec 2025 00:15:04 +0800
Subject: fix(front-end): bug in viewing posts

---
 src/components/json-ld.tsx         | 29 +++++++++++++----------------
 src/components/sections/footer.tsx | 30 ++++++++++--------------------
 src/components/tags/tag-card.tsx   |  9 ++++-----
 3 files changed, 27 insertions(+), 41 deletions(-)

(limited to 'src/components')

diff --git a/src/components/json-ld.tsx b/src/components/json-ld.tsx
index a7cd884..58cb0ba 100644
--- a/src/components/json-ld.tsx
+++ b/src/components/json-ld.tsx
@@ -1,33 +1,30 @@
 import { title as homeTitle } from '@/app/(main)/layout.config';
 import { owner } from '@/app/(main)/layout.config';
 import { baseUrl } from '@/lib/constants';
-import type { Post } from '@/lib/source';
+import type { BlogPost } from '@/lib/payload-posts';
 import type { BlogPosting, BreadcrumbList, Graph } from 'schema-dts';
 
-export const PostJsonLd = ({ page }: { page: Post }) => {
-  if (!page) {
+export const PostJsonLd = ({ post }: { post: BlogPost }) => {
+  if (!post) {
     return null;
   }
 
-  const url = new URL(page.url, baseUrl.href).href;
+  const url = new URL(post.url, baseUrl.href).href;
 
-  const post: BlogPosting = {
+  const blogPosting: BlogPosting = {
     '@type': 'BlogPosting',
-    headline: page.data.title,
-    description: page.data.description,
-    image: new URL(`/og/${page.slugs.join('/')}/image.png`, baseUrl.href).href,
-    datePublished: new Date(page.data.date).toISOString(),
-    dateModified: page.data.lastModified
-      ? new Date(page.data.lastModified).toISOString()
-      : undefined,
+    headline: post.title,
+    description: post.description,
+    image: post.image ? new URL(post.image, baseUrl.href).href : undefined,
+    datePublished: post.date.toISOString(),
+    dateModified: post.updatedAt.toISOString(),
     mainEntityOfPage: {
       '@type': 'WebPage',
       '@id': url,
     },
     author: {
       '@type': 'Person',
-      name: page.data.author,
-      // url: 'https://techwithanirudh.com/',
+      name: post.author,
     },
     publisher: {
       '@type': 'Person',
@@ -54,7 +51,7 @@ export const PostJsonLd = ({ page }: { page: Post }) => {
       {
         '@type': 'ListItem',
         position: 3,
-        name: page.data.title,
+        name: post.title,
         item: url,
       },
     ],
@@ -62,7 +59,7 @@ export const PostJsonLd = ({ page }: { page: Post }) => {
 
   const graph: Graph = {
     '@context': 'https://schema.org',
-    '@graph': [post, breadcrumbList],
+    '@graph': [blogPosting, breadcrumbList],
   };
 
   return (
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
index 3a1b51d..a982810 100644
--- a/src/components/sections/footer.tsx
+++ b/src/components/sections/footer.tsx
@@ -1,18 +1,19 @@
 import { baseOptions, linkItems, postsPerPage } from '@/app/(main)/layout.config';
 import { InlineLink } from '@/components/inline-link';
-import { getSortedByDatePosts, getTags } from '@/lib/source';
+import { getPublishedPosts, getAllTags } from '@/lib/payload-posts';
 import { cn } from '@/lib/utils';
 import { getLinks } from 'fumadocs-ui/layouts/shared';
 import { ActiveLink } from '../active-link';
 
-export function Footer() {
+export async function Footer() {
   const links = getLinks(linkItems, baseOptions.githubUrl);
   const navItems = links.filter((item) =>
     ['nav', 'all'].includes(item.on ?? 'all'),
   );
 
-  const posts = getSortedByDatePosts();
-  const tags = getTags();
+  // 从 Payload 获取文章和标签
+  const { posts } = await getPublishedPosts({ limit: postsPerPage });
+  const tags = await getAllTags();
 
   return (
     <footer className={cn('flex flex-col gap-4')}>
@@ -54,7 +55,7 @@ export function Footer() {
             {posts.slice(0, postsPerPage).map((post, i) => (
               <li key={post.url}>
                 <ActiveLink key={i.toString()} href={post.url}>
-                  {post.data.title}
+                  {post.title}
                 </ActiveLink>
               </li>
             ))}
@@ -65,10 +66,10 @@ export function Footer() {
           <p className='font-medium text-foreground'>Tags</p>
 
           <ul className='flex flex-col gap-3'>
-            {tags.slice(0, postsPerPage).map((name, i) => (
-              <li key={`/tags/${name}`}>
-                <ActiveLink key={i.toString()} href={`/tags/${name}`}>
-                  <span className='capitalize'>{name}</span>
+            {tags.slice(0, postsPerPage).map((item, i) => (
+              <li key={`/tags/${item.tag}`}>
+                <ActiveLink key={i.toString()} href={`/tags/${item.tag}`}>
+                  <span className='capitalize'>{item.tag}</span>
                 </ActiveLink>
               </li>
             ))}
@@ -96,17 +97,6 @@ export function Footer() {
           </ul>
         </div>
       </div>
-      {/* <Design /> */}
     </footer>
   );
 }
-
-function Design() {
-  return (
-    <div className='footer'>
-      <span className='footer-text font-mono'>john•doe</span>
-      <div className='footer-grid' />
-      <div className='footer-gradient' />
-    </div>
-  );
-}
diff --git a/src/components/tags/tag-card.tsx b/src/components/tags/tag-card.tsx
index a71e4c4..447c73e 100644
--- a/src/components/tags/tag-card.tsx
+++ b/src/components/tags/tag-card.tsx
@@ -1,19 +1,18 @@
 import { Icons } from '@/components/icons/icons';
-import { getPostsByTag } from '@/lib/source';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
 
 export const TagCard = ({
   name,
   displayCount = false,
+  count,
   className = '',
 }: {
   name: string;
   displayCount?: boolean;
+  count?: number;
   className?: string;
 }) => {
-  const posts = getPostsByTag(name);
-
   return (
     <Link
       href={`/tags/${name}`}
@@ -27,8 +26,8 @@ export const TagCard = ({
         className='my-auto text-muted-foreground transition-transform group-hover:rotate-12'
       />
       <span className='text-card-foreground'>{name}</span>
-      {displayCount && (
-        <span className='ml-auto text-muted-foreground'>({posts.length})</span>
+      {displayCount && count !== undefined && (
+        <span className='ml-auto text-muted-foreground'>({count})</span>
       )}
     </Link>
   );
-- 
cgit v1.2.3