Implement dynamic /resources/tech-talks

components/Image.tsx

@@ -1,6 +1,10 @@
 import React, { ImgHTMLAttributes } from "react";
 
 export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
+  if (props.src?.startsWith("http://") || props.src?.startsWith("https://")) {
+    return <img {...props} />;
+  }
+
   const { src: relativeSrc = "" } = props;
 
   let absoluteSrc = process.env.NEXT_PUBLIC_BASE_PATH ?? "/";

components/MiniTechTalkCard.module.css

@@ -1,9 +1,11 @@
-.card {
+.card > a {
   display: flex;
   flex-direction: row;
   box-sizing: border-box;
   padding: calc(16rem / 16);
   font-size: 1rem;
+  color: inherit;
+  text-decoration: inherit;
 }
 
 .card aside {

components/MiniTechTalkCard.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 
 import { Image } from "./Image";
@@ -5,28 +6,36 @@ import { Image } from "./Image";
 import styles from "./MiniTechTalkCard.module.css";
 
 interface MiniTechTalkProps {
+  slug: string;
   title: string;
   presentors: string[];
   poster: string;
 }
 
 export function MiniTechTalkCard({
+  slug,
   title,
   presentors,
   poster,
 }: MiniTechTalkProps) {
+  const presentorsStr = presentors.join(", ");
+
   return (
     <article className={styles.card}>
+      <Link href={`/resources/tech-talks/${slug}`}>
+        <a>
           <aside>
             <Image
-          alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
+              alt={`Thumbnail of tech talk by ${presentorsStr}: ${title}`}
               src={poster}
             />
           </aside>
           <div className={styles.content}>
             <h1>{title}</h1>
-        <p>{presentors.join(", ")}</p>
+            <p>{presentorsStr}</p>
           </div>
+        </a>
+      </Link>
     </article>
   );
 }

pages/resources/tech-talks.tsx

@@ -1,12 +1,17 @@
+import { GetStaticProps } from "next";
 import React from "react";
 
-import { Image } from "../../components/Image";
-import { MiniTechTalkCard } from "../../components/MiniTechTalkCard";
-import { metadata as tempTechTalkMetadata } from "../../content/playground/temp.talk.mdx";
+import { Image } from "@/components/Image";
+import { MiniTechTalkCard } from "@/components/MiniTechTalkCard";
+import { getTechTalks, Metadata } from "@/lib/tech-talks";
 
 import styles from "./tech-talks.module.css";
 
-export default function TechTalks() {
+interface Props {
+  talks: Metadata[];
+}
+
+export default function TechTalks({ talks }: Props) {
   return (
     <>
       <div className={styles.headerContainer}>
@@ -21,19 +26,20 @@ export default function TechTalks() {
         <Image src="images/tech-talks.svg" className={styles.image} />
       </div>
       <div className={styles.miniCards}>
+        {talks.map((talk) => (
           <MiniTechTalkCard
-          {...tempTechTalkMetadata}
-          poster={tempTechTalkMetadata.thumbnails.small}
-        />
-        <MiniTechTalkCard
-          {...tempTechTalkMetadata}
-          poster={tempTechTalkMetadata.thumbnails.small}
-        />
-        <MiniTechTalkCard
-          {...tempTechTalkMetadata}
-          poster={tempTechTalkMetadata.thumbnails.small}
+            {...talk}
+            poster={talk.thumbnails.small}
+            key={talk.slug}
           />
+        ))}
       </div>
     </>
   );
 }
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  return {
+    props: { talks: (await getTechTalks()).map(({ metadata }) => metadata) },
+  };
+};