feat(blog) pagination

frontend/app/blog/Pagination.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Pagination as NextUIPagination } from '@nextui-org/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+const Pagination = ({ total }: {
+    total: number,
+}) => {
+    const parsePage = Number(useSearchParams().get('page'));
+    const currPage = parsePage > 0 ? parsePage : 1;
+
+    const router = useRouter();
+
+    const maxMobileWidth: number = 768;
+    const [ isMobile, setIsMobile ] = useState(false);
+    useEffect(() => {
+        const updateMobileWidth = () => {
+            if (window.innerWidth <= maxMobileWidth) {
+                setIsMobile(true);
+            } else {
+                setIsMobile(false);
+            }
+        };
+        updateMobileWidth();
+        window.addEventListener('resize', updateMobileWidth);
+        return () => {
+            window.removeEventListener('resize', updateMobileWidth);
+        };
+
+    }, []);
+
+    return (
+        <div className={ 'w-full p-4 pt-6 flex justify-center' }>
+            <NextUIPagination
+                initialPage={ currPage }
+                total={ total }
+                siblings={ isMobile ? 0 : 1 }
+                size={ isMobile ? 'sm' : 'md' }
+                showControls
+                showShadow
+                color={ 'default' }
+                variant={ 'light' }
+                onChange={ (page) => {
+                    router.push(`?page=${ page }`, { scroll: false });
+                } }
+            />
+        </div>
+
+    );
+};
+export default Pagination;

frontend/app/blog/PostList.tsx

@@ -0,0 +1,42 @@
+'use server';
+
+import React from 'react';
+import { fetchNocturneApi } from '@/app/blog/api';
+import { MotionDiv } from '@/app/public/MotionDiv';
+import BlogPostCard from '@/app/blog/BlogPostCard';
+import { Card, CardBody } from '@nextui-org/card';
+
+const PostList = async ({ page }: { page: number }) => {
+    try {
+        const res = await fetchNocturneApi(`/get_post_list?page=${ page }`);
+        let posts = (await res.json() as any)['posts'];
+        return (
+            // blog list
+            <div className={ 'w-full' }>
+                <ul className={ 'flex flex-col items-center w-full space-y-7' }>
+                    { posts.map((post: JSON, key: number) => (
+                        <li key={ key } className={ 'w-full' }>
+                            <MotionDiv
+                                initial={ { y: 20, opacity: 0 } }
+                                animate={ { y: 0, opacity: 1 } }
+                                transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
+                            >
+                                <BlogPostCard post={ post } />
+                            </MotionDiv>
+                        </li>)
+                    ) }
+                </ul>
+
+            </div>
+        );
+    } catch (e: any) {
+        return (
+            // todo:  use Error.tsx
+            <Card className={ `w-full` }>
+                <CardBody>
+                    Fatal: { e.toString() }
+                </CardBody>
+            </Card>);
+    }
+};
+export default PostList;

frontend/app/blog/api.ts

@@ -13,15 +13,9 @@ const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
     }
 });
 
-export async function fetchNocturneApi(path: string, isServerSideRequest = true): Promise<{ code: number, ret: any }> {
-    let res = await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
+export async function fetchNocturneApi(path: string, isServerSideRequest = true) {
+    return await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
         cache: 'no-cache'
     });
-
-    if (!res.ok) {
-        return { code: res.status, ret: (await res.json()) };
-    }
-
-    return { code: res.status, ret: await res.json() };
 }
 

frontend/app/blog/page.tsx

@@ -1,39 +1,26 @@
-import React from 'react';
-import BlogPostCard from '@/app/blog/BlogPostCard';
-import { Card, CardBody } from '@nextui-org/card';
-import { MotionDiv } from '@/app/public/MotionDiv';
+import PostList from '@/app/blog/PostList';
+import Pagination from '@/app/blog/Pagination';
 import { fetchNocturneApi } from '@/app/blog/api';
 
-async function Blog() {
+async function Blog({ searchParams }: {
+    searchParams?: {
+        page?: number
+    };
+}) {
 
-    const { code, ret } = await fetchNocturneApi('/get_post_list');
-    if (code == 200) {
-        let posts = ret['posts'];
-        return (
-            // blog list
-            <ul className={ 'flex flex-col items-center w-full space-y-7' }>
-                { posts.map((post: JSON, key: number) => (
-                    <li key={ key } className={ 'w-full' }>
-                        <MotionDiv
-                            initial={ { y: 20, opacity: 0 } }
-                            animate={ { y: 0, opacity: 1 } }
-                            transition={ { ease: 'easeInOut', duration: 0.5, delay: key * .2 + .25 } }
-                        >
-                            <BlogPostCard post={ post } />
-                        </MotionDiv>
-                    </li>)
-                ) }
-            </ul>
-        );
-    } else {
-        return (
-            // todo:  use Error.tsx
-            <Card className={ `w-full` }>
-                <CardBody>
-                    Fatal: { ret }
-                </CardBody>
-            </Card>);
-    }
+    const parsePage = Number(searchParams?.page);
+    const currPage = parsePage > 0 ? parsePage : 1;
+    const ret = await fetchNocturneApi(`/get_page_count`);
+    const pageCount = (await ret.json() as any)['res'] as number;
+
+    console.log(currPage);
+
+    return (
+        <div className={ 'w-full min-w-full space-y-4' }>
+            <PostList page={ currPage } />
+            <Pagination total={ pageCount + 10 } />
+        </div>
+    );
 }
 
 export default Blog;

frontend/app/blog/post/[id]/MinifyPostCard.tsx

@@ -23,13 +23,15 @@ const MinifyPostCard = (props: Props) => {
                     <p className={ `text-tiny uppercase font-bold ${ img_url ? 'text-white/60' : 'text-black/60 dark:text-white/60' }` }>{ desc }</p>
                 </CardHeader>
                 { img_url &&
-                    <div>
-                        <Image
-                            className={ 'object-cover object-center ' }
-                            src={ img_url }
-                            alt={ post.title }
-                            fill
-                        />
+                    <div className={ 'h-full' }>
+                        <div className={ 'relative h-[300px] overflow-hidden' }>
+                            <Image
+                                className={ 'object-cover object-center ' }
+                                src={ img_url }
+                                alt={ post.title }
+                                fill
+                            />
+                        </div>
                         <CardFooter
                             className="absolute transition-colors bg-zinc-300/80 dark:bg-gray-600/25 dark:backdrop-brightness-75 bottom-0  justify-between rounded-none">
                             <div>

frontend/app/blog/post/[id]/PostCard.tsx

@@ -17,11 +17,11 @@ type Props = {
 }
 
 async function PostCard(props: Props) {
-   
-    const { code, ret } = await fetchNocturneApi(`/get_post/${ props.id }`);
 
-    if (code == 200) {
 
+    try {
+        const res = await fetchNocturneApi(`/get_post/${ props.id }`);
+        const ret: any = await res.json();
         return (
             <div>
                 <Card className={ `max-w-full relative` }>
@@ -85,11 +85,11 @@ async function PostCard(props: Props) {
                 </Card>
             </div>
         );
-    } else {
+    } catch (e: any) {
         return <div>
             <Card className={ `w-full` }>
                 <CardBody>
-                    Fatal: { ret }
+                    Fatal: { e.toString() }
                 </CardBody>
             </Card>
         </div>;

frontend/components/Navbar.tsx

@@ -89,11 +89,11 @@ function Navbar() {
     }, [ path ]);
 
 
-    const minMobileWidth: number = 1024;
+    const maxMobileWidth: number = 1024;
     const [ isMobile, setIsMobile ] = useState(false);
     useEffect(() => {
         const updateMobileWidth = () => {
-            if (window.innerWidth <= minMobileWidth) {
+            if (window.innerWidth <= maxMobileWidth) {
                 setIsMobile(true);
             } else {
                 setIsMobile(false);

frontend/next.config.mjs

@@ -11,8 +11,8 @@ const nextConfig = {
                 hostname: 'pic.re'
             }
         ]
-    },
-    output: 'standalone'
+    }
+    // output: 'standalone'
 };
 
 export default nextConfig;

frontend/package.json

@@ -9,15 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "^2.3.5",
+    "@nextui-org/react": "^2.4.6",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "framer-motion": "^11.2.10",
+    "framer-motion": "^11.3.24",
     "lxgw-wenkai-webfont": "^1.7.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-icons": "^5.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-raw": "^7.0.0",
@@ -28,15 +28,15 @@
     "sharp": "^0.33.4"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8",
+    "@tailwindcss/typography": "^0.5.14",
+    "@types/node": "^20.14.15",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.2",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.9",
+    "typescript": "^5.5.4"
   }
 }