添加一个简陋的用户页

src/pages/blog.astro

@@ -0,0 +1,144 @@
+---
+import FullLayoutV1 from '../layout/FullLayoutV1.astro'
+import { listBlogs, type LegacyListBlogItemType } from '../lib/apis/legacy/blog'
+import BlogCard from '../components/BlogCard.astro'
+import BlogHeaderImage from '../assets/blogs-header.webp'
+import { Image } from 'astro:assets'
+
+export const prerender = false
+
+const _page = parseInt(Astro.url.searchParams.get('page') || '1')
+const page = isNaN(_page) ? 1 : Math.max(1, _page)
+
+let blogs: LegacyListBlogItemType[] = []
+
+try {
+  blogs = await listBlogs({ page, limit: 100 })
+} catch (e) {
+  console.error(e)
+  return Astro.redirect('/500')
+}
+---
+
+<FullLayoutV1 withGap title="博客列表 - 小帕的小窝">
+  <!-- <div class="__dev__caution">
+    <h1>仍在开发中，界面会崩坏</h1>
+  </div> -->
+  <div class="container">
+    <section class="blogs-header">
+      <Image
+        class="image"
+        src={BlogHeaderImage}
+        alt="博客列表的头图，一个悬挂在空中的 LCD1602，上面写着一些示例文本"
+        width={960}
+        height={540}
+        densities={[1.5, 2]}
+      />
+      <div class="description">
+        <h1>博客列表</h1>
+        <h2>这里是 passthem 和他朋友们的文章</h2>
+      </div>
+    </section>
+    <main>
+      <ul>
+        {
+          blogs.map((blog) => (
+            <BlogCard
+              title={blog.title}
+              link={`/blog/${blog.id}`}
+              featureImage={blog.featured_image?.image_url}
+              author={{
+                name: blog.author.nickname,
+                avatar: blog.author.avatar.image_url,
+              }}
+              createdAt={blog.created_at}
+              updatedAt={blog.updated_at}
+            />
+          ))
+        }
+      </ul>
+    </main>
+  </div>
+</FullLayoutV1>
+
+<style>
+  .__dev__caution {
+    height: 100dvh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > h1 {
+      font-size: 72px;
+      font-weight: 800;
+    }
+  }
+
+  .container {
+    max-inline-size: 960px;
+    margin-inline: auto;
+  }
+
+  .blogs-header {
+    margin-block-end: 3rem;
+    position: relative;
+    aspect-ratio: 16 / 9;
+
+    @media (width < 768px) and (width >= 540px) {
+      aspect-ratio: 2.5 / 1;
+    }
+
+    @media (width >= 768px) {
+      aspect-ratio: 4 / 1;
+    }
+
+    & > .image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      filter: saturate(0.6);
+      object-fit: cover;
+      user-select: none;
+    }
+
+    & > .description {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      gap: 0.5rem;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: #00000099;
+      color: white;
+
+      & > h1 {
+        font-size: 2.5rem;
+        font-weight: 600;
+      }
+
+      & > h2 {
+        font-size: 1rem;
+        font-weight: 300;
+      }
+
+      & > h1,
+      & > h2 {
+        text-shadow: 0 0 10px black;
+      }
+    }
+  }
+
+  @media (width >= 768px) {
+    main {
+      margin-inline: auto;
+      max-width: 840px;
+    }
+  }
+</style>