feat(global) containerize

frontend/.dockerignore

@@ -0,0 +1,10 @@
+/node_modules
+
+/.next/
+/out/
+/build
+
+.DS_Store
+*.pem
+
+.env*.local

frontend/app/blog/Error.tsx

@@ -0,0 +1 @@
+// todo: create component

frontend/app/blog/api.ts

@@ -0,0 +1,27 @@
+const LOCAL_ENDPOINT = process.env.API_LOCAL_URL;
+const REMOTE_ENDPOINT = process.env.API_REMOTE_URL;
+
+const NOCTURNE_ENDPOINT = ((isServerSide = true) => {
+    if (process.env.NODE_ENV === 'production') {
+        if (isServerSide) {
+            return LOCAL_ENDPOINT;
+        } else {
+            return REMOTE_ENDPOINT;
+        }
+    } else {
+        return LOCAL_ENDPOINT;
+    }
+});
+
+export async function fetchNocturneApi(path: string, isServerSideRequest = true): Promise<{ code: number, ret: any }> {
+    let res = await fetch(`${ NOCTURNE_ENDPOINT(isServerSideRequest) }${ path }`, {
+        cache: 'no-cache'
+    });
+
+    if (!res.ok) {
+        return { code: res.status, ret: (await res.json()) };
+    }
+
+    return { code: res.status, ret: await res.json() };
+}
+

frontend/app/blog/fetch_posts_list.ts

@@ -1,10 +0,0 @@
-import axios from 'axios';
-
-export default async function fetch_posts_list(): Promise<any> {
-    const request_url = `${ process.env.BACKEND_URL }/get_post_list`;
-    const response = await axios(request_url);
-    if (response.status !== 200) {
-        throw new Error(response.statusText);
-    }
-    return response.data;
-}

frontend/app/blog/page.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import fetch_posts_list from '@/app/blog/fetch_posts_list';
 import BlogPostCard from '@/app/blog/BlogPostCard';
 import { Card, CardBody } from '@nextui-org/card';
 import { MotionDiv } from '@/app/public/MotionDiv';
+import { fetchNocturneApi } from '@/app/blog/api';
 
 async function Blog() {
 
-    try {
-        const res = await fetch_posts_list();
-        let posts = res['posts'];
+    const { code, ret } = await fetchNocturneApi('/get_post_list');
+    if (code == 200) {
+        let posts = ret['posts'];
         return (
             // blog list
             <ul className={ 'flex flex-col items-center w-full space-y-7' }>
@@ -25,15 +25,15 @@ async function Blog() {
                 ) }
             </ul>
         );
-    } catch (e: any) {
+    } else {
         return (
+            // todo:  use Error.tsx
             <Card className={ `w-full` }>
                 <CardBody>
-                    Fatal: { e.toString() }
+                    Fatal: { ret }
                 </CardBody>
             </Card>);
     }
-
 }
 
 export default Blog;

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

@@ -10,7 +10,6 @@ type Props = {
 const Footer = (props: Props) => {
     const { post } = props;
 
-    const header_img = post['header_img'];
     const adjacent_posts = post['adj'];
     const prev_post = adjacent_posts['prev'];
     const next_post = adjacent_posts['next'];

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

@@ -4,60 +4,48 @@ 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';
 import Footer from '@/app/blog/post/[id]/Footer';
+import { fetchNocturneApi } from '@/app/blog/api';
 
 type Props = {
     id: string
 }
 
 async function PostCard(props: Props) {
+   
+    const { code, ret } = await fetchNocturneApi(`/get_post/${ props.id }`);
+
+    if (code == 200) {
 
-    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>
-        );
-    }
+            <div>
+                <Card className={ `max-w-full relative` }>
 
+                    {/* card headers */ }
+                    <Headers post={ ret } />
 
-    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
+                    {/* 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` }>
+                            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 }
@@ -74,29 +62,39 @@ async function PostCard(props: Props) {
                                                 }
                                             </SyntaxHighlighter>
                                         </pre>
-                                    );
-                                } else {
-                                    return (
-                                        <pre className={ `not-prose` }>
+                                        );
+                                    } else {
+                                        return (
+                                            <pre className={ `not-prose` }>
                                             <code className={ className } { ...props }>
                                                 { children }
                                             </code>
                                         </pre>
-                                    );
+                                        );
+                                    }
                                 }
-                            }
-                        } }
-                    >{ (post_data as any)['content'] }</Markdown>
+                            } }
+                        >{ ret['content'] }</Markdown>
+                    </CardBody>
+
+
+                    {/* card footer */ }
+
+                    <Footer post={ ret } />
+
+                </Card>
+            </div>
+        );
+    } else {
+        return <div>
+            <Card className={ `w-full` }>
+                <CardBody>
+                    Fatal: { ret }
                 </CardBody>
-
-
-                {/* card footer */ }
-
-                <Footer post={ post_data } />
-
             </Card>
-        </div>
-    );
+        </div>;
+    }
+
 }
 
 export default PostCard;

frontend/next.config.mjs

@@ -11,7 +11,8 @@ const nextConfig = {
                 hostname: 'pic.re'
             }
         ]
-    }
+    },
+    output: 'standalone'
 };
 
 export default nextConfig;

frontend/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@nextui-org/react": "^2.3.5",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "axios": "^1.6.8",
     "framer-motion": "^11.2.10",
     "lxgw-wenkai-webfont": "^1.7.0",
     "next": "14.2.3",