pages/events/[year]/index.module.css

@@ -0,0 +1,21 @@
+.main {
+  margin-top: calc(60rem / 16);
+}
+
+.main > h2 {
+  padding-bottom: calc(1rem / 16);
+  border-bottom: 1px solid var(--primary-heading);
+}
+
+.blue {
+  color: var(--primary-accent);
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.list > li {
+  line-height: 3;
+}

pages/events/[year]/index.tsx

@@ -0,0 +1,61 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { GetStaticPaths, GetStaticProps } from "next";
+import React from "react";
+
+import { Link } from "@/components/Link";
+import { getEventYears, getEventTermsByYear } from "@/lib/events";
+
+import styles from "./index.module.css";
+
+interface Props {
+  year: string;
+  terms: string[];
+}
+
+export default function Year(props: Props) {
+  return (
+    <div className={styles.main}>
+      <h2>
+        Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
+      </h2>
+      <ul className={styles.list}>
+        {props.terms.map((term) => (
+          <li key={`${props.year}-${term}`}>
+            <Link href={`/events/${props.year}/${term}`}>
+              {`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+interface Params extends ParsedUrlQuery {
+  year: string;
+}
+
+export const getStaticProps: GetStaticProps<Props, Params> = async (
+  context
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const { year } = context.params!;
+  return {
+    props: {
+      year: year,
+      terms: await getEventTermsByYear(year),
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths<Params> = async () => {
+  const years = await getEventYears();
+  const paths = years.map((curYear) => ({
+    params: { year: curYear },
+  }));
+  return {
+    paths: paths,
+    fallback: false,
+  };
+};