Dynamic permalinks

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>
         )}

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 && (

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?

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,
   };
 }
 

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>