ui: lock size of a member, feat: introduce pagination

Author: aster-void

src/pages/articles.astro

@@ -0,0 +1,44 @@
+---
+import type { GetStaticPaths } from "astro";
+import ArticleList from "../../components/ArticleList.astro";
+import GlobalLayout from "../../layouts/GlobalLayout.astro";
+import { Focus } from "../../schema";
+import { getCollection } from "astro:content";
+
+export const getStaticPaths = (async ({ paginate }) => {
+  const articles = (await getCollection("articles")).sort(
+    (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+  );
+  return paginate(articles, { pageSize: 18 });
+}) satisfies GetStaticPaths;
+
+const { page } = Astro.props;
+---
+
+<GlobalLayout
+  title="すべての記事"
+  description="ut.code(); からの最新情報"
+  focus={Focus.articles}
+>
+  <main class="container mx-auto px-4 py-24">
+    <h1 class="text-center text-4xl">すべての記事</h1>
+    <ArticleList articles={page.data} class="mt-16" />
+    <div class="join mx-auto block w-fit pt-16 text-xl">
+      <a
+        href={page.url.prev}
+        class:list={["join-item btn", !page.url.prev && "invisible"]}
+        aria-hidden={!page.url.prev}
+      >
+        «
+      </a>
+      <span class="join-item btn">Page {page.currentPage}</span>
+      <a
+        href={page.url.next}
+        class:list={["join-item btn", !page.url.next && "invisible"]}
+        aria-hidden={!page.url.next}
+      >
+        »
+      </a>
+    </div>
+  </main>
+</GlobalLayout>

src/pages/articles/[...page].astro

@@ -20,7 +20,7 @@ const members = (await getCollection("members")).sort(
     loading="eager"
     alt=""
     src={MembersHeader}
-    class="fixed top-32 -z-100 max-h-[100%] w-full object-cover md:h-[100vh]"
+    class="fixed bottom-0 -z-100 h-[100vh] object-cover"
     style="object-position: 75% 20%;"
     aria-hidden
   />
@@ -30,22 +30,22 @@ const members = (await getCollection("members")).sort(
     メンバー
   </h1>
   <main class="mt-[100vh] border-t-2 border-gray-600 px-4 py-16 backdrop-blur">
-    <ul class="grid w-full gap-8 px-[10%] pt-6 md:grid-cols-2 xl:grid-cols-3">
+    <ul class="flex flex-row flex-wrap justify-center gap-8 px-[5%] pt-6">
       {
         members.map((member) => (
-          <li class="relative">
+          <li>
             <a
               href={`/members/${member.id}`}
               class="relative block w-fit drop-shadow-lg transition-colors duration-150 hover:brightness-110 active:top-0.5"
               data-astro-prefetch="hover"
             >
               <Picture
                 formats={["avif", "webp"]}
+                fit="cover"
                 alt={`${member.data?.nameJa} の写真`}
                 src={member.data.upperBodyImage}
-                width="400"
+                width="300"
                 height="400"
-                class="h-[400px] w-full object-cover"
               />
               <div class="absolute bottom-0 w-full min-w-45 bg-gradient-to-b from-transparent to-black px-6 pt-12 pb-6 text-white">
                 <h2 class="text-3xl">{member.data.nameJa}</h2>