components/ArchivePage.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { Link } from "@/components/Link";
+import {
+  ShapesConfig,
+  GetShapesConfig,
+  defaultGetShapesConfig,
+} from "@/components/ShapesBackground";
+
+import styles from "./ArchivePage.module.css";
+
+export interface Props {
+  type: "news" | "events";
+  items: {
+    year: string;
+    terms: string[];
+  }[];
+}
+
+export function ArchivePage({ items, type }: Props) {
+  return (
+    <div className={styles.page}>
+      <h1>{capitalize(type)} Archive</h1>
+      <ul className={styles.list}>
+        {items.map(({ year, terms }) =>
+          terms.map((term) => (
+            <li key={`/${type}/${year}/${term}`}>
+              <Link href={`/${type}/${year}/${term}`}>
+                {capitalize(term)} {year}
+              </Link>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}
+
+ArchivePage.getShapesConfig = ((width, height) => {
+  return window.innerWidth <= 768
+    ? ({} as ShapesConfig)
+    : defaultGetShapesConfig(width, height);
+}) as GetShapesConfig;
+
+function capitalize(str: string) {
+  return str.slice(0, 1).toUpperCase() + str.slice(1);
+}

pages/events/archive.tsx

@@ -0,0 +1,18 @@
+import { GetStaticProps } from "next";
+
+import { ArchivePage, Props } from "@/components/ArchivePage";
+import { getEventTermsByYear, getEventYears } from "@/lib/events";
+
+export default ArchivePage;
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const years = (await getEventYears()).reverse();
+  const yearsWithTerms = await Promise.all(
+    years.map(async (year) => ({
+      year,
+      terms: (await getEventTermsByYear(year)).reverse(),
+    }))
+  );
+
+  return { props: { items: yearsWithTerms, type: "events" } };
+};

pages/news/archive.tsx

@@ -1,47 +1,9 @@
-import { getNewsTermsByYear, getNewsYears } from "lib/news";
 import { GetStaticProps } from "next";
-import React from "react";
 
-import { Link } from "@/components/Link";
-import {
-  ShapesConfig,
-  GetShapesConfig,
-  defaultGetShapesConfig,
-} from "@/components/ShapesBackground";
+import { ArchivePage, Props } from "@/components/ArchivePage";
+import { getNewsTermsByYear, getNewsYears } from "@/lib/news";
 
-import styles from "./archive.module.css";
-
-interface Props {
-  items: {
-    year: string;
-    terms: string[];
-  }[];
-}
-
-export default function NewsArchive({ items }: Props) {
-  return (
-    <div className={styles.page}>
-      <h1>News Archive</h1>
-      <ul className={styles.list}>
-        {items.map(({ year, terms }) =>
-          terms.map((term) => (
-            <li key={`${year}-${term}`}>
-              <Link href={`/news/${year}/${term}`}>
-                {capitalize(term)} {year}
-              </Link>
-            </li>
-          ))
-        )}
-      </ul>
-    </div>
-  );
-}
-
-NewsArchive.getShapesConfig = ((width, height) => {
-  return window.innerWidth <= 768
-    ? ({} as ShapesConfig)
-    : defaultGetShapesConfig(width, height);
-}) as GetShapesConfig;
+export default ArchivePage;
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const years = (await getNewsYears()).reverse();
@@ -52,9 +14,5 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     }))
   );
 
-  return { props: { items: yearsWithTerms } };
+  return { props: { items: yearsWithTerms, type: "news" } };
 };
-
-function capitalize(str: string) {
-  return str.slice(0, 1).toUpperCase() + str.slice(1);
-}