New metadata type for tech talks

components/HorizontalLine.module.css

@@ -1,6 +1,6 @@
 .line {
   display: block;
-  margin: calc(1rem / 16) 0 calc(34rem / 16);
+  margin: calc(34rem / 16) 0;
   height: calc(1rem / 16);
   border: none;
   background-color: var(--primary-heading);

components/MiniTechTalkCard.module.css

@@ -3,7 +3,6 @@
   flex-direction: row;
   box-sizing: border-box;
   padding: calc(16rem / 16);
-  color: var(--purple-2);
   font-size: 1rem;
 }
 
@@ -29,6 +28,7 @@
   margin: 0;
   margin-top: calc(4rem / 16);
   font-size: calc(18rem / 16);
+  color: var(--primary-heading);
 }
 
 .card section {

components/MiniTechTalkCard.tsx

@@ -5,18 +5,27 @@ import { Image } from "./Image";
 import styles from "./MiniTechTalkCard.module.css";
 
 interface MiniTechTalkProps {
-  name: string;
-  short: string;
-  poster?: string;
+  title: string;
+  presentors: string[];
+  poster: string;
 }
 
-export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) {
+export function MiniTechTalkCard({
+  title,
+  presentors,
+  poster,
+}: MiniTechTalkProps) {
   return (
     <article className={styles.card}>
-      <aside>{poster && <Image alt={name} src={poster} />}</aside>
+      <aside>
+        <Image
+          alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
+          src={poster}
+        />
+      </aside>
       <div className={styles.content}>
-        <h1>{name}</h1>
-        <p>{short}</p>
+        <h1>{title}</h1>
+        <p>{presentors.join(", ")}</p>
       </div>
     </article>
   );

components/TechTalkCard.module.css

@@ -24,7 +24,13 @@
   font-style: normal;
   margin-top: 0;
   margin-bottom: 0;
-  color: var(--blue-2);
+  color: var(--primary-accent);
+}
+
+.content h2,
+.content h3,
+.content h4 {
+  font-size: calc(18rem / 16);
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {

components/TechTalkCard.tsx

@@ -1,26 +1,57 @@
 import React, { ReactNode } from "react";
 
 import { Image } from "./Image";
+import { Link } from "./Link";
 
 import styles from "./TechTalkCard.module.css";
 
+interface DownloadLink {
+  file: string;
+  type: string;
+  size?: string;
+}
+
 interface TechTalkProps {
-  name: string;
-  poster?: string;
+  title: string;
+  presentors: string[];
+  poster: string;
+  links: DownloadLink[];
   children: ReactNode;
 }
 
-export function TechTalkCard({ name, poster, children }: TechTalkProps) {
+export function TechTalkCard({
+  title,
+  poster,
+  presentors,
+  links,
+  children,
+}: TechTalkProps) {
   return (
     <article className={styles.card}>
       <aside>
-        {poster && <Image alt={name} src={poster} />}
-        {!poster && <div className={styles.spacer}></div>}
+        <Image
+          alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
+          src={poster}
+        />
       </aside>
       <section className={styles.content}>
-        <h1>{name}</h1>
+        <h1>{title}</h1>
         <div>{children}</div>
+
+        <h2>Download:</h2>
+        <ul>
+          {links.map((link) => (
+            <li key={link.file + link.type}>
+              <DownloadLink {...link} />
+            </li>
+          ))}
+        </ul>
       </section>
     </article>
   );
 }
+
+function DownloadLink({ file, type, size }: DownloadLink) {
+  const text = size ? `${type} (${size})` : type;
+  return <Link href={file}>{text}</Link>;
+}

components/playground.tsx

@@ -247,7 +247,10 @@ export function OrganizedContentDemo() {
 export function TechTalkDemo() {
   return (
     <div>
-      <TechTalkCard {...tempTechTalkMetadata}>
+      <TechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.large}
+      >
         <TempTechTalk />
       </TechTalkCard>
     </div>
@@ -257,15 +260,18 @@ export function TechTalkDemo() {
 export function MiniTechTalkDemo() {
   return (
     <div className={styles.miniTechTalkDemo}>
-      <MiniTechTalkCard {...tempTechTalkMetadata}>
-        <TempTechTalk />
-      </MiniTechTalkCard>
-      <MiniTechTalkCard {...tempTechTalkMetadata}>
-        <TempTechTalk />
-      </MiniTechTalkCard>
-      <MiniTechTalkCard {...tempTechTalkMetadata}>
-        <TempTechTalk />
-      </MiniTechTalkCard>
+      <MiniTechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.small}
+      />
+      <MiniTechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.small}
+      />
+      <MiniTechTalkCard
+        {...tempTechTalkMetadata}
+        poster={tempTechTalkMetadata.thumbnails.small}
+      />
     </div>
   );
 }

content/playground/temp.talk.mdx

@@ -1,19 +1,66 @@
 export const metadata = {
-  name: "Tech Talk Title",
-  short: "Learn how React works and make your own version!",
-  poster: "/images/playground/alt-tab.jpg",
+  title: "1989 Bill Gates Talk on Microsoft",
+  presentors: ["Bill Gates"],
+  thumbnails: {
+    small: "/images/playground/alt-tab.jpg",
+    large: "/images/playground/alt-tab.jpg",
+  },
+  links: [
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.mp3",
+      type: "mp3",
+      size: "85M",
+    },
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.flac",
+      type: "flac",
+      size: "540M",
+    },
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.ogg",
+      type: "ogg",
+      size: "56M",
+    },
+    {
+      file: "http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.wav",
+      type: "wav",
+      size: "945M",
+    },
+  ]
 };
 
-You've got a game, but you didn't write it. You're running it by emulating the machine it was meant to run on, and the machine it was
-meant to run on never had support for networking. Now, you want to play with your friend, over the Internet. Oh, and it's not
-acceptable to incur any latency between your controller and the game while we're at it. Surely that can't be possible, right?
-Wrong. This talk will discuss the re-emulation technique for netplay used commercially by a system called GGPO and freely in
-an emulator frontend called RetroArch, and how similar techniques can be applied to make networking work in other scenarios
-it was never meant for. This will be an unprepared, impromptu talk with no slides, so it should either be a fascinating dive
-into a little-heard-of technique, or an impenetrable mess of jargon and algorithms. Either way, it should be fun. Professor
-Richards is the maintainer of the netplay infrastructure for RetroArch, a popular emulator frontend for multiple platforms.
+Bill Gates discusses the software and computer industry, and how Microsoft has contributed. Gates also discusses his views on the future of the computing industry. The talk was recorded in 1989 but was only recently digitized.
 
-# Download
+Topics include:
 
-- BitTorrent:[Netplay in Emulators (mp4)]
-- HTTP (web browser):[Netplay in Emulators (mp4)]
+- The start and history of the microcomputer industry
+- Microsoft BASIC and the Altair 880 computer
+- The transition from 8-bit to 16-bit computers
+- Microsoft's history with IBM
+- 640k memory barrier and 16-bit architectures
+- 32-bit 386 and 486 architectures
+- RISC and multi-processor machines
+- EGA graphics and WYSIWYG editors
+- Decreasing cost of memory, harddisks and hardware in general
+- The importance and future of the mouse
+- Object-oriented programming
+- MS-DOS and OS/2
+- Multi-threaded and multi-application systems
+- Synchronization in multi-threaded applications
+- Diskette-based software
+- UNIX standardization and POSIX
+- History of the Macintosh and Microsoft' involvement
+- Involvement of Xerox in graphical user interfaces
+- Apple vs. Microsoft lawsuit regarding user interfaces
+- OS/2 future as a replacement for MS-DOS
+- Microsoft Office on Macintosh
+- Thin/dumb clients
+- Compact discs
+- Multimedia applications
+- Gates' current role at Microsoft
+
+<!-- -->
+
+The following picture was taken after the talk (click for higher-res).
+
+[![null](<http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.jpg>)](<http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989-big.jpg>)

pages/playground.mdx

@@ -110,6 +110,9 @@ The `<MiniTechTalkCard />` component is used on the Resources page to display co
 information about Tech Talks.
 
 <MiniTechTalkDemo />
+
+---
+
 ## `<ConnectWithUs />`
 
 The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!

types.d.ts

@@ -66,9 +66,10 @@ declare module "*.talk.mdx" {
   import { ComponentType } from "react";
 
   interface TalkMetadata {
-    name: string;
-    short: string;
-    poster?: string;
+    title: string;
+    presentors: string[];
+    thumbnails: { small: string; large: string };
+    links: { file: string; type: string; size?: string }[];
   }
 
   const ReactComponent: ComponentType;