From 02ae938c238c9d18448d17a8ec92c0edd8c17463 Mon Sep 17 00:00:00 2001 From: Bertrand Yuan Date: Tue, 16 Dec 2025 00:12:49 +0800 Subject: feat(back-end): introduce payload Payload is the next.js Headless CMS and App Framework, I would like to pick it up and modify it as it is MIT licensed. Many features in Payload is not applicable for our project. So, I modify it so that it is light and clear. --- src/app/(home)/posts/[slug]/page.client.tsx | 57 ----------- src/app/(home)/posts/[slug]/page.tsx | 145 ---------------------------- src/app/(home)/posts/page.tsx | 133 ------------------------- 3 files changed, 335 deletions(-) delete mode 100644 src/app/(home)/posts/[slug]/page.client.tsx delete mode 100644 src/app/(home)/posts/[slug]/page.tsx delete mode 100644 src/app/(home)/posts/page.tsx (limited to 'src/app/(home)/posts') diff --git a/src/app/(home)/posts/[slug]/page.client.tsx b/src/app/(home)/posts/[slug]/page.client.tsx deleted file mode 100644 index 7a97f56..0000000 --- a/src/app/(home)/posts/[slug]/page.client.tsx +++ /dev/null @@ -1,57 +0,0 @@ -'use client'; -import { - UploadIcon as ShareIcon, - type UploadIconHandle as ShareIconHandle, -} from '@/components/icons/animated/upload'; -import { Icons } from '@/components/icons/icons'; -import { Button } from '@/components/ui/button'; -import { cn } from '@/lib/utils'; -import { Comments } from '@fuma-comment/react'; -import { redirect } from 'next/navigation'; -import { useRef } from 'react'; -import { toast } from 'sonner'; -import { useCopyToClipboard } from 'usehooks-ts'; - -export function Share({ url }: { url: string }): React.ReactElement { - const iconRef = useRef(null); - const [_, copyToClipboard] = useCopyToClipboard(); - - const onClick = async (): Promise => { - await copyToClipboard(`${window.location.origin}${url}`); - toast.success('Copied to clipboard!', { - icon: , - description: 'The post link has been copied to your clipboard.', - }); - }; - - return ( - - ); -} - -export function PostComments({ - slug, - className, -}: { slug: string; className?: string }) { - return ( - { - redirect('/login'); - }, - }} - /> - ); -} diff --git a/src/app/(home)/posts/[slug]/page.tsx b/src/app/(home)/posts/[slug]/page.tsx deleted file mode 100644 index 15a6bfd..0000000 --- a/src/app/(home)/posts/[slug]/page.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { PostComments, Share } from '@/app/(home)/posts/[slug]/page.client'; -import { PostJsonLd } from '@/components/json-ld'; -import { Section } from '@/components/section'; -import { TagCard } from '@/components/tags/tag-card'; -import { createMetadata } from '@/lib/metadata'; -import { metadataImage } from '@/lib/metadata-image'; -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 'src/app/layout.config'; - -function Header(props: { page: MDXPage; tags?: string[] }) { - const { page, tags } = props; - - return ( -
-
-
-

- {page.data.title} -

-

- {page.data.description} -

-
-
- {tags?.map((tag) => ( - - ))} -
-
-
- ); -} - -export default async function Page(props: { - params: Promise<{ slug: string }>; -}) { - const params = await props.params; - const page = getPost([params.slug]); - - if (!page) notFound(); - 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()}

-
- )} - -
-
-
- - - ); -} - -export async function generateMetadata(props: { - params: Promise<{ slug: string }>; -}): Promise { - const params = await props.params; - const page = getPost([params.slug]); - - if (!page) notFound(); - - const title = page.data.title; - const description = page.data.description ?? homeDescription; - - return createMetadata( - metadataImage.withImage(page.slugs, { - title, - description, - openGraph: { - url: `/posts/${page.slugs.join('/')}`, - }, - alternates: { - canonical: page.url, - }, - }), - ); -} - -export function generateStaticParams(): { slug: string | undefined }[] { - return getPosts().map((page) => ({ - slug: page.slugs[0], - })); -} diff --git a/src/app/(home)/posts/page.tsx b/src/app/(home)/posts/page.tsx deleted file mode 100644 index fd0f912..0000000 --- a/src/app/(home)/posts/page.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { postsPerPage } from '@/app/layout.config'; -import { NumberedPagination } from '@/components/numbered-pagination'; -import { PostCard } from '@/components/posts/post-card'; -import { Section } from '@/components/section'; -import { createMetadata } from '@/lib/metadata'; -import { getSortedByDatePosts } from '@/lib/source'; -import type { Metadata, ResolvingMetadata } from 'next'; -import { notFound, redirect } from 'next/navigation'; - -export const dynamicParams = false; - -const totalPosts = getSortedByDatePosts().length; -const pageCount = Math.ceil(totalPosts / postsPerPage); - -const CurrentPostsCount = ({ - startIndex, - endIndex, -}: { - startIndex: number; - endIndex: number; -}) => { - const start = startIndex + 1; - const end = endIndex < totalPosts ? endIndex : totalPosts; - if (start === end) return ({start}); - return ( - - ({start}-{end}) - - ); -}; - -const Pagination = ({ pageIndex }: { pageIndex: number }) => { - const handlePageChange = async (page: number) => { - 'use server'; - redirect(`/posts?page=${page}`); - }; - - return ( -
- -
- ); -}; - -export default async function Page(props: { - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; -}) { - const searchParams = await props.searchParams; - const pageIndex = searchParams.page - ? Number.parseInt(searchParams.page[0] ?? '', 10) - 1 - : 0; - if (pageIndex < 0 || pageIndex >= pageCount) notFound(); - - const startIndex = pageIndex * postsPerPage; - const endIndex = startIndex + postsPerPage; - const posts = getSortedByDatePosts().slice(startIndex, endIndex); - - return ( - <> -
-

- All {totalPosts} Posts{' '} - -

-
-
-
- {posts.map((post) => { - const date = new Date(post.data.date).toDateString(); - return ( - - ); - })} -
-
- {pageCount > 1 && } - - ); -} - -export const generateStaticParams = () => { - const slugs = Array.from({ length: pageCount }, (_, index) => ({ - slug: [(index + 1).toString()], - })); - - return [{ slug: [] }, ...slugs]; -}; - -type Props = { - params: Promise<{ slug: string[] }>; - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; -}; - -export async function generateMetadata( - props: Props, - parent: ResolvingMetadata, -): Promise { - const params = await props.params; - const searchParams = await props.searchParams; - - const pageIndex = searchParams.page - ? Number.parseInt(searchParams.page as string, 10) - : 1; - - const isFirstPage = pageIndex === 1 || !searchParams.page; - const pageTitle = isFirstPage ? 'Posts' : `Posts - Page ${pageIndex}`; - const canonicalUrl = isFirstPage ? '/posts' : `/posts?page=${pageIndex}`; - - return createMetadata({ - title: pageTitle, - description: `Posts${!isFirstPage ? ` - Page ${pageIndex}` : ''}`, - openGraph: { - url: canonicalUrl, - }, - alternates: { - canonical: canonicalUrl, - }, - }); -} -- cgit v1.2.3