Initial file structure

.gitignore

@@ -22,4 +22,6 @@
 # debug
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
+
+content/events

pages/events/[year]/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { getYears, getTermsByYear } from "../../../lib/events";
+import styles from "./year.module.css";
+import { Link } from "../../../components/Link";
+
+export async function getStaticPaths(): Promise<{
+  paths: {
+    params: {
+      year: string;
+    };
+  }[];
+  fallback: boolean;
+}> {
+  const years = await getYears();
+  const paths = years.map((curYear) => ({
+    params: { year: curYear },
+  }));
+  console.log(paths);
+  return {
+    paths: paths,
+    fallback: false,
+  };
+}
+
+interface Context {
+  params: {
+    year: string;
+  };
+}
+
+export async function getStaticProps(context: Context): Promise<{
+  props: {
+    year: string;
+    terms: string[];
+  };
+}> {
+  return {
+    props: {
+      year: context.params.year,
+      terms: await getTermsByYear(context.params.year),
+    },
+  };
+}
+
+interface Props {
+  year: string;
+  terms: string[];
+}
+
+const Year = (props: Props) => {
+  return (
+    <div className={styles.main}>
+      <h2 className={styles.heading2}>
+        Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
+      </h2>
+      <hr />
+      <div className={styles.links}>
+        {props.terms.map((term) => (
+          <Link key={term} href={`./${props.year}/${term}`}>
+            {`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Year;

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

@@ -0,0 +1,27 @@
+.main {
+  margin: auto;
+  margin-top: 7rem;
+  margin-bottom: 14rem;
+  width: 50rem;
+}
+
+.heading2 {
+  font-weight: 700;
+  font-size: 2.25rem;
+  color: var(--purple-2);
+}
+
+.blue {
+  color: var(--blue-2)
+}
+
+.links {
+  display: flex;
+  flex-direction: column;
+}
+
+.links > * {
+  font-weight: 400;
+  font-size: 16px;
+  margin-top: 30px;
+}

pages/events/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Temporary = () => {
+  return <div>This is temporary</div>;
+};
+
+export default Temporary;