From cf2ab5574842db8592db6079ad95e98d9a586642 Mon Sep 17 00:00:00 2001
From: ManorSailor <53308129+ManorSailor@users.noreply.github.com>
Date: Mon, 16 Sep 2024 15:15:36 +0530
Subject: [PATCH 1/3] feat: Initial pagination support
Breaks Search!
---
src/pages/index.astro | 20 ++------------------
src/pages/terms/[page].astro | 32 ++++++++++++++++++++++++++++++++
2 files changed, 34 insertions(+), 18 deletions(-)
create mode 100644 src/pages/terms/[page].astro
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 50a52657..168a26e7 100644
--- a/src/pages/index.astro
+++ b/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");
---
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/terms/[page].astro b/src/pages/terms/[page].astro
new file mode 100644
index 00000000..dc682cc8
--- /dev/null
+++ b/src/pages/terms/[page].astro
@@ -0,0 +1,32 @@
+---
+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';
+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>;
+}
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions): Promise {
+ const terms = await getCollection("terms");
+ return paginate(terms, { pageSize: 30 });
+}
+
+const { page: { data: terms, ...page } } = Astro.props;
+---
+
+
+
+
+
+
+
+
+
+
From 46f8afe9285f32d506b7233ff64d3bacf5f36a26 Mon Sep 17 00:00:00 2001
From: ManorSailor <53308129+ManorSailor@users.noreply.github.com>
Date: Mon, 16 Sep 2024 16:22:13 +0530
Subject: [PATCH 2/3] feat(pagination): Add PageNavigator component
---
src/components/PageNavigator.astro | 13 +++++++++++++
src/pages/terms/[page].astro | 6 ++++--
src/styles/global.css | 21 +++++++++++++++++++++
3 files changed, 38 insertions(+), 2 deletions(-)
create mode 100644 src/components/PageNavigator.astro
diff --git a/src/components/PageNavigator.astro b/src/components/PageNavigator.astro
new file mode 100644
index 00000000..21740780
--- /dev/null
+++ b/src/components/PageNavigator.astro
@@ -0,0 +1,13 @@
+---
+import type { Page } from 'astro';
+
+type Props = Pick
+
+const { currentPage, lastPage, url: { prev, next } } = Astro.props;
+---
+
+
diff --git a/src/pages/terms/[page].astro b/src/pages/terms/[page].astro
index dc682cc8..fd9495dd 100644
--- a/src/pages/terms/[page].astro
+++ b/src/pages/terms/[page].astro
@@ -3,6 +3,7 @@ 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';
@@ -15,16 +16,17 @@ type Props = {
export async function getStaticPaths({ paginate }: GetStaticPathsOptions): Promise {
const terms = await getCollection("terms");
- return paginate(terms, { pageSize: 30 });
+ return paginate(terms, { pageSize: 20 });
}
-const { page: { data: terms, ...page } } = Astro.props;
+const { page: { data: terms, currentPage, lastPage, url, ...page } } = Astro.props;
---
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 3816abda..dc8c2b46 100644
--- a/src/styles/global.css
+++ b/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;
+}
From c1835a079a614b002917d4002c32fe2ccd6b0255 Mon Sep 17 00:00:00 2001
From: ManorSailor <53308129+ManorSailor@users.noreply.github.com>
Date: Mon, 16 Sep 2024 23:13:53 +0530
Subject: [PATCH 3/3] refactor: rest syntax for page props & path aliases
---
src/pages/terms/[page].astro | 20 ++++++++++----------
tsconfig.json | 8 ++++++--
2 files changed, 16 insertions(+), 12 deletions(-)
diff --git a/src/pages/terms/[page].astro b/src/pages/terms/[page].astro
index fd9495dd..787d5e31 100644
--- a/src/pages/terms/[page].astro
+++ b/src/pages/terms/[page].astro
@@ -1,9 +1,9 @@
---
-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 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';
@@ -19,16 +19,16 @@ export async function getStaticPaths({ paginate }: GetStaticPathsOptions): Promi
return paginate(terms, { pageSize: 20 });
}
-const { page: { data: terms, currentPage, lastPage, url, ...page } } = Astro.props;
+const { page: { data: terms, ...page } } = Astro.props;
---
-
+
-
-
-
+
+
+
diff --git a/tsconfig.json b/tsconfig.json
index 42b60ea0..d4214247 100644
--- a/tsconfig.json
+++ b/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"]
}