From 785371bb3eccca455e5ce5fccbe9b6e3752a03f6 Mon Sep 17 00:00:00 2001 From: Bertrand Yuan Date: Tue, 16 Dec 2025 00:15:04 +0800 Subject: fix(front-end): bug in viewing posts --- src/app/(main)/(home)/_components/posts.tsx | 58 +------- src/app/(main)/(home)/actions.ts | 15 +-- src/app/(main)/(home)/page.tsx | 9 +- src/app/(main)/(home)/posts/[slug]/page.tsx | 185 ++++---------------------- src/app/(main)/(home)/posts/page.tsx | 84 ++---------- src/app/(main)/(home)/tags/[...slug]/page.tsx | 80 +++++------ src/app/(main)/(home)/tags/page.tsx | 13 +- src/app/(main)/api/search/route.ts | 27 ++-- src/app/(main)/og/[...slug]/route.tsx | 48 ++++--- src/app/(main)/rss.xml/route.ts | 36 ++--- 10 files changed, 165 insertions(+), 390 deletions(-) (limited to 'src/app/(main)') diff --git a/src/app/(main)/(home)/_components/posts.tsx b/src/app/(main)/(home)/_components/posts.tsx index 00ada0c..0eacce1 100644 --- a/src/app/(main)/(home)/_components/posts.tsx +++ b/src/app/(main)/(home)/_components/posts.tsx @@ -2,73 +2,25 @@ import { Icons } from '@/components/icons/icons'; import { PostCard } from '@/components/posts/post-card'; import { Section } from '@/components/section'; import { buttonVariants } from '@/components/ui/button'; -import type { Page } from '@/lib/source'; import type { BlogPost } from '@/lib/payload-posts'; import Link from 'next/link'; -// 统一的文章数据格式 -interface UnifiedPost { - title: string; - description: string; - image?: string | null; - url: string; - date: string; - author: string; - tags?: string[]; -} - -// 将 MDX Page 转换为统一格式 -function transformMdxPost(post: Page): UnifiedPost { - return { - title: post.data.title, - description: post.data.description ?? '', - image: post.data.image, - url: post.url, - date: new Date(post.data.date).toDateString(), - author: post.data.author, - tags: post.data.tags, - }; -} - -// 将 Payload BlogPost 转换为统一格式 -function transformPayloadPost(post: BlogPost): UnifiedPost { - return { - title: post.title, - description: post.description, - image: post.image, - url: post.url, - date: post.date.toDateString(), - author: post.author, - tags: post.tags, - }; -} - interface PostsProps { - mdxPosts?: Page[]; - payloadPosts?: BlogPost[]; + posts: BlogPost[]; } -export default function Posts({ mdxPosts = [], payloadPosts = [] }: PostsProps) { - // 转换并合并所有文章 - const allPosts: UnifiedPost[] = [ - ...mdxPosts.map(transformMdxPost), - ...payloadPosts.map(transformPayloadPost), - ]; - - // 按日期排序 - allPosts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); - +export default function Posts({ posts }: PostsProps) { return (
- {allPosts.map((post) => ( + {posts.map((post) => ( diff --git a/src/app/(main)/(home)/actions.ts b/src/app/(main)/(home)/actions.ts index fdb16ca..5b0c456 100644 --- a/src/app/(main)/(home)/actions.ts +++ b/src/app/(main)/(home)/actions.ts @@ -1,8 +1,7 @@ 'use server'; -import { getContact, sendWelcomeEmail, updateContact } from '@/lib/resend'; +import { getContact, updateContact } from '@/lib/resend'; import { ActionError, actionClient } from '@/lib/safe-action'; -import { getSortedByDatePosts } from '@/lib/source'; import { NewsletterSchema } from '@/lib/validators'; import { getSession } from '@/server/auth'; import { Resend } from 'resend'; @@ -59,12 +58,12 @@ export const subscribeUser = actionClient ); } - const posts = getSortedByDatePosts(); - await sendWelcomeEmail({ - posts, - to: email, - firstName: firstName || 'there', - }); + // const posts = getSortedByDatePosts(); + // await sendWelcomeEmail({ + // posts, + // to: email, + // firstName: firstName || 'there', + // }); return { success: true, diff --git a/src/app/(main)/(home)/page.tsx b/src/app/(main)/(home)/page.tsx index a94193c..0718da9 100644 --- a/src/app/(main)/(home)/page.tsx +++ b/src/app/(main)/(home)/page.tsx @@ -3,16 +3,11 @@ import Posts from '@/app/(main)/(home)/_components/posts'; import { Icons } from '@/components/icons/icons'; import { Section } from '@/components/section'; import Separator from '@/components/separator'; -import { getSortedByDatePosts } from '@/lib/source'; import { getPublishedPosts } from '@/lib/payload-posts'; import { CTA } from './_components/call-to-action'; export default async function Home() { - // 获取 MDX 文章（保留原有功能） - // const mdxPosts = getSortedByDatePosts().slice(0, 3); - - // 获取 Payload CMS 文章 - const { posts: payloadPosts } = await getPublishedPosts({ limit: 3 }); + const { posts } = await getPublishedPosts({ limit: 3 }); return ( <> @@ -26,7 +21,7 @@ export default async function Home() {
- + diff --git a/src/app/(main)/(home)/posts/[slug]/page.tsx b/src/app/(main)/(home)/posts/[slug]/page.tsx index fa096b6..5960f06 100644 --- a/src/app/(main)/(home)/posts/[slug]/page.tsx +++ b/src/app/(main)/(home)/posts/[slug]/page.tsx @@ -7,55 +7,18 @@ import { RichText } from '@/components/rich-text'; import { Section } from '@/components/section'; import { TagCard } from '@/components/tags/tag-card'; import { createMetadata } from '@/lib/metadata'; -import { metadataImage } from '@/lib/metadata-image'; import { getPostBySlug, getAllPostSlugs, type BlogPost, } from '@/lib/payload-posts'; -import { type Page as MDXPage, getPost, getPosts } from '@/lib/source'; import { cn } from '@/lib/utils'; -import { File, Files, Folder } from 'fumadocs-ui/components/files'; -import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; -import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; -import defaultMdxComponents from 'fumadocs-ui/mdx'; import type { Metadata } from 'next'; import { notFound } from 'next/navigation'; import Balancer from 'react-wrap-balancer'; import { description as homeDescription } from '@/app/(main)/layout.config'; -// MDX 文章 Header -function MdxHeader(props: { page: MDXPage; tags?: string[] }) { - const { page, tags } = props; - - return ( -
-
-
-

- {page.data.title} -

-

- {page.data.description} -

-
-
- {tags?.map((tag) => ( - - ))} -
-
-
- ); -} - -// Payload 文章 Header -function PayloadHeader(props: { post: BlogPost }) { +function PostHeader(props: { post: BlogPost }) { const { post } = props; return ( @@ -84,70 +47,10 @@ function PayloadHeader(props: { post: BlogPost }) { ); } -// MDX 文章内容 -function MdxContent({ page }: { page: MDXPage }) { - const { body: Mdx, toc, tags, lastModified } = page.data; - const lastUpdate = lastModified ? new Date(lastModified) : undefined; - - return ( - <> - - -
-
-
- -
- -
- -
-
-
-

Written by

-

{page.data.author}

-
-
-

Created At

-

- {new Date(page.data.date ?? page.file.name).toDateString()} -

-
- {lastUpdate && ( -
-

Updated At

-

{lastUpdate.toDateString()}

-
- )} - -
-
-
- - - ); -} - -// Payload 文章内容 -function PayloadContent({ post }: { post: BlogPost }) { +function PostContent({ post }: { post: BlogPost }) { return ( <> - +
@@ -179,6 +82,7 @@ function PayloadContent({ post }: { post: BlogPost }) {
+ ); } @@ -187,80 +91,39 @@ export default async function Page(props: { params: Promise<{ slug: string }>; }) { const params = await props.params; + const post = await getPostBySlug(params.slug); - // 先尝试获取 MDX 文章 - const mdxPage = getPost([params.slug]); - - if (mdxPage) { - return ; - } - - // 再尝试获取 Payload 文章 - const payloadPost = await getPostBySlug(params.slug); - - if (payloadPost) { - return ; + if (!post) { + notFound(); } - // 都找不到则 404 - notFound(); + return ; } export async function generateMetadata(props: { params: Promise<{ slug: string }>; }): Promise { const params = await props.params; + const post = await getPostBySlug(params.slug); - // 先尝试 MDX 文章 - const mdxPage = getPost([params.slug]); - - if (mdxPage) { - const title = mdxPage.data.title; - const description = mdxPage.data.description ?? homeDescription; - - return createMetadata( - metadataImage.withImage(mdxPage.slugs, { - title, - description, - openGraph: { - url: `/posts/${mdxPage.slugs.join('/')}`, - }, - alternates: { - canonical: mdxPage.url, - }, - }) - ); + if (!post) { + return {}; } - // 再尝试 Payload 文章 - const payloadPost = await getPostBySlug(params.slug); - - if (payloadPost) { - return createMetadata({ - title: payloadPost.title, - description: payloadPost.description || homeDescription, - openGraph: { - url: `/posts/${payloadPost.slug}`, - }, - alternates: { - canonical: `/posts/${payloadPost.slug}`, - }, - }); - } - - return {}; + return createMetadata({ + title: post.title, + description: post.description || homeDescription, + openGraph: { + url: `/posts/${post.slug}`, + images: post.image ? [{ url: post.image }] : undefined, + }, + alternates: { + canonical: `/posts/${post.slug}`, + }, + }); } export async function generateStaticParams(): Promise<{ slug: string }[]> { - // MDX 文章的 slugs - const mdxSlugs = getPosts() - .map((page) => page.slugs[0]) - .filter((slug): slug is string => !!slug) - .map((slug) => ({ slug })); - - // Payload 文章的 slugs - const payloadSlugs = await getAllPostSlugs(); - const payloadParams = payloadSlugs.map((slug) => ({ slug })); - - return [...mdxSlugs, ...payloadParams]; + const slugs = await getAllPostSlugs(); + return slugs.map((slug) => ({ slug })); } diff --git a/src/app/(main)/(home)/posts/page.tsx b/src/app/(main)/(home)/posts/page.tsx index 00e51c4..40ebcda 100644 --- a/src/app/(main)/(home)/posts/page.tsx +++ b/src/app/(main)/(home)/posts/page.tsx @@ -3,70 +3,10 @@ import { NumberedPagination } from '@/components/numbered-pagination'; import { PostCard } from '@/components/posts/post-card'; import { Section } from '@/components/section'; import { createMetadata } from '@/lib/metadata'; -import { getPublishedPosts, type BlogPost } from '@/lib/payload-posts'; -import { getSortedByDatePosts, type Page } from '@/lib/source'; +import { getPublishedPosts } from '@/lib/payload-posts'; import type { Metadata, ResolvingMetadata } from 'next'; import { notFound, redirect } from 'next/navigation'; -// 统一的文章类型 -interface UnifiedPost { - id: string; - title: string; - description: string; - image?: string; - url: string; - date: Date; - author: string; - tags?: string[]; - source: 'mdx' | 'payload'; -} - -// 将 MDX 文章转换为统一格式 -function transformMdxPost(post: Page): UnifiedPost { - return { - id: `mdx-${post.url}`, - title: post.data.title, - description: post.data.description ?? '', - image: post.data.image, - url: post.url, - date: new Date(post.data.date), - author: post.data.author, - tags: post.data.tags, - source: 'mdx', - }; -} - -// 将 Payload 文章转换为统一格式 -function transformPayloadPost(post: BlogPost): UnifiedPost { - return { - id: `payload-${post.id}`, - title: post.title, - description: post.description, - image: post.image, - url: post.url, - date: post.date, - author: post.author, - tags: post.tags, - source: 'payload', - }; -} - -// 获取所有文章（合并 MDX 和 Payload） -async function getAllPosts(): Promise { - // 获取 MDX 文章 - const mdxPosts = getSortedByDatePosts().map(transformMdxPost); - - // 获取 Payload 文章（获取全部，用于分页计算） - const { posts: payloadPosts } = await getPublishedPosts({ limit: 1000 }); - const transformedPayloadPosts = payloadPosts.map(transformPayloadPost); - - // 合并并按日期排序 - const allPosts = [...mdxPosts, ...transformedPayloadPosts]; - allPosts.sort((a, b) => b.date.getTime() - a.date.getTime()); - - return allPosts; -} - const CurrentPostsCount = ({ startIndex, endIndex, @@ -115,11 +55,6 @@ export default async function Page(props: { }) { const searchParams = await props.searchParams; - // 获取所有文章 - const allPosts = await getAllPosts(); - const totalPosts = allPosts.length; - const pageCount = Math.ceil(totalPosts / postsPerPage); - const pageIndex = searchParams.page ? Number.parseInt( Array.isArray(searchParams.page) @@ -129,21 +64,26 @@ export default async function Page(props: { ) - 1 : 0; - if (pageIndex < 0 || (pageCount > 0 && pageIndex >= pageCount)) notFound(); + // 获取文章（带分页） + const { posts, totalDocs, totalPages } = await getPublishedPosts({ + limit: postsPerPage, + page: pageIndex + 1, + }); + + if (pageIndex < 0 || (totalPages > 0 && pageIndex >= totalPages)) notFound(); const startIndex = pageIndex * postsPerPage; - const endIndex = startIndex + postsPerPage; - const posts = allPosts.slice(startIndex, endIndex); + const endIndex = startIndex + posts.length; return ( <>

- All {totalPosts} Posts{' '} + All {totalDocs} Posts{' '}

@@ -166,7 +106,7 @@ export default async function Page(props: { })} - {pageCount > 1 && } + {totalPages > 1 && } ); } diff --git a/src/app/(main)/(home)/tags/[...slug]/page.tsx b/src/app/(main)/(home)/tags/[...slug]/page.tsx index c1ce96b..71615cb 100644 --- a/src/app/(main)/(home)/tags/[...slug]/page.tsx +++ b/src/app/(main)/(home)/tags/[...slug]/page.tsx @@ -5,28 +5,21 @@ import { NumberedPagination } from '@/components/numbered-pagination'; import { PostCard } from '@/components/posts/post-card'; import { Section } from '@/components/section'; import { createMetadata } from '@/lib/metadata'; -import { getPostsByTag, getTags } from '@/lib/source'; +import { getPostsByTag, getAllTags } from '@/lib/payload-posts'; import type { Metadata, ResolvingMetadata } from 'next'; import { notFound, redirect } from 'next/navigation'; -export const dynamicParams = false; - -const totalPosts = (title: string) => getPostsByTag(title).length; -const pageCount = (title: string) => - Math.ceil(totalPosts(title) / postsPerPage); - const CurrentPostsCount = ({ startIndex, endIndex, - tag, + totalPosts, }: { startIndex: number; endIndex: number; - tag: string; + totalPosts: number; }) => { - const total = totalPosts(tag); const start = startIndex + 1; - const end = endIndex < total ? endIndex : total; + const end = endIndex < totalPosts ? endIndex : totalPosts; if (start === end) return ({start}); return ( @@ -39,10 +32,12 @@ const Header = ({ tag, startIndex, endIndex, + totalPosts, }: { tag: string; startIndex: number; endIndex: number; + totalPosts: number; }) => (
@@ -55,14 +50,14 @@ const Header = ({
); -const Pagination = ({ pageIndex, tag }: { pageIndex: number; tag: string }) => { +const Pagination = ({ pageIndex, tag, totalPages }: { pageIndex: number; tag: string; totalPages: number }) => { const handlePageChange = async (page: number) => { 'use server'; redirect(`/tags/${tag}?page=${page}`); @@ -72,7 +67,7 @@ const Pagination = ({ pageIndex, tag }: { pageIndex: number; tag: string }) => {
@@ -91,54 +86,56 @@ export default async function Page(props: { if (!tag) return notFound(); const pageIndex = searchParams.page - ? Number.parseInt(searchParams.page[0] ?? '', 10) - 1 + ? Number.parseInt( + Array.isArray(searchParams.page) + ? searchParams.page[0] ?? '' + : searchParams.page, + 10 + ) - 1 : 0; - if (pageIndex < 0 || pageIndex >= pageCount(tag)) notFound(); + const { posts, totalDocs, totalPages } = await getPostsByTag(tag, { + limit: postsPerPage, + page: pageIndex + 1, + }); + + if (pageIndex < 0 || (totalPages > 0 && pageIndex >= totalPages)) notFound(); const startIndex = pageIndex * postsPerPage; - const endIndex = startIndex + postsPerPage; - const posts = getPostsByTag(tag).slice(startIndex, endIndex); + const endIndex = startIndex + posts.length; return ( <> -
+
{posts.map((post) => { - const date = new Date(post.data.date).toDateString(); + const date = post.date.toDateString(); return ( ); })}
- {pageCount(tag) > 1 && } + {totalPages > 1 && } ); } -export const generateStaticParams = () => { - const tags = getTags(); - return [ - ...tags.map((tag) => ({ slug: [tag] })), - ...tags.flatMap((tag) => - Array.from({ length: pageCount(tag) }, (_, index) => ({ - slug: [tag, (index + 1).toString()], - })), - ), - ]; -}; +export async function generateStaticParams() { + const tags = await getAllTags(); + return tags.map((item) => ({ slug: [item.tag] })); +} type Props = { params: Promise<{ slug: string[] }>; @@ -154,7 +151,12 @@ export async function generateMetadata( const tag = params.slug[0]; const pageIndex = searchParams.page - ? Number.parseInt(searchParams.page.toString(), 10) + ? Number.parseInt( + Array.isArray(searchParams.page) + ? searchParams.page[0] ?? '' + : searchParams.page, + 10 + ) : 1; const isFirstPage = pageIndex === 1 || !searchParams.page; diff --git a/src/app/(main)/(home)/tags/page.tsx b/src/app/(main)/(home)/tags/page.tsx index 9138fde..6db13fc 100644 --- a/src/app/(main)/(home)/tags/page.tsx +++ b/src/app/(main)/(home)/tags/page.tsx @@ -2,12 +2,12 @@ import { title as homeTitle } from '@/app/(main)/layout.config'; import { Section } from '@/components/section'; import { TagCard } from '@/components/tags/tag-card'; import { createMetadata } from '@/lib/metadata'; -import { getTags } from '@/lib/source'; +import { getAllTags } from '@/lib/payload-posts'; import { cn } from '@/lib/utils'; import type { Metadata } from 'next'; -export default function Page() { - const tags = getTags(); +export default async function Page() { + const tags = await getAllTags(); return ( <> @@ -18,11 +18,12 @@ export default function Page() {
- {tags.map((tag, index) => ( + {tags.map((item, index) => ( ({ - title: page.data.title, - structuredData: page.data.structuredData, - id: page.url, - url: page.url, - })), -}); +// 动态生成搜索索引 +export async function GET(request: Request) { + const { posts } = await getPublishedPosts({ limit: 1000 }); + + const indexes = posts.map((post) => ({ + title: post.title, + description: post.description, + id: post.url, + url: post.url, + })); + + const searchAPI = createSearchAPI('advanced', { + indexes, + }); + + return searchAPI.GET(request); +} diff --git a/src/app/(main)/og/[...slug]/route.tsx b/src/app/(main)/og/[...slug]/route.tsx index d713923..77ae7f8 100644 --- a/src/app/(main)/og/[...slug]/route.tsx +++ b/src/app/(main)/og/[...slug]/route.tsx @@ -1,6 +1,7 @@ import { generateOGImage } from '@/app/(main)/og/[...slug]/og'; -import { metadataImage } from '@/lib/metadata-image'; +import { getPostBySlug, getAllPostSlugs } from '@/lib/payload-posts'; import type { ImageResponse } from 'next/og'; +import { notFound } from 'next/navigation'; async function loadAssets(): Promise< { name: string; data: Buffer; weight: 400 | 600; style: 'normal' }[] @@ -39,20 +40,33 @@ async function loadAssets(): Promise< ]; } -export const GET = metadataImage.createAPI( - async (page): Promise => { - const [fonts] = await Promise.all([loadAssets()]); - - return generateOGImage({ - title: page.data.title, - description: page.data.description, - fonts, - }); - }, -); - -export function generateStaticParams(): { - slug: string[]; -}[] { - return metadataImage.generateParams(); +export async function GET( + request: Request, + { params }: { params: Promise<{ slug: string[] }> } +): Promise { + const { slug } = await params; + const postSlug = slug[0]; + + if (!postSlug) { + notFound(); + } + + const post = await getPostBySlug(postSlug); + + if (!post) { + notFound(); + } + + const fonts = await loadAssets(); + + return generateOGImage({ + title: post.title, + description: post.description, + fonts, + }); +} + +export async function generateStaticParams(): Promise<{ slug: string[] }[]> { + const slugs = await getAllPostSlugs(); + return slugs.map((slug) => ({ slug: [slug, 'image.png'] })); } diff --git a/src/app/(main)/rss.xml/route.ts b/src/app/(main)/rss.xml/route.ts index ee06a40..3507948 100644 --- a/src/app/(main)/rss.xml/route.ts +++ b/src/app/(main)/rss.xml/route.ts @@ -1,10 +1,10 @@ import { description, title } from '@/app/(main)/layout.config'; import { owner } from '@/app/(main)/layout.config'; import { baseUrl } from '@/lib/constants'; -import { getPosts } from '@/lib/source'; +import { getPublishedPosts } from '@/lib/payload-posts'; import { Feed } from 'feed'; -export const dynamic = 'force-static'; +export const dynamic = 'force-dynamic'; const escapeForXML = (str: string) => { return str @@ -15,8 +15,8 @@ const escapeForXML = (str: string) => { .replace(/'/g, '''); }; -export const GET = () => { - const feed = createFeed(); +export const GET = async () => { + const feed = await createFeed(); return new Response(feed.atom1(), { headers: { @@ -25,7 +25,7 @@ export const GET = () => { }); }; -function createFeed(): Feed { +async function createFeed(): Promise { const feed = new Feed({ title, description, @@ -39,24 +39,24 @@ function createFeed(): Feed { updated: new Date(), }); - const posts = getPosts(); + const { posts } = await getPublishedPosts({ limit: 1000 }); + for (const post of posts) { feed.addItem({ - title: post.data.title, - description: post.data.description, + title: post.title, + description: post.description, link: new URL(post.url, baseUrl).href, - image: { - title: post.data.title, - type: 'image/png', - url: escapeForXML( - new URL(`/og/${post.slugs.join('/')}/image.png`, baseUrl.href).href, - ), - }, - date: post.data.date, + image: post.image + ? { + title: post.title, + type: 'image/png', + url: escapeForXML(new URL(post.image, baseUrl.href).href), + } + : undefined, + date: post.date, author: [ { - name: post.data.author, - // link: new URL('/about', baseUrl).href, + name: post.author, }, ], }); -- cgit v1.2.3