added pagination

Fixes #4

- paginates evalulations
- updated length to 8 per page and hardcoded for /evaluations

src/components/Pagination/Pagination.astro

@@ -0,0 +1,94 @@
+---
+import { Fragment } from "astro/jsx-runtime";
+import "./Pagination.scss";
+const { pagination } = Astro.props;
+
+const adjacentLinks = 2;
+const maxLinks = adjacentLinks * 2 + 1;
+const lowerLimit = adjacentLinks + 1;
+const upperLimit = pagination.totalPages - adjacentLinks;
+---
+
+{
+  pagination.totalPages > 1 && (
+    <ul class="pagination">
+      {/* First page */}
+      {pagination.pageNumber !== 1 && (
+        <li class="pagination__item pagination__item--first">
+          <a class="pagination__link pagination__link--first" href={1}>
+            ««
+          </a>
+        </li>
+      )}
+
+      {/* Previous page */}
+      {pagination.hasPrev && (
+        <li class="pagination__item pagination__item--previous">
+          <a
+            href={pagination.prev.url}
+            class="pagination__link pagination__link--previous"
+          >
+            «
+          </a>
+        </li>
+      )}
+
+      {/* Page numbers */}
+      {pagination.pagers.map((page) => {
+        return (
+          <Fragment>
+            {(() => {
+              const isInRange =
+                pagination.totalPages > maxLinks
+                  ? pagination.pageNumber < lowerLimit + 1
+                    ? page.pageNumber < maxLinks + 1
+                    : pagination.pageNumber >= upperLimit
+                      ? page.pageNumber > pagination.totalPages - maxLinks
+                      : page.pageNumber >=
+                          pagination.pageNumber - adjacentLinks &&
+                        page.pageNumber <
+                          pagination.pageNumber + adjacentLinks + 1
+                  : true;
+
+              return (
+                isInRange && (
+                  <li
+                    class={`pagination__item${page.pageNumber === pagination.pageNumber ? " pagination__item--current" : ""}`}
+                  >
+                    <a href={page.url} class="pagination__link">
+                      {page.pageNumber}
+                    </a>
+                  </li>
+                )
+              );
+            })()}
+          </Fragment>
+        );
+      })}
+
+      {/* Next page */}
+      {pagination.hasNext && (
+        <li class="pagination__item pagination__item--next">
+          <a
+            href={pagination.next.url}
+            class="pagination__link pagination__link--next"
+          >
+            »
+          </a>
+        </li>
+      )}
+
+      {/* Last page */}
+      {pagination.pageNumber !== pagination.totalPages && (
+        <li class="pagination__item pagination__item--last">
+          <a
+            class="pagination__link pagination__link--last"
+            href={pagination.last.url}
+          >
+            »»
+          </a>
+        </li>
+      )}
+    </ul>
+  )
+}

src/components/Pagination/Pagination.scss

@@ -0,0 +1,22 @@
+.pagination {
+  text-align: center;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+  max-width: 10rem;
+  margin: auto;
+  padding: 0;
+
+  li {
+    display: inline;
+    text-align: center;
+  }
+
+  a {
+    text-decoration: auto;
+  }
+
+  .pagination__item--current {
+    color: black;
+  }
+}

src/pages/evaluations.astro

@@ -3,6 +3,7 @@ import Back from "@components/Back/Back.astro";
 import RowCard from "@components/RowCard/RowCard.astro";
 import { getCollection } from "astro:content";
 import { default as Layout } from "src/layouts/Content/Content.astro";
+import Pagination from "@components/Pagination/Pagination.astro";
 const evaluations = await getCollection("evaluations");
 
 const courseCodes = {
@@ -11,7 +12,10 @@ const courseCodes = {
 
 const comp2804Evaluations = evaluations
   .filter((evaluation) => evaluation.data.course === "comp2804")
-  .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+  .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at))
+  .slice(0, 8);
+
+const numberOfPages = Math.ceil(comp2804Evaluations.length / 8);
 ---
 
 <Layout title="Evaluations">
@@ -45,6 +49,22 @@ const comp2804Evaluations = evaluations
       ))
     }
   </div>
+  <Pagination
+    pagination={{
+      pageNumber: 1,
+      totalPages: numberOfPages,
+      hasPrev: false,
+      prev: { url: "" },
+      hasNext: numberOfPages > 1,
+      next: { url: "/evaluations/2" },
+      first: { url: "/evaluations/1" },
+      last: { url: `/evaluations/${numberOfPages}` },
+      pagers: Array.from({ length: numberOfPages }, (_, i) => ({
+        pageNumber: i + 1,
+        url: `/evaluations/${i + 1}`,
+      })),
+    }}
+  />
 </Layout>
 
 <style>

src/pages/evaluations/[page].astro

@@ -0,0 +1,95 @@
+---
+import Back from "@components/Back/Back.astro";
+import RowCard from "@components/RowCard/RowCard.astro";
+import { getCollection } from "astro:content";
+import { default as Layout } from "src/layouts/Content/Content.astro";
+import Pagination from "@components/Pagination/Pagination.astro";
+const evaluations = await getCollection("evaluations");
+
+const courseCodes = {
+  comp2804: "COMP 2804",
+};
+
+const comp2804Evaluations = evaluations
+  .filter((evaluation) => evaluation.data.course === "comp2804")
+  .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+
+export async function getStaticPaths({ paginate }) {
+  const evaluations = await getCollection("evaluations");
+
+  const comp2804Evaluations = evaluations
+    .filter((evaluation) => evaluation.data.course === "comp2804")
+    .sort((a, b) => Number(b.data.created_at) - Number(a.data.created_at));
+
+  // turn the above into a list
+  const evaluationPages = comp2804Evaluations.map((evaluation) => ({
+    evaluation,
+  }));
+
+  // Generate pages from our array of evaluations, with 5 to a page
+  return paginate(evaluationPages, { pageSize: 8 });
+}
+// All paginated data is passed on the "page" prop
+const { page } = Astro.props;
+---
+
+<Layout title="Evaluations">
+  <div class="Question__bar">
+    <div><Back href={`/`} label="Home" /></div>
+  </div>
+  <h1>Evaluations</h1>
+  <p>
+    Practice previous evaluations from Carleton University's Computer Science
+    courses.
+  </p>
+  <div style="margin-top:2.5rem"></div>
+  <!-- <h2>COMP 2804: Discrete Structures II</h2>
+  <p>
+    Topics include: counting, sequences and sums, discrete probability, basic
+    statistics, recurrence relations, randomized algorithms. Material is
+    illustrated through examples from computing.
+  </p>
+  <br /> -->
+  <div class="Evaluations__list" style="margin-bottom:0.75rem">
+    {
+      page.data.map(({ evaluation }) => (
+        <div>
+          <a href={`/evaluations/${evaluation.slug}`}>
+            <RowCard
+              title={`${courseCodes.comp2804}: ${evaluation.data.title}`}
+              icon="mdi mdi-book-open-variant"
+            />
+          </a>
+        </div>
+      ))
+    }
+  </div>
+  <Pagination
+    pagination={{
+      pageNumber: page.currentPage,
+      totalPages: page.lastPage,
+      hasPrev: !!page.url.prev,
+      prev: { url: page.url.prev || "" },
+      hasNext: !!page.url.next,
+      next: { url: page.url.next || "" },
+      first: { url: "/evaluations/1" },
+      last: { url: page.lastPage ? `/evaluations/${page.lastPage}` : "" },
+      pagers: Array.from({ length: page.lastPage }, (_, i) => ({
+        pageNumber: i + 1,
+        url: `/evaluations/${i + 1}`,
+      })),
+    }}
+  />
+</Layout>
+
+<style>
+  p {
+    color: gray;
+  }
+
+  .Evaluations__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+</style>