feat(post) add header, fix style

frontend/.gitignore

@@ -40,3 +40,4 @@ bun.lockb
 
 # ide related
 .idea
+/package-lock.json

frontend/app/blog/fetch_posts_list.ts

@@ -1,7 +1,8 @@
 import axios from 'axios';
 
 export default async function fetch_posts_list(): Promise<any> {
-    const response = await axios(`${ process.env.BACKEND_URL }/get_post_list`);
+    const request_url = `${ process.env.BACKEND_URL }/get_post_list`;
+    const response = await axios(request_url);
     if (response.status !== 200) {
         throw new Error(response.statusText);
     }

frontend/app/blog/layout.tsx

@@ -6,7 +6,8 @@ function Layout({
     children: React.ReactNode;
 }) {
     return (
-        <div className={ 'flex flex-auto p-7 pl-2 md:pl-7 items-stretch justify-center' }>
+        // <div className={ 'flex flex-auto p-7 pl-2 md:pl-7 items-stretch justify-center' }>
+        <div className={ 'flex flex-auto p-7 pl-2 md:pl-7 w-full justify-center' }>
             { children }
         </div>
     );

frontend/app/blog/page.tsx

@@ -29,7 +29,7 @@ async function Blog() {
         return (
             <Card className={ `w-full` }>
                 <CardBody>
-                    Fatal: Failed to load post list.
+                    Fatal: { e.toString() }
                 </CardBody>
             </Card>);
     }

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import Image from 'next/image';
+import { Chip } from '@nextui-org/react';
+import { MdCalendarMonth } from 'react-icons/md';
+
+type Props = {
+    post: any
+};
+
+
+const Headers = (props: Props) => {
+    let post = props.post;
+    let title = (post as any)['title'];
+    let sub_title = (post as any)['sub_title'];
+    // let summary = (post as any)['summary'];
+    let category = (post as any)['category'];
+    let tags = (post as any)['tags'];
+    let last_update = new Date((post as any)['last_update']);
+    let first_update = new Date((post as any)['first_update']);
+    let post_id = (post as any)['post_id'];
+    let header_img = (post as any)['header_img'];
+
+    return (
+        <>
+            { header_img !== '' && <div className={ `w-full overflow h-96 relative` }>
+                <Image
+                    alt={ 'cover picture' }
+                    src={ header_img }
+                    className={ `w-full object-cover rounded-b-none z-[5]` }
+                    fill
+                ></Image>
+                <Image
+                    alt={ 'cover picture' }
+                    src={ header_img }
+                    className={ `w-full relative scale-110 blur-3xl object-cover rounded-b-none` }
+                    fill
+                ></Image>
+            </div> }
+
+            <div
+                className={ header_img !== '' ?
+                    'mx-8 -mt-16 backdrop-blur bg-zinc-300/80 dark:bg-gray-600/25 rounded-2xl z-30'
+                    : 'mx-6 mt-6'
+                }>
+                <div className={ `p-4` }>
+                    <Chip className={ `mb-2` } radius={ `sm` } color={ `secondary` }
+                          variant={ `solid` }>{ category }</Chip>
+                    <p className={ `text-4xl font-bold` }> { title }</p>
+                    <p className={ `text-xl` }> { sub_title }</p>
+                </div>
+
+                <div className={ `mx-2 -mt-2 mb-2 flex flex-row flex-wrap justify-between w-full` }>
+                    <div>
+                        <ul className={ `flex flex-row flex-wrap` }>
+                            {
+                                tags.map((tag: string, key: any) => (
+                                    <li key={ key } className={ `mx-1 mb-1` }>
+                                        <Chip>{ tag }</Chip>
+                                    </li>
+                                ))
+                            }
+                        </ul>
+                    </div>
+                    <div className={ `flex flex-row place-content-end mb-1 mr-6 items-center mx-1` }>
+                        <MdCalendarMonth />
+                        <p className={ `text-zinc-500 dark:text-zinc-400 ml-1` }>
+                            { first_update.toLocaleString('default', {
+                                month: `long`,
+                                day: `numeric`,
+                                year: `numeric`
+                            }) }
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+        </>
+    );
+};
+export default Headers;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import { Card, CardBody } from '@nextui-org/card';
+import remarkGfm from 'remark-gfm';
+import remarkToc from 'remark-toc';
+import remarkFrontmatter from 'remark-frontmatter';
+import axios from 'axios';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import Headers from '@/app/blog/post/[id]/Headers';
+
+type Props = {
+    id: string
+}
+
+async function PostCard(props: Props) {
+
+    let response: any;
+    try {
+        response = await axios(`${ process.env.BACKEND_URL }/get_post/${ props.id }`);
+    } catch (e) {
+        return (
+            <Card className={ `w-full` }>
+                <CardBody>
+                    Fatal: Failed to load the post.
+                </CardBody>
+            </Card>
+        );
+    }
+
+
+    let post_data = response.data;
+
+    return (
+        <div>
+            <Card className={ `max-w-full relative` }>
+
+                {/* card headers*/ }
+                <Headers post={ post_data } />
+
+                {/* card body */ }
+                <CardBody>
+                    <Markdown
+                        // className={ `p-5 max-w-full text-justify text-pretty prose prose-neutral prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
+                        className={ `p-5 max-w-full text-justify text-pretty prose prose-sm prose-neutral dark:prose-invert md:prose-md lg:prose-lg
+                            prose-code:overflow-x-scroll
+                        ` }
+                        remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
+                        rehypePlugins={ [ rehypeRaw, rehypeSanitize ] }
+                        components={ {
+                            pre(props) {
+                                const { node, className, children, ...rest } = props;
+                                if ((children as any)['type'] === 'code') {
+                                    const match = /language-(\w+)/.exec((children as any)['props']['className'] || '');
+                                    let lang = match ? match[1] : 'text';
+                                    return (
+                                        <pre className={ `not-prose` }>
+                                            <SyntaxHighlighter
+                                                // @ts-ignore
+                                                style={ oneDark }
+                                                language={ lang }
+                                                showLineNumbers
+                                                // wrapLongLines
+                                                // wrapLines
+                                                classNames={ className }
+                                                PreTag="div"
+                                                { ...rest }
+                                            >
+                                                {
+                                                    String((children as any)['props']['children']).replace(/\n$/, '')
+                                                }
+                                            </SyntaxHighlighter>
+                                        </pre>
+                                    );
+                                } else {
+                                    return (
+                                        <pre className={ `not-prose` }>
+                                            <code className={ className } { ...props }>
+                                                { children }
+                                            </code>
+                                        </pre>
+                                    );
+                                }
+                            }
+                        } }
+                    >{ (post_data as any)['content'] }</Markdown>
+                </CardBody>
+            </Card>
+        </div>
+    );
+}
+
+export default PostCard;

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import Markdown from 'react-markdown';
-import { Card, CardBody } from '@nextui-org/card';
-import remarkGfm from 'remark-gfm';
-import rehypeHighlight from 'rehype-highlight';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeRaw from 'rehype-raw';
-import remarkToc from 'remark-toc';
-import remarkFrontmatter from 'remark-frontmatter';
-import axios from 'axios';
-
-type Props = {
-    id: string
-}
-
-async function Generate(props: Props) {
-
-    let response: any;
-    try {
-        response = await axios(`${ process.env.BACKEND_URL }/get_post/${ props.id }`);
-    } catch (e) {
-        return (
-            <Card className={ `w-full` }>
-                <CardBody>
-                    Fatal: Failed to load the post.
-                </CardBody>
-            </Card>
-        );
-    }
-
-
-    let post_data = response.data;
-
-    return (
-        <div>
-            <Card className={ `w-full max-w-full relative` }>
-                <CardBody>
-                    <Markdown
-                        className={ `p-5 max-w-full text-justify text-pretty prose prose-sm dark:prose-invert md:prose-md lg:prose-lg` }
-                        remarkPlugins={ [ remarkGfm, remarkToc, remarkFrontmatter ] }
-                        rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
-                    >{ (post_data as any)['content'] }</Markdown>
-                </CardBody>
-            </Card>
-        </div>
-    );
-}
-
-export default Generate;

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

@@ -1,17 +1,18 @@
 import React from 'react';
-import Generate from '@/app/blog/post/[id]/generate';
+import PostCard from '@/app/blog/post/[id]/PostCard';
 import { MotionDiv } from '@/app/public/MotionDiv';
 
 function BlogReader({ params }: { params: { id: string } }) {
 
     return (
         <MotionDiv
+            className={ `max-w-full` }
             initial={ { y: 20, opacity: 0 } }
             animate={ { y: 0, opacity: 1 } }
             transition={ { ease: 'easeInOut', duration: 0.5 } }
         >
-            <div className={ `w-full` }>
+            <div className={ `max-w-full` }>
-                <Generate id={ params.id } />
+                <PostCard id={ params.id } />
             </div>
         </MotionDiv>
     );

frontend/app/layout.tsx

@@ -20,9 +20,9 @@ export default function RootLayout({
         <html lang="en" suppressHydrationWarning>
         <body className={ `dark:bg-[#282830] min-h-screen` }>
         <NextThemesProvider attribute="class" defaultTheme="dark">
-            <div className={ `justify-center flex flex-row w-full` }>
+            <div className={ `justify-center flex flex-row w-full max-w-full` }>
                 <Navbar />
-                <div className={ `flex flex-col flex-auto max-w-[1024px]` }>
+                <div className={ `flex flex-col flex-1 max-w-[1024px] min-w-0` }>
                     { children }
                     <Footer />
                 </div>

frontend/components/Navbar.tsx

@@ -111,7 +111,7 @@ function Navbar() {
     return (
         <>
             <div
-                className={ `flex flex-col w-auto md:w-full min-w-[50px] max-w-[256px] mr-0 md:mr-2 ml-2 md:ml-8 min-h-dvh pt-8 sticky` }>
+                className={ `flex flex-col min-w-[50px] md:min-w-[256px] mr-0 md:mr-2 ml-2 md:ml-8 min-h-dvh pt-8 sticky` }>
                 <div className={ `fixed min-h-screen h-full` }>
                     <div className={ `hidden md:block` }>
                         <div className={ `flex justify-center items-center my-7` }>

frontend/next.config.mjs

@@ -5,6 +5,10 @@ const nextConfig = {
             {
                 protocol: 'https',
                 hostname: 'oss.lumither.com'
+            },
+            {
+                protocol: 'https',
+                hostname: 'pic.re'
             }
         ]
     }

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@nextui-org/react": "^2.3.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "axios": "^1.6.8",
     "framer-motion": "^11.2.10",
     "lxgw-wenkai-webfont": "^1.7.0",
@@ -19,7 +20,7 @@
     "react-dom": "^18",
     "react-icons": "^5.1.0",
     "react-markdown": "^9.0.1",
-    "rehype-highlight": "^7.0.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-frontmatter": "^5.0.0",