feat: add pagination for blog list

app/(lobby)/layout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
 export default async function LobyLayout({ children }: { children: React.ReactNode }) {
-  return <div className="relative flex min-h-screen flex-col">{children}</div>;
+  return <div className="relative flex min-h-[90vh] flex-col">{children}</div>;
 }

app/(lobby)/page.tsx

@@ -23,11 +23,20 @@ function dbParams() {
   return { ...defaultParam, ...filters, ...sorter };
 }
 
-export default async function Home() {
+
+type Props = {
+  params: { slug: string[] };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export default async function Home({ searchParams }: Props) {
   const queryParams = dbParams();
   const posts = await QueryDatabase(env.NOTION_DATABASE_ID, queryParams);
   const total = posts.length;
 
+  const page = Number(searchParams["page"]) || 1;
+  const subpost = posts.slice((page-1)*env.POST_PAGE_SIZES, page*env.POST_PAGE_SIZES);
+
   return (
     <Shell className="md:pb-10">
       <PageHeader>
@@ -41,7 +50,7 @@ export default async function Home() {
             <PostCardSkeleton key={i} />
           ))}
         >
-          {posts.map((post: any, i) => {
+          {subpost.map((post: any, i) => {
             const title = rawText(post.properties?.Title?.title);
             const slug = post.id; // + "/" + post.properties?.Summary?.rich_text[0]?.plain_text;
             const edit_time = post?.properties?.PublishDate?.date?.start || post?.last_edited_time;
@@ -62,8 +71,8 @@ export default async function Home() {
           })}
         </React.Suspense>
       </section>
-      <Separator className="mt-10" />
-      <PostPagination total={total} pageSize={8} ></PostPagination>
+      {/* <Separator className="mt-10" /> */}
+      <PostPagination total={total} pageSize={env.POST_PAGE_SIZES} ></PostPagination>
     </Shell>
   );
 }

components/pagination.tsx

@@ -11,10 +11,10 @@ import {
 } from "@/components/ui/pagination";
 
 import Head from "next/head";
-import Link from "next/link";
+// import Link from "next/link";
 
 import { usePathname, useSearchParams } from "next/navigation";
-import { Icons } from "./icons";
+// import { Icons } from "./icons";
 import { getPageNumbers } from "@/lib/page-numbers";
 import { cn } from "@/lib/utils";
 
@@ -28,13 +28,9 @@ interface PaginationProps {
    * The max number of per pages
    */
   pageSize: number;
-  /**
-   * Extra props to pass to the next.js links
-   */
-  linkProps?: { [key: string]: any };
 }
 
-export function PostPagination({ total, pageSize, linkProps }: PaginationProps) {
+export function PostPagination({ total, pageSize}: PaginationProps) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const currentPage = Number(searchParams.get("page")) || 1;
@@ -76,8 +72,8 @@ export function PostPagination({ total, pageSize, linkProps }: PaginationProps)
               <PaginationLink
                 href={createPageURL(pageNumber)}
                 prefetch={false}
-                isActive={currentPage == i+1}
-              > {i+1} </PaginationLink>
+                isActive={currentPage == pageNumber}
+              > {pageNumber} </PaginationLink>
             </PaginationItem>
           )
         )}

env.mjs

@@ -17,6 +17,7 @@ export const env = createEnv({
       DATABASE_URL: z.string().optional(),
       NOTION_CACHE_EXPIRER: z.coerce.number().default(3600),
       NOTION_API_LOG_LEVEL: z.enum(["debug", "info", "warn", "error"]).default("warn"),
+      POST_PAGE_SIZES: z.coerce.number().default(8),
   },
 
   /**
@@ -43,6 +44,7 @@ export const env = createEnv({
     DATABASE_URL: process.env.DATABASE_URL,
     NOTION_CACHE_EXPIRER: process.env.NOTION_CACHE_EXPIRER,
     NOTION_API_LOG_LEVEL: process.env.NOTION_API_LOG_LEVEL,
+    POST_PAGE_SIZES: process.env.POST_PAGE_SIZES,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially