feat: 404 page

src/pages/404.astro

@@ -0,0 +1,30 @@
+---
+import Layout from "@/layouts/Layout.astro";
+---
+
+<Layout title="404">
+  <div class="not-found">
+    <h1>404 Not Found</h1>
+    <a class="back-home" href="/">返回首页</a>
+  </div>
+</Layout>
+
+<style>
+  .not-found{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 20px;
+    margin-top: -100px;
+  }
+
+  .back-home{
+    background: black;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 12px;
+  }
+</style>

src/pages/index.astro

@@ -95,7 +95,7 @@ list.map((post) => {
     color: #6b7280;
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .posts {
       gap: 12px;
     }

src/pages/posts/[...slug].astro

@@ -18,11 +18,16 @@ interface Post {
   content: string;
 }
 
-const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`);
+let data: Post;
 
+try {
+  const res = await http.get<ApiResponse<Post>>(`post/${slug}`);
+  data = res.data
+} catch (error) {
+  return Astro.redirect("/404")
+}
 const content = await highlightHtmlWithJsdom(data.content)
-
-data.published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
+const published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
 ---
 
 <Layout title={data.title} description={data.summary}>
@@ -43,7 +48,7 @@ data.published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
       <path d="M12 18h.01"/>
       <path d="M16 18h.01"/>
     </svg>
-    {data.published_at}
+    {published_at}
   </div>
 
   <div class="post markdown-body" set:html={content}></div>