Link from [term] to [term]/[event] (#412)

Closes #189

https://csclub.uwaterloo.ca/~a3thakra/csc/j285he-term-to-term-event/events/

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #412
Reviewed-by: n3parikh <n3parikh@csclub.uwaterloo.ca>

components/EventCard.module.css

@@ -31,6 +31,10 @@
   margin-bottom: 0;
 }
 
+.content > h1 a {
+  color: var(--primary-heading);
+}
+
 .content,
 .content > h2 {
   font-weight: 400;

components/EventCard.tsx

@@ -18,6 +18,10 @@ interface EventCardProps {
   permaLink: string;
   showDescription?: boolean;
   children: ReactNode;
+  year: string;
+  term: string;
+  slug: string;
+  titleLinked: boolean;
 }
 
 export function EventCard({
@@ -30,6 +34,10 @@ export function EventCard({
   registerLink,
   children,
   showDescription = false,
+  year,
+  term,
+  slug,
+  titleLinked,
 }: EventCardProps) {
   return (
     <article className={styles.card}>
@@ -54,7 +62,13 @@ export function EventCard({
           showDescription ? styles.mobileShowDescriptionContent : "",
         ].join(" ")}
       >
-        <h1>{name}</h1>
+        <h1>
+          {titleLinked ? (
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
+          ) : (
+            name
+          )}
+        </h1>
         <h2>
           <EventSetting date={date} online={online} location={location} />
         </h2>

components/MiniEventCard.module.css

@@ -14,6 +14,10 @@
   margin: 0;
 }
 
+.name a {
+  color: var(--primary-heading);
+}
+
 .nameSpacer {
   width: calc(140rem / 16);
 }

components/MiniEventCard.tsx

@@ -1,32 +1,39 @@
 import React, { ReactNode } from "react";
 
 import { EventSetting } from "./EventSetting";
+import { Link } from "./Link";
 
 import styles from "./MiniEventCard.module.css";
 
-interface Props {
+interface MiniEventCardProps {
   name: string;
   description: ReactNode;
   short: string;
   online: boolean;
   location: string;
   date: Date;
+  year: string;
+  term: string;
+  slug: string;
 }
 
-export const MiniEventCard: React.FC<Props> = ({
+export const MiniEventCard: React.FC<MiniEventCardProps> = ({
   name,
   short,
   description,
   location,
   date,
   online,
+  year,
+  term,
+  slug,
 }) => {
   return (
     <details className={styles.card}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
           <h2 className={styles.name}>
-            <div>{name}</div>
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
             <div className={styles.nameSpacer}></div>
           </h2>
           <div className={styles.info}>

lib/events.ts

@@ -53,6 +53,9 @@ interface Metadata {
   location: string;
   permaLink: string;
   registerLink?: string;
+  year: string;
+  term: string;
+  slug: string;
 }
 
 export interface Event {
@@ -82,6 +85,9 @@ export async function getEventBySlug(
       ).toString(),
       // permaLink is based on the directory structure in /pages
       permaLink: `/events/${year}/${term}/${slug}`,
+      year: year,
+      term: term,
+      slug: slug,
     } as Metadata,
   };
 }

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

@@ -28,6 +28,7 @@ export default function EventInfoPage({ year, term, event }: Props) {
         {...event.metadata}
         date={new Date(event.metadata.date)}
         showDescription
+        titleLinked={false}
       >
         <MDXRemote {...event.content} />
       </EventCard>

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

@@ -75,6 +75,7 @@ export default function TermPage(props: Props) {
                 {...metadata}
                 date={new Date(metadata.date)}
                 key={metadata.name + metadata.date.toString()}
+                titleLinked={true}
               >
                 <MDXRemote {...content} />
               </EventCard>