feat(blog) fix style

app/blog/BlogPostCard.tsx

@@ -19,13 +19,11 @@ function BlogPostCard({ post }: Props) {
     let post_id = (post as any)['post_id'];
     let header_img = (post as any)['header_img'];
 
-    console.log(header_img);
-
     return (
 
         <div className={ `w-full` }>
             <Card as={ Link } href={ `/blog/post/${ post_id }` }
-                  className={ `mx-7 group` }
+                  className={ `group` }
                   isPressable
                   isHoverable
             >

app/blog/layout.tsx

@@ -6,7 +6,7 @@ function Layout({
     children: React.ReactNode;
 }) {
     return (
-        <div className={ 'flex items-stretch justify-center' }>
+        <div className={ 'flex flex-auto p-7 items-stretch justify-center' }>
             { children }
         </div>
     );

app/blog/page.tsx

@@ -1,6 +1,7 @@
 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';
 
 async function Blog() {
 
@@ -9,9 +10,9 @@ async function Blog() {
         let posts = res['posts'];
         return (
             // blog list
-            <ul className={ 'flex flex-col items-center w-full' }>
+            <ul className={ 'flex flex-col items-center w-full space-y-7' }>
                 { posts.map((post: JSON, key: React.Key | null | undefined) => (
-                    <li key={ key } className={ 'my-7 w-full' }>
+                    <li key={ key } className={ 'w-full' }>
                         <BlogPostCard post={ post } />
                     </li>)
                 ) }
@@ -19,10 +20,11 @@ async function Blog() {
         );
     } catch (e: any) {
         return (
-            <>
-                { e.toString() }
-            </>
-        );
+            <Card className={ `w-full` }>
+                <CardBody>
+                    Fatal: Failed to load post list.
+                </CardBody>
+            </Card>);
     }
 
 }

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

@@ -16,8 +16,11 @@ type Props = {
 }
 
 async function Generate(props: Props) {
-    const response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
-    if (response.status !== 200) {
+
+    let response: any;
+    try {
+        response = await axios(`http://localhost:${ process.env.BACKEND_PORT }/api/get/post/${ props.id }`);
+    } catch (e) {
         return (
             <Card className={ `w-full` }>
                 <CardBody>
@@ -27,6 +30,7 @@ async function Generate(props: Props) {
         );
     }
 
+
     let post_data = response.data;
 
     return (
@@ -34,12 +38,11 @@ async function Generate(props: Props) {
             <Card className={ `w-full` }>
                 <CardBody>
                     <Markdown
-                        className={ `mx-5 my-5 max-w-none prose dark:prose-invert sm:prose-sm md:prose-md lg:prose-lg` }
+                        className={ `p-5 max-w-prose 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>
     );

components/ThemeSwitcher.tsx

@@ -33,7 +33,7 @@ function ThemeSwitcher() {
                         }
                     } }
                 ></Switch>
-                <p className={ `font-bold` }>{ `Toggle Theme` }</p>
+                <p className={ `font-bold hidden md:block` }>{ `Toggle Theme` }</p>
             </div>
         </div>
     );