feat(global) several major updates:

- delete page `tag`, `archive`
- add page `friends`
- implement page `about` *partially*

frontend/app/blog/layout.tsx

@@ -6,9 +6,10 @@ function Layout({
     children: React.ReactNode;
 }) {
     return (
-        // <div className={ 'flex flex-auto p-7 pl-2 md:pl-7 items-stretch justify-center' }>
         <div className={ 'flex flex-auto p-7 pl-2 lg:pl-7 w-full justify-center' }>
-            { children }
+            <main className={ 'w-full' }>
+                { children }
+            </main>
         </div>
     );
 }

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

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@nextui-org/react';
+import { IoArrowBackOutline } from 'react-icons/io5';
+
+const ButtonGoBack = () => {
+    const router = useRouter();
+
+    return (
+        <Button
+            startContent={ <IoArrowBackOutline /> }
+            variant={ 'light' }
+            onClick={ () => router.back() }
+        >
+            { 'Back' }
+        </Button>
+    );
+};
+export default ButtonGoBack;

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

@@ -1,16 +1,9 @@
 import React from 'react';
-import Markdown from 'react-markdown';
 import { Card, CardBody } from '@nextui-org/card';
-import remarkGfm from 'remark-gfm';
-import remarkToc from 'remark-toc';
-import remarkFrontmatter from 'remark-frontmatter';
-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';
+import MarkdownRenderer from '@/app/public/MarkdownRenderer';
 
 type Props = {
     id: string
@@ -31,55 +24,15 @@ async function PostCard(props: Props) {
 
                     {/* 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` }>
-                                            <SyntaxHighlighter
-                                                // @ts-ignore
-                                                style={ oneDark }
-                                                language={ lang }
-                                                showLineNumbers
-                                                // wrapLongLines
-                                                // wrapLines
-                                                classNames={ className }
-                                                PreTag="div"
-                                                { ...rest }
-                                            >
-                                                {
-                                                    String((children as any)['props']['children']).replace(/\n$/, '')
-                                                }
-                                            </SyntaxHighlighter>
-                                        </pre>
-                                        );
-                                    } else {
-                                        return (
-                                            <pre className={ `not-prose` }>
-                                            <code className={ className } { ...props }>
-                                                { children }
-                                            </code>
-                                        </pre>
-                                        );
-                                    }
-                                }
-                            } }
-                        >{ ret['content'] }</Markdown>
+                        <div className={ 'p-5' }>
+                            <MarkdownRenderer>
+                                { ret['content'] }
+                            </MarkdownRenderer>
+                        </div>
                     </CardBody>
 
 
                     {/* card footer */ }
-
                     <Footer post={ ret } />
 
                 </Card>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PostCard from '@/app/blog/post/[id]/PostCard';
 import { MotionDiv } from '@/app/public/MotionDiv';
+import ButtonGoBack from '@/app/blog/post/[id]/ButtonGoBack';
 
 function BlogReader({ params }: { params: { id: string } }) {
 
@@ -14,6 +15,9 @@ function BlogReader({ params }: { params: { id: string } }) {
             <div className={ `max-w-full` }>
                 <PostCard id={ params.id } />
             </div>
+            <div className={ 'mt-3' }>
+                <ButtonGoBack />
+            </div>
         </MotionDiv>
     );
 }