feat(blog/nuldoc): implement pagination

1 files changed, 25 insertions, 12 deletions

diff --git a/vhosts/blog/nuldoc-src/pages/PostListPage.tsx b/vhosts/blog/nuldoc-src/pages/PostListPage.tsx
index c1c5214c..054955e6 100644
--- a/vhosts/blog/nuldoc-src/pages/PostListPage.tsx
+++ b/vhosts/blog/nuldoc-src/pages/PostListPage.tsx
@@ -1,22 +1,28 @@
 import GlobalFooter from "../components/GlobalFooter.tsx";
 import GlobalHeader from "../components/GlobalHeader.tsx";
 import PageLayout from "../components/PageLayout.tsx";
+import Pagination from "../components/Pagination.tsx";
 import PostPageEntry from "../components/PostPageEntry.tsx";
 import { Config } from "../config.ts";
-import { dateToString } from "../revision.ts";
-import { getPostPublishedDate, PostPage } from "../generators/post.ts";
+import { PostPage } from "../generators/post.ts";
 
 export default function PostListPage(
   posts: PostPage[],
   config: Config,
+  currentPage: number,
+  totalPages: number,
 ) {
   const pageTitle = "投稿一覧";
 
+  const pageInfoSuffix = ` (${currentPage}ページ目)`;
+  const metaTitle = `${pageTitle}${pageInfoSuffix}｜${config.blog.siteName}`;
+  const metaDescription = `投稿した記事の一覧${pageInfoSuffix}`;
+
   return (
     <PageLayout
       metaCopyrightYear={config.blog.siteCopyrightYear}
-      metaDescription="投稿した記事の一覧"
-      metaTitle={`${pageTitle}｜${config.blog.siteName}`}
+      metaDescription={metaDescription}
+      metaTitle={metaTitle}
       metaAtomFeedHref={`https://${config.blog.fqdn}/posts/atom.xml`}
       config={config}
     >
@@ -24,15 +30,22 @@ export default function PostListPage(
         <GlobalHeader config={config} />
         <main className="main">
           <header className="page-header">
-            <h1>{pageTitle}</h1>
+            <h1>{pageTitle}{pageInfoSuffix}</h1>
           </header>
-          {Array.from(posts).sort((a, b) => {
-            const ta = dateToString(getPostPublishedDate(a));
-            const tb = dateToString(getPostPublishedDate(b));
-            if (ta > tb) return -1;
-            if (ta < tb) return 1;
-            return 0;
-          }).map((post) => <PostPageEntry post={post} key={post.uuid} />)}
+
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            basePath="/posts/"
+          />
+
+          {posts.map((post) => <PostPageEntry post={post} key={post.uuid} />)}
+
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            basePath="/posts/"
+          />
         </main>
         <GlobalFooter config={config} />
       </body>