feat(post) add header, fix style

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` }>
-                <Generate id={ params.id } />
+            <div className={ `max-w-full` }>
+                <PostCard id={ params.id } />
             </div>
         </MotionDiv>
     );