ref(global) update project structure

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Generate from '@/app/blog/post/[id]/generate';
+import { MotionDiv } from '@/app/public/MotionDiv';
+
+function BlogReader({ params }: { params: { id: string } }) {
+
+    return (
+        <MotionDiv
+            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>
+        </MotionDiv>
+    );
+}
+
+export default BlogReader;