/curation/ now looks like the numbered page

It uses duplicate code, which sucks. I should figure out how to
deduplicate the code.

Author: simshadows

src/pages/curation/index.astro

@@ -1,17 +1,33 @@
 ---
 import {render} from "astro:content";
 
-import Layout from "./_layouts/CurationBaseLayout.astro";
 import {fm} from "@helpers/frontmatter";
-
+import PaginationNavigatorBar from "@components/PaginationNavigatorBar";
 import {getCurationCollectionPaginated} from "@helpers/collections/curation";
 
+import Layout from "./_layouts/CurationBaseLayout.astro";
+
 import "./_index.css";
 
 const groups = (await getCurationCollectionPaginated()).groups;
 const posts = groups[0];
 if (!posts) throw new Error();
 
+const mockedPage = {
+    currentPage: 1,
+    lastPage: groups.length,
+    url: {
+        current: "/curation/",
+        prev: undefined,
+        next: "/curation/2/",
+        first: undefined,
+        last: `/curation/${groups.length}/`,
+    },
+};
+function numToURL(i: number): string {
+    return `/curation/${i}/`;
+}
+
 export const frontmatter = fm({
     title: "Sim's Internet Curation",
     description: "A hand-curated feed of internet content.",
@@ -24,9 +40,10 @@ export const frontmatter = fm({
 <div id="welcome">
     <p><a href="./about/">About This Page</a></p>
     <p><em>Disclaimer: Posts shown here or any commentary I write may contain factual errors or imbalanced representation.</em></p>
-    <p><a href="./2/">Next Page</a></p>
 </div>
 
+<PaginationNavigatorBar page={mockedPage} numberToURL={numToURL}/>
+
 {posts.map(async (p) => {
     const renderedContent = await (async ()=>{
         if (!p.collectionEntry) return null;
@@ -47,6 +64,8 @@ export const frontmatter = fm({
     </article>
 })}
 
+<PaginationNavigatorBar page={mockedPage} numberToURL={numToURL}/>
+
 
 </Layout>