feat(post) add header, fix style

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;