fix img size

24.03/enjoy_tui.md

@@ -3,7 +3,7 @@
 
 `tui`就是文字组成的ui，用字符串在控制台布局ui的形式，相比于图形化页面来说，功能比较原始，但是对于服务器系统来说，还是很有用的。比如我们在linux上常用的一些指令就有布局`tui`，像ps、top等，也有后来做的比较炫酷的像btm如下。
 
-![gif](demo.gif)
+![gif](https://i.imgur.com/h1IDUMd.png)
 
 `tui`的实现方式有很多，最简单的就是使用console相关的sdk，指定控制台的大小，然后在控制台上输出字符串，这种方式可以实现一些简单的功能，但是对于复杂的布局，还是不太方便。所以需要一些库的封装。
 

app/blog/[month]/[slug]/page.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { notFound } from 'next/dist/client/components/not-found';
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
 import rehypePrismPlus from 'rehype-prism-plus';
@@ -17,7 +18,6 @@ import Discussion from '@/app/components/Discussion';
 import { Button, Card, Tooltip, DirectoryTree } from '@/app/components/Antd';
 import { Tabs, Item } from '@/app/components/Tabs';
 
-
 export default async function Post({ params }) {
   let { month, slug } = params;
   slug = querystring.unescape(slug);
@@ -32,7 +32,7 @@ export default async function Post({ params }) {
   try { 
     mdxSource = fs.existsSync(mdxPath) ? fs.readFileSync(mdxPath, 'utf8') : fs.readFileSync(mdPath, 'utf8'); 
   } catch (e) {
-    return <><div className='flex items-center h-screen w-fit text-4xl mx-auto'style={{marginTop: '-5rem !important'}}>404 PAGE NOT FOUND</div></>;
+    notFound();
   }
   const { text: readingTimeText } = readingTime(mdxSource);
   const result = await bundleMDX({
@@ -117,4 +117,14 @@ export async function generateStaticParams() {
       });
     return posts;
   })
+
+  return postsList;
 }
+
+export async function generateMetadata({params}) {
+  let { month, slug } = params;
+  slug = querystring.unescape(slug);
+  return {
+    title: `${month} | ${slug}`
+  }
+}

app/components/NavbarMenu.jsx

@@ -119,14 +119,14 @@ export default function Navbar({ className }) {
             className={cn("fixed inset-x-0 max-w-[25rem] mx-auto z-50", className)}
         >
             <Menu setActive={setActive}>
-                <a href="/" className="text-white flex items-center">
+                <Link href="/" className="text-white flex items-center">
                     <Image alt="notebook" src="/logo.png" width={24} height={24} />
                     首页
-                </a>
-                <a href="https://github.com/sunwu51/notebook" className="text-white flex items-center gap-1">
+                </Link>
+                <Link href="https://github.com/sunwu51/notebook" className="text-white flex items-center gap-1">
                     <Image alt="github" src="/github-mark-white.png" width={16} height={16} />
                     github
-                </a>
+                </Link>
                 <DocSearch />
             </Menu>
         </div >

app/error.jsx

@@ -0,0 +1,8 @@
+'use client'
+export default function Error() {
+    return <>
+        <div className='flex items-center h-screen w-fit text-4xl mx-auto'style={{marginTop: '-5rem !important'}}>
+            Server Error
+        </div>
+    </>;
+}

app/globals.css

@@ -190,7 +190,7 @@ nav>ol.toc-level-1 {
     margin-right: 5px;
 }
 .markdown-body main img {
-    width: calc(100% - 20px);
+    max-width: calc(100% - 20px);
     padding: 5px;
     border-radius: 5px;
     border: 1px solid;

app/loading.jsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+    return <h1>Loading...</h1>
+}

app/not-found.jsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+    return <>
+        <div className='flex items-center h-screen w-fit text-4xl mx-auto'style={{marginTop: '-5rem !important'}}>
+            404 PAGE NOT FOUND
+        </div>
+    </>;
+}

app/page.js

@@ -2,6 +2,7 @@ import { Item, Tabs } from "./components/Tabs";
 import Details from "./components/Details";
 import fs from "fs";
 import matter from 'gray-matter'
+import Link from "next/link";
 const path = require('path');
 const POSTS_PATH = process.cwd();
 var filenames = fs.readdirSync(POSTS_PATH);
@@ -75,8 +76,8 @@ export default function Home() {
                     <Details btnClassName="text-xl font-600" title={month} defaultSelected={true}>
                       {
                         month2Posts[month].map(({slug, tags}) => (
-                          <div key={slug} className="my-2">
-                            <a href={"/blog/" + month + "/" + slug}>{slug}</a>
+                          <div key={slug} className="mb-2">
+                            <Link style={{padding:0}} href={"/blog/" + month + "/" + slug}>{slug}</Link>
                             { tags && tags.length > 0 &&  <div className="mt-[-16px]">{
                               tags.map(tag => (                            
                                 <span key={tag} className=" bg-gray-900 text-white px-2 py-1 rounded-md mr-1 text-[0.7rem]">