feat: Pagination

src/components/PageNavigator.astro

@@ -0,0 +1,13 @@
+---
+import type { Page } from 'astro';
+
+type Props = Pick<Page, "currentPage" | "lastPage" | "url">
+
+const { currentPage, lastPage, url: { prev, next } } = Astro.props;
+---
+
+<div class="container__pagination">
+    <a href={prev} class="button no-decoration">Prev</a>
+    <span class="">{currentPage} of {lastPage}</span>
+    <a href={next} class="button no-decoration">Next</a>
+</div>

src/pages/index.astro

@@ -1,20 +1,4 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro';
-import Hero from '../components/Hero.astro';
-import CardList from '../components/CardList.astro';
-import Modal from '../components/Modal.astro';
-
-import { getCollection } from 'astro:content';
-
-const terms = await getCollection("terms");
+// Homepage. Not yet implemented so just redirect to the main content
+return Astro.redirect("/terms/1");
 ---
-
-<BaseLayout>
-  <Hero terms={terms} />
-  <CardList terms={terms} />
-  <Modal />
-</BaseLayout>
-
-<script src="../scripts/cards.ts"></script>
-<script src="../scripts/modal.ts"></script>
-<script src="../scripts/hero-action.ts"></script>

src/pages/terms/[page].astro

@@ -0,0 +1,34 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro';
+import Hero from '@/components/Hero.astro';
+import CardList from '@/components/CardList.astro';
+import Modal from '@/components/Modal.astro';
+import PageNavigator from '@/components/PageNavigator.astro';
+
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import type { GetStaticPathsOptions, GetStaticPathsResult, Page } from 'astro';
+
+// This type is automatically picked up by astro for Astro.props
+type Props = {
+  page: Page<CollectionEntry<"terms">>;
+}
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions): Promise<GetStaticPathsResult> {
+  const terms = await getCollection("terms");
+  return paginate(terms, { pageSize: 20 });
+}
+
+const { page: { data: terms, ...page } } = Astro.props;
+---
+
+<BaseLayout>
+  <Hero {terms} />
+  <CardList {terms} />
+  <Modal />
+  <PageNavigator {...page} />
+</BaseLayout>
+
+<script src="@/scripts/cards.ts"></script>
+<script src="@/scripts/modal.ts"></script>
+<script src="@/scripts/hero-action.ts"></script>

src/styles/global.css

@@ -506,3 +506,24 @@ body.modal-open {
 #modal-link:hover {
   color: deeppink;
 }
+
+/* ======= Pagination ======= */
+.container__pagination {
+  gap: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 1rem;
+  padding-inline: 1rem;
+}
+
+/* Simulates the `disabled` attribute on `a` tags as they do not support `disabled` */
+.container__pagination > a:not([href]) {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0.5;
+}
+
+.no-decoration {
+  text-decoration: none;
+}

tsconfig.json

@@ -7,8 +7,12 @@
     "noUnusedParameters": false,
     "allowJs": true,
     "strictNullChecks": true,
-    "noImplicitReturns": false
+    "noImplicitReturns": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
-  "include": ["src/**/*", "public/card-actions.js"],
+  "include": ["src"],
   "extends": ["astro/tsconfigs/strictest"]
 }