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 && (
+        {!showDescription && (
-          <Link href={link}>
+          <Link href={permaLink}>
             <span className={styles.mobileLearnMore}>Learn more</span>
           </Link>
         )}

components/EventDescriptionCard.module.css

@@ -29,6 +29,9 @@
 }
 
 .logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: calc(32rem / 16);
   margin-left: auto;
 }

components/EventDescriptionCard.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { Button } from "./Button";
 import { EventSetting } from "./EventSetting";
 import { Image } from "./Image";
+import { Link } from "./Link";
 import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
 import styles from "./EventDescriptionCard.module.css";
@@ -15,6 +16,7 @@ interface Props {
   date: Date;
   poster?: string;
   registerLink?: string;
+  permaLink: string;
 }
 
 /**
@@ -35,6 +37,7 @@ export function EventDescriptionCard({
   date,
   online,
   registerLink,
+  permaLink,
 }: Props) {
   const Icon = getIcon(location);
 
@@ -48,6 +51,7 @@ export function EventDescriptionCard({
           <EventSetting date={date} online={online} location={location} />
         </h2>
         <p className={styles.desc}>{short}</p>
+        <Link href={permaLink}>Learn more</Link>
 
         <footer>
           {registerLink && (

lib/events.ts

@@ -27,13 +27,13 @@ export async function getEventTermsByYear(year: string): Promise<string[]> {
 }
 
 interface Metadata {
-  slug: string;
   name: string;
   poster?: string;
   short: string;
   date: string;
   online: boolean;
   location: string;
+  permaLink: string;
   registerLink?: string;
 }
 
@@ -55,7 +55,11 @@ export async function getEventBySlug(
 
   return {
     content: await serialize(content),
-    metadata: { ...metadata, slug } as Metadata,
+    metadata: {
+      ...metadata,
+      // 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>

types.d.ts

@@ -1,84 +1,6 @@
 /* eslint-disable import/order */
 /* eslint-disable import/no-duplicates */
 
-declare module "*.event.mdx" {
-  import { ComponentType } from "react";
-
-  interface EventMetadata {
-    name: string;
-    short: string;
-    date: Date;
-    online: boolean;
-    location: string;
-    poster?: string;
-    registerLink?: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: EventMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.news.mdx" {
-  import { ComponentType } from "react";
-
-  interface NewsMetadata {
-    author: string;
-    date: Date;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: NewsMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.team-member.mdx" {
-  import { ComponentType } from "react";
-
-  interface TeamMemberMetadata {
-    name: string;
-    role: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: TeamMemberMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.section.mdx" {
-  import { ComponentType } from "react";
-
-  interface SectionMetadata {
-    title: string;
-    id: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: SectionMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.talk.mdx" {
-  import { ComponentType } from "react";
-
-  interface TalkMetadata {
-    slug: string;
-    title: string;
-    presentors: string[];
-    thumbnails: { small: string; large?: string };
-    links: { file: string; type: string; size?: string }[];
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: TalkMetadata;
-  export default ReactComponent;
-}
-
 declare module "*.mdx" {
   import { ComponentType } from "react";