feat(global) compatibility milestone

frontend/app/(pages)/blog/post/[id]/Footer.tsx

@@ -3,27 +3,28 @@ import MinifyPostCard from '@/app/(pages)/blog/post/[id]/MinifyPostCard';
 import Link from 'next/link';
 import { FaCreativeCommons } from 'react-icons/fa6';
 
+interface AdjacentPosts {
+    prev: any;
+    next: any;
+}
+
 type Props = {
-    // post: any
-    post_id: string;
-    adjacent_posts: any
-    perm_link: string | undefined;
-    author: string | undefined;
-    author_link: string | undefined;
+    adjacent_posts: AdjacentPosts
+    perm_link: string;
+    author: string;
+    author_link: string;
     first_update: string;
-    last_update: string | undefined;
+    last_update: string | null;
     cc: string | undefined;
     title: string;
 }
 
 const Footer = (props: Props) => {
-    const { adjacent_posts, perm_link, post_id, first_update, last_update, title } = props;
+    const { adjacent_posts, perm_link, author_link, author, first_update, last_update, title } = props;
 
     const prev_post = adjacent_posts.prev;
     const next_post = adjacent_posts.next;
-    const link = perm_link ?? `https://lumither.com/blog/post/${ post_id }`;
-    const author = props.author ?? 'Tao';
-    const author_link = props.author_link ?? '/about/me';
+    const link = perm_link;
     const post_date = new Date(first_update);
     const update_date: Date | undefined = last_update ? new Date(last_update) : undefined;
     const cc = props.cc ?? 'by-nc-sa';

frontend/app/(pages)/blog/post/[id]/Headers.tsx

@@ -3,14 +3,9 @@ import Image from 'next/image';
 import { Chip } from '@nextui-org/react';
 import { MdCalendarMonth } from 'react-icons/md';
 
-// type Props = {
-//     post: any
-// };
-
 type Props = {
     title: string;
     subtitle: string;
-    summary: string | undefined;
     category: string;
     tags: string[];
     first_update: string;

frontend/app/(pages)/blog/post/[id]/MinifyPostCard.tsx

@@ -36,7 +36,7 @@ const MinifyPostCard = (props: Props) => {
                             className="absolute transition-colors bg-zinc-300/80 dark:bg-gray-600/25 dark:backdrop-brightness-75 bottom-0  justify-between rounded-none">
                             <div>
                                 <p className="text-2xl font-bold">{ post['title'] }</p>
-                                <p className="">{ post['sub_title'] }</p>
+                                <p className="">{ post.subtitle }</p>
                             </div>
                         </CardFooter>
                     </div>
@@ -46,7 +46,7 @@ const MinifyPostCard = (props: Props) => {
                         <div className={ 'flex flex-col max-h-fit text-left' }>
                             <p className={ 'text-3xl font-bold text-balance' }>{ post['title'] }</p>
                             <div className={ 'w-1/4 h-[2px] my-2 bg-zinc-500 dark:bg-zinc-400' }></div>
-                            <p className={ 'text-xl text-pretty break-words' }>{ post['sub_title'] }</p>
+                            <p className={ 'text-xl text-pretty break-words' }>{ post.subtitle }</p>
                         </div>
                     </div>
                 }

frontend/app/(pages)/blog/post/[id]/PostCard.tsx

@@ -3,25 +3,28 @@ import { Card, CardBody } from '@nextui-org/card';
 import Headers from '@/app/(pages)/blog/post/[id]/Headers';
 import Footer from '@/app/(pages)/blog/post/[id]/Footer';
 import MarkdownRenderer from '@/app/(pages)/public/MarkdownRenderer';
+import { FetchPostResponseData } from '@/src/api/blog/post';
 
 type Props = {
-    post: any
+    post: FetchPostResponseData
 }
 
 async function PostCard(props: Props) {
-    let post = props.post;
+    const post = props.post.post;
+    const metadata: any | null = post.metadata;
+    const adj = props.post.adjacent;
+
     return (
         <div>
             <Card className={ `max-w-full relative` }>
 
                 {/* card headers */ }
                 <Headers title={ post.title }
-                         subtitle={ post.sub_title }
-                         summary={ post.summary }
+                         subtitle={ post.subtitle }
                          category={ post.category }
                          tags={ post.tags }
-                         first_update={ post.first_update }
-                         header_img={ post.meta.header_img }
+                         first_update={ post.date_created }
+                         header_img={ metadata?.header_img }
                 />
 
                 {/* card body */ }
@@ -36,14 +39,13 @@ async function PostCard(props: Props) {
 
                 {/* card footer */ }
                 <Footer
-                    adjacent_posts={ post.adj }
-                    perm_link={ post.meta.link }
-                    author={ post.meta.author }
-                    author_link={ post.meta.author_link }
-                    first_update={ post.first_update }
-                    last_update={ post.last_update }
-                    cc={ post.meta.cc }
-                    post_id={ post.meta.id }
+                    adjacent_posts={ adj }
+                    perm_link={ metadata?.perm_link ?? `https://lumither.com/blog/post/${ post.id }` }
+                    author={ metadata?.author ?? 'Tao' }
+                    author_link={ metadata?.author_link ?? '/about/me' }
+                    first_update={ post.date_created }
+                    last_update={ post.date_updated }
+                    cc={ metadata?.cc }
                     title={ post.title }
                 />
 

frontend/app/(pages)/blog/post/[id]/page.tsx

@@ -1,22 +1,17 @@
-import React, { cache } from 'react';
+import React from 'react';
 import PostCard from '@/app/(pages)/blog/post/[id]/PostCard';
 import ButtonGoBack from '@/app/(pages)/blog/post/[id]/ButtonGoBack';
 import * as motion from 'motion/react-client';
-import { fetchNocturneApi } from '@/app/(pages)/blog/api';
 import { Metadata } from 'next';
 import { SITE_CONFIG } from '@/src/constants';
-
-const fetchPost = cache(async (id: string) => {
-    const res = await fetchNocturneApi(`/blog/get_post/${ id }`);
-    // throw Error('Not Found');
-    return await res.json();
-});
+import { fetchPost } from '@/src/api/blog/post';
 
 export async function generateMetadata(
     { params }: { params: Promise<{ id: string }> })
     : Promise<Metadata> {
     try {
-        const title = (await fetchPost((await params).id)).title as string;
+        const response = await fetchPost((await params).id);
+        const title = response.data.post.title;
         return {
             title: `${ title } - ${ SITE_CONFIG.name }`
         };
@@ -33,7 +28,7 @@ async function BlogReader({
     params: Promise<{ id: string }>
 }) {
     try {
-        let post = await fetchPost((await params).id);
+        let post = (await fetchPost((await params).id)).data;
 
         return (
             <motion.div