Resolve some issues

pages/events/[year]/[term]/index.tsx

@@ -1,50 +1,21 @@
+import { ParsedUrlQuery } from "querystring";
+
+import { GetStaticPaths, GetStaticProps } from "next";
 import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
-import { EventCard } from "../../../../components/EventCard";
-import { MiniEventCard } from "../../../../components/MiniEventCard";
+import { EventCard } from "@/components/EventCard";
+import { MiniEventCard } from "@/components/MiniEventCard";
 import {
   getEventYears,
   getEventTermsByYear,
   getEventsByTerm,
   getEventBySlug,
   Event,
-} from "../../../../lib/events";
+} from "@/lib/events";
 
 import styles from "./term.module.css";
 
-export async function getStaticPaths(): Promise<{
-  paths: {
-    params: {
-      year: string;
-      term: string;
-    };
-  }[];
-  fallback: boolean;
-}> {
-  const years = await getEventYears();
-  const paths = [];
-  for (const year of years) {
-    const terms = await getEventTermsByYear(year);
-    const yearPaths = terms.map((curTerm) => ({
-      params: { year: year, term: curTerm },
-    }));
-    paths.push(...yearPaths);
-  }
-
-  return {
-    paths: paths,
-    fallback: false,
-  };
-}
-
-interface Context {
-  params: {
-    year: string;
-    term: string;
-  };
-}
-
 interface Props {
   term: string;
   year: string;
@@ -52,41 +23,7 @@ interface Props {
   futureEvents: Event[];
 }
 
-export async function getStaticProps(context: Context): Promise<{
-  props: Props;
-}> {
-  const events = (
-    await Promise.all(
-      (
-        await getEventsByTerm(context.params.year, context.params.term)
-      ).map((file: string) =>
-        getEventBySlug(context.params.year, context.params.term, file)
-      )
-    )
-  ).sort(
-    (a, b) =>
-      new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
-  );
-
-  const pastEvents = events.filter(
-    (event) => new Date(event.metadata.date).getTime() < Date.now()
-  );
-
-  const futureEvents = events.filter(
-    (event) => new Date(event.metadata.date).getTime() >= Date.now()
-  );
-
-  return {
-    props: {
-      term: context.params.term,
-      year: context.params.year,
-      pastEvents: pastEvents,
-      futureEvents: futureEvents,
-    },
-  };
-}
-
-const Term = (props: Props) => {
+export default function Term(props: Props) {
   const hasPastEvents = props.pastEvents.length !== 0;
   const hasFutureEvents = props.futureEvents.length !== 0;
 
@@ -140,6 +77,61 @@ const Term = (props: Props) => {
       </div>
     </div>
   );
+}
+
+interface Params extends ParsedUrlQuery {
+  year: string;
+  term: string;
+}
+
+export const getStaticProps: GetStaticProps<Props, Params> = async (
+  context
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const { year, term } = context.params!;
+
+  const eventNames = await getEventsByTerm(year, term);
+
+  const events: Event[] = (
+    await Promise.all(
+      eventNames.map((file: string) => getEventBySlug(year, term, file))
+    )
+  ).sort(
+    (a, b) =>
+      new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
+  );
+
+  const pastEvents = events.filter(
+    (event) => new Date(event.metadata.date).getTime() < Date.now()
+  );
+
+  const futureEvents = events.filter(
+    (event) => new Date(event.metadata.date).getTime() >= Date.now()
+  );
+
+  return {
+    props: {
+      term: term,
+      year: year,
+      pastEvents: pastEvents,
+      futureEvents: futureEvents,
+    },
+  };
 };
 
-export default Term;
+export const getStaticPaths: GetStaticPaths<Params> = async () => {
+  const years = await getEventYears();
+  const paths = [];
+  for (const year of years) {
+    const terms = await getEventTermsByYear(year);
+    const yearPaths = terms.map((curTerm) => ({
+      params: { year: year, term: curTerm },
+    }));
+    paths.push(...yearPaths);
+  }
+
+  return {
+    paths: paths,
+    fallback: false,
+  };
+};

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

@@ -1,20 +1,19 @@
 .main {
   margin: auto;
-  margin-top: 7rem;
-  margin-bottom: 14rem;
-  width: 50rem;
+  margin-top: calc(112rem / 16);
+  margin-bottom: calc(224rem / 16);
+  width: calc(800rem / 16);
 }
 
 .heading2 {
   font-weight: 700;
-  font-size: 2.25rem;
   color: var(--primary-heading);
 }
 
 .blue {
-  color: var(--primary-accent)
+  color: var(--primary-accent);
 }
 
 .miniEventCards {
-  margin-top: 30px;
-}
+  margin-top: calc(30rem / 16);
+}