From f2df7541c08b1a006a381e3ed4c9c4f0f06bd0c9 Mon Sep 17 00:00:00 2001
From: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Date: Sun, 12 Sep 2021 01:59:10 -0400
Subject: [PATCH] Dynamic permalinks

---
 components/EventCard.tsx             | 14 ++++++--------
 components/EventDescriptionCard.tsx  |  4 ++--
 content/events/2021/fall/BOT.md      |  1 -
 lib/events.ts                        | 10 ++++++++--
 pages/events/[year]/[term]/index.tsx |  1 -
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/EventCard.tsx b/components/EventCard.tsx
index e9e5eaec..40120970 100644
--- a/components/EventCard.tsx
+++ b/components/EventCard.tsx
@@ -7,7 +7,7 @@ import { Link } from "./Link";
 
 import styles from "./EventCard.module.css";
 
-interface BaseProps {
+interface EventCardProps {
   name: string;
   short: string;
   date: Date;
@@ -15,15 +15,13 @@ interface BaseProps {
   location: string;
   poster?: string;
   registerLink?: string;
+  permaLink: string;
+  showDescription?: boolean;
   children: ReactNode;
 }
 
-type EventCardProps =
-  | (BaseProps & { showDescription?: false; link: string })
-  | (BaseProps & { showDescription: true; link?: string });
-
 export function EventCard({
-  link,
+  permaLink,
   name,
   date,
   online,
@@ -60,8 +58,8 @@ export function EventCard({
         <h2>
           <EventSetting date={date} online={online} location={location} />
         </h2>
-        {!showDescription && link && (
-          <Link href={link}>
+        {!showDescription && (
+          <Link href={permaLink}>
             <span className={styles.mobileLearnMore}>Learn more</span>
           </Link>
         )}
diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx
index 67fc754a..67dde493 100644
--- a/components/EventDescriptionCard.tsx
+++ b/components/EventDescriptionCard.tsx
@@ -16,7 +16,7 @@ interface Props {
   date: Date;
   poster?: string;
   registerLink?: string;
-  permaLink?: string;
+  permaLink: string;
 }
 
 /**
@@ -51,7 +51,7 @@ export function EventDescriptionCard({
           <EventSetting date={date} online={online} location={location} />
         </h2>
         <p className={styles.desc}>{short}</p>
-        {permaLink && <Link href={permaLink}>Learn more</Link>}
+        <Link href={permaLink}>Learn more</Link>
 
         <footer>
           {registerLink && (
diff --git a/content/events/2021/fall/BOT.md b/content/events/2021/fall/BOT.md
index 67a142cc..469b0d4f 100644
--- a/content/events/2021/fall/BOT.md
+++ b/content/events/2021/fall/BOT.md
@@ -6,7 +6,6 @@ online: true
 location: 'Twitch'
 poster: 'images/events/2021/fall/BOT.png'
 registerLink: https://bit.ly/csc-bot-event-signup-form
-permaLink: /events/2021/fall/BOT/
 ---
 
 Kick off the fall term with CS Club’s BOT event! 🍂 Interested in attending upcoming CSC events? Want to meet others in the CS community?
diff --git a/lib/events.ts b/lib/events.ts
index f4f1d8f4..bac0ae7a 100644
--- a/lib/events.ts
+++ b/lib/events.ts
@@ -27,13 +27,14 @@ export async function getEventTermsByYear(year: string): Promise<string[]> {
 }
 
 interface Metadata {
-  slug: string;
+  // slug: string;
   name: string;
   poster?: string;
   short: string;
   date: string;
   online: boolean;
   location: string;
+  permaLink: string;
   registerLink?: string;
 }
 
@@ -55,7 +56,12 @@ export async function getEventBySlug(
 
   return {
     content: await serialize(content),
-    metadata: { ...metadata, slug } as Metadata,
+    metadata: {
+      ...metadata,
+      // slug,
+      // permaLink is based on the directory structure in /pages
+      permaLink: `/events/${year}/${term}/${slug}`,
+    } as Metadata,
   };
 }
 
diff --git a/pages/events/[year]/[term]/index.tsx b/pages/events/[year]/[term]/index.tsx
index 7073921f..bb7cc93f 100644
--- a/pages/events/[year]/[term]/index.tsx
+++ b/pages/events/[year]/[term]/index.tsx
@@ -75,7 +75,6 @@ export default function Term(props: Props) {
                 {...metadata}
                 date={new Date(metadata.date)}
                 key={metadata.name + metadata.date.toString()}
-                link={`/events/${props.year}/${props.term}/${metadata.slug}`}
               >
                 <MDXRemote {...content} />
               </EventCard>