feat(reader) add reader

.env

@@ -1,2 +1,2 @@
-BLOG_ENDPOINT=https://raw.githubusercontents.com/lumither/blog-posts/master
+BLOG_ENDPOINT=https://raw.githubusercontent.com/lumither/blog-posts/master
 ; use mirror

app/blog/fetch_posts_list.ts

@@ -1,7 +1,7 @@
 import { Result } from '@/app/public/type/Result';
 
-export default async function fetch_posts(url: string): Promise<Result<JSON[], Error>> {
+export default async function fetch_posts_list(): Promise<Result<JSON[], Error>> {
-    const response = await fetch(`${ url }/posts/idx.json`);
+    const response = await fetch(`${ process.env.BLOG_ENDPOINT }/posts/idx.json`);
     if (!response.ok) {
         return {
             ok: false,

app/blog/page.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import fetch_posts from '@/app/blog/fetch_posts';
+import fetch_posts_list from '@/app/blog/fetch_posts_list';
 import BlogPostCard from '@/app/blog/BlogPostCard';
 
 async function Blog() {
 
-    const res = await fetch_posts(process.env.BLOG_ENDPOINT!);
+    const res = await fetch_posts_list();
     if (!res.ok) {
         console.log(res.error);
         return;
     }
     const posts = res.value;
-    // console.log(posts);
+
+    console.log(posts);
 
     return (
 

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;

package.json

@@ -15,16 +15,23 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.1.0"
+    "react-icons": "^5.1.0",
+    "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-toc": "^9.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.2",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
+    "typescript": "^5"
-    "eslint-config-next": "14.2.2"
   }
 }

tailwind.config.ts

@@ -13,7 +13,9 @@ const config: Config = {
     //     extend: {}
     // },
     darkMode: 'class',
-    plugins: [ nextui(
+    plugins: [
+        require('@tailwindcss/typography'),
+        nextui(
         {
             // defaultTheme: 'dark',
             defaultExtendTheme: 'light',