From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001 From: Bertrand Yuan Date: Mon, 15 Dec 2025 23:48:10 +0800 Subject: initial commit -- the front-end prototype The initial code is base on Anirudh's work. More to see at: https://github.com/techwithanirudh/shadcn-blog Therefore, the code in this commit is under MIT license. --- 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 insertions(+) create mode 100644 src/app/(home)/posts/[slug]/page.client.tsx create mode 100644 src/app/(home)/posts/[slug]/page.tsx create 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 new file mode 100644 index 0000000..7a97f56 --- /dev/null +++ b/src/app/(home)/posts/[slug]/page.client.tsx @@ -0,0 +1,57 @@ +'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 new file mode 100644 index 0000000..15a6bfd --- /dev/null +++ b/src/app/(home)/posts/[slug]/page.tsx @@ -0,0 +1,145 @@ +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 new file mode 100644 index 0000000..fd0f912 --- /dev/null +++ b/src/app/(home)/posts/page.tsx @@ -0,0 +1,133 @@ +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