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>