feat: 归档渲染

src/pages/index.astro

@@ -1,26 +1,35 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 
-const posts = [
-  {
-    title: "First Post",
-    date: "2024-01-01",
-    summary: "This is the summary of the first post.",
-  },
-];
+import { http } from "@/lib/request";
+
+interface Post {
+  title: string;
+  summary: string;
+  slug: string;
+  cover: string;
+  published_at: string;
+}
+
+const {list} = await http.get<ApiPageResponse<Post>>("post");
 ---
 
 <Layout>
   <div class="posts">
     {
-      posts.map((post) => (
+      list.map((post) => (
         <a
           class="post"
-          href={`/posts/${post.title.replace(/\s+/g, "-").toLowerCase()}`}
+          href={`/posts/${post.slug}`}
         >
-          <h2>{post.title}</h2>
-          <p>{post.date}</p>
-          <p class="summary">{post.summary}</p>
+          <div class="cover">
+            <img src={post.cover} alt={post.title} />
+          </div>
+          <div class="post-content">
+            <h2>{post.title}</h2>
+            <p class="summary">{post.summary}</p>
+            <time>{post.published_at}</time>
+          </div>
         </a>
       ))
     }
@@ -39,10 +48,30 @@ const posts = [
     padding: 16px;
     border-radius: 12px;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
+    display: flex;
+    gap: 20px;
+  }
+
+  .post-content{
+    flex:1;
+    overflow: hidden;
   }
 
   .summary {
     font-size: 16px;
     color: rgb(66, 63, 63);
   }
+
+  .cover{
+    width: 250px;
+    height: 150px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 </style>

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

@@ -1,18 +1,31 @@
 ---
 import Layout from "@/layouts/Layout.astro";
+import {http} from "@/lib/request.ts";
+import {highlightHtmlWithJsdom} from "@/lib/highlight.js";
+import 'github-markdown-css/github-markdown-light.css';
 
 const { slug } = Astro.params;
 
-const str = `
-  <h1>Sample Post Title</h1>
-  <p>This is a sample blog post content for the post with slug: </p>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-`;
+interface Post {
+  title: string;
+  summary: string;
+  slug: string;
+  cover: string;
+  published_at: string;
+  content_html: string;
+}
 
+const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`);
+
+const content = await highlightHtmlWithJsdom(data.content_html)
 ---
 
 <Layout>
-  <div class="post" set:html={str}>
+  <h1>{data.title}</h1>
+
+  <div>{data.published_at}</div>
+
+  <div class="post markdown-body" set:html={content}>
 
   </div>
 </Layout>