From a685537499d9dcc4cc88d661b2dc6c911e2cb02b Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Tue, 30 Apr 2024 00:40:59 +0800
Subject: [PATCH] feat(reader) add reader

---
 .env                                          |  2 +-
 .../{fetch_posts.ts => fetch_posts_list.ts}   |  4 +-
 app/blog/page.tsx                             |  7 ++--
 app/blog/post/[id]/generate.tsx               | 42 +++++++++++++++++++
 app/blog/post/[id]/page.tsx                   | 13 ++++++
 package.json                                  | 15 +++++--
 tailwind.config.ts                            |  4 +-
 7 files changed, 76 insertions(+), 11 deletions(-)
 rename app/blog/{fetch_posts.ts => fetch_posts_list.ts} (69%)
 create mode 100644 app/blog/post/[id]/generate.tsx
 create mode 100644 app/blog/post/[id]/page.tsx

diff --git a/.env b/.env
index dfc11f3..343fc8c 100644
--- a/.env
+++ b/.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
diff --git a/app/blog/fetch_posts.ts b/app/blog/fetch_posts_list.ts
similarity index 69%
rename from app/blog/fetch_posts.ts
rename to app/blog/fetch_posts_list.ts
index af53549..282cf53 100644
--- a/app/blog/fetch_posts.ts
+++ b/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>> {
-    const response = await fetch(`${ url }/posts/idx.json`);
+export default async function fetch_posts_list(): Promise<Result<JSON[], Error>> {
+    const response = await fetch(`${ process.env.BLOG_ENDPOINT }/posts/idx.json`);
     if (!response.ok) {
         return {
             ok: false,
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index a9962fa..de6ddb9 100644
--- a/app/blog/page.tsx
+++ b/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 (
 
diff --git a/app/blog/post/[id]/generate.tsx b/app/blog/post/[id]/generate.tsx
new file mode 100644
index 0000000..f96c274
--- /dev/null
+++ b/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;
diff --git a/app/blog/post/[id]/page.tsx b/app/blog/post/[id]/page.tsx
new file mode 100644
index 0000000..ee9c1a5
--- /dev/null
+++ b/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;
diff --git a/package.json b/package.json
index 3025b58..07c89db 100644
--- a/package.json
+++ b/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",
-    "eslint-config-next": "14.2.2"
+    "typescript": "^5"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 29026da..08dbe02 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,9 @@ const config: Config = {
     //     extend: {}
     // },
     darkMode: 'class',
-    plugins: [ nextui(
+    plugins: [
+        require('@tailwindcss/typography'),
+        nextui(
         {
             // defaultTheme: 'dark',
             defaultExtendTheme: 'light',