feat(reader) add reader

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

@@ -0,0 +1,42 @@
+'use server';
+
+import React from 'react';
+import Markdown from 'react-markdown';
+import { test_markdown } from '@/app/blog/post/[id]/test_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';
+
+type Props = {
+    id: string
+}
+
+async function Generate(props: Props) {
+    const response = await fetch(`${ process.env.BLOG_ENDPOINT }/posts/${ props.id }`);
+    if (!response.ok) {
+        throw new Error(response.statusText);
+    }
+    const post_md = await response.text();
+
+    console.log(post_md);
+
+    return (
+        <div>
+            <Card className={ `w-full max-w-[1024px]` }>
+                <CardBody>
+                    <Markdown
+                        className={`mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-sm lg:prose-lg`}
+                        remarkPlugins={ [ remarkGfm, remarkToc ] }
+                        rehypePlugins={ [ rehypeHighlight, rehypeRaw, rehypeSanitize ] }
+                    >{ post_md }</Markdown>
+                </CardBody>
+
+            </Card>
+        </div>
+    );
+}
+
+export default Generate;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import Generate from '@/app/blog/post/[id]/generate';
+
+function BlogReader({ params }: { params: { id: string } }) {
+
+    return (
+        <div className={`mx-7 my-7 w-full max-w-[1024px]`}>
+            <Generate id={params.id} />
+        </div>
+    );
+}
+
+export default BlogReader;