TechTalk Card + mini tech card (#71)

fixes #35 and #34
- extra padding below poster image

Co-authored-by: catherine-w <37776108+catherine-w@users.noreply.github.com>
Co-authored-by: c29wan <c29wan@localhost>
Reviewed-on: #71
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

components/MiniTechTalkCard.module.css

@@ -0,0 +1,40 @@
+.card {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: calc(16rem / 16);
+  color: var(--purple-2);
+  font-size: 1rem;
+}
+
+.card aside {
+  max-width: calc(142rem / 16);
+  margin-right: calc(45rem / 16);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card aside img {
+  max-width: calc(142rem / 16);
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  padding: calc(4rem / 16);
+}
+
+.content h1 {
+  margin: 0;
+  margin-top: calc(4rem / 16);
+  font-size: calc(18rem / 16);
+}
+
+.card section {
+  padding-bottom: 0;
+}
+
+.spacer {
+  margin-top: calc(76rem / 16);
+}

components/MiniTechTalkCard.tsx

@@ -0,0 +1,22 @@
+import { DEFAULT_MIN_VERSION } from "node:tls";
+import React from "react";
+import { Image } from "./Image";
+import styles from "./MiniTechTalkCard.module.css";
+
+interface MiniTechTalkProps {
+  name: string;
+  short: string;
+  poster?: string;
+}
+
+export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) {
+  return (
+    <article className={styles.card}>
+      <aside>{poster && <Image alt={name} src={poster} />}</aside>
+      <div className={styles.content}>
+        <h1>{name}</h1>
+        <p>{short}</p>
+      </div>
+    </article>
+  );
+}

components/TechTalkCard.module.css

@@ -0,0 +1,34 @@
+.card {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+}
+
+.card aside {
+  flex: 0 0 calc(287rem / 16);
+  margin-right: calc(24rem / 16);
+}
+
+.card aside img {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.spacer {
+  margin-top: calc(76rem / 16);
+}
+
+.card h1 {
+  font-size: calc(24rem / 16);
+  font-weight: 700;
+  font-style: normal;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: var(--blue-2);
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .card {
+    flex-direction: column;
+  }
+}

components/TechTalkCard.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import { Image } from "./Image";
+import styles from "./TechTalkCard.module.css";
+
+interface TechTalkProps {
+  name: string;
+  poster?: string;
+  children: ReactNode;
+}
+
+export function TechTalkCard({ name, poster, children }: TechTalkProps) {
+  return (
+    <article className={styles.card}>
+      <aside>
+        {poster && <Image alt={name} src={poster} />}
+        {!poster && <div className={styles.spacer}></div>}
+      </aside>
+      <section className={styles.content}>
+        <h1>{name}</h1>
+        <div>{children}</div>
+      </section>
+    </article>
+  );
+}

components/playground.module.css

@@ -87,6 +87,10 @@
   font-size: calc(24rem / 16);
 }
 
+.miniTechTalkDemo > *:nth-child(odd) {
+  background: var(--background-teal-2);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .newsDemo,
   .eventDescriptionCardDemo {

components/playground.tsx

@@ -38,6 +38,10 @@ import CodeyInfo, {
   metadata as codeyMetadata,
 } from "../content/playground/codey.team-member.mdx";
 
+import TempTechTalk, {
+  metadata as tempTechTalkMetadata,
+} from "../content/playground/temp.talk.mdx";
+
 import { MiniEventCard } from "./MiniEventCard";
 import { NewsCard } from "./NewsCard";
 import { Link } from "./Link";
@@ -47,6 +51,9 @@ import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
 import { OrganizedContent, LinkProps } from "./OrganizedContent";
 import { Button } from "./Button";
+import { Footer } from "./Footer";
+import { TechTalkCard } from "./TechTalkCard";
+import { MiniTechTalkCard } from "./MiniTechTalkCard";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -217,3 +224,29 @@ export function OrganizedContentDemo() {
     <OrganizedContent sections={sections} currentId={id} link={FakeLink} />
   );
 }
+
+export function TechTalkDemo() {
+  return (
+    <div>
+      <TechTalkCard {...tempTechTalkMetadata}>
+        <TempTechTalk />
+      </TechTalkCard>
+    </div>
+  );
+}
+
+export function MiniTechTalkDemo() {
+  return (
+    <div className={styles.miniTechTalkDemo}>
+      <MiniTechTalkCard {...tempTechTalkMetadata}>
+        <TempTechTalk />
+      </MiniTechTalkCard>
+      <MiniTechTalkCard {...tempTechTalkMetadata}>
+        <TempTechTalk />
+      </MiniTechTalkCard>
+      <MiniTechTalkCard {...tempTechTalkMetadata}>
+        <TempTechTalk />
+      </MiniTechTalkCard>
+    </div>
+  );
+}

content/playground/temp.talk.mdx

@@ -0,0 +1,19 @@
+export const metadata = {
+  name: "Tech Talk Title",
+  short: "Learn how React works and make your own version!",
+  poster: "/images/playground/alt-tab.jpg",
+};
+
+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.
+
+# Download
+
+- BitTorrent:[Netplay in Emulators (mp4)]
+- HTTP (web browser):[Netplay in Emulators (mp4)]

next-env.d.ts

@@ -63,6 +63,20 @@ declare module "*.section.mdx" {
   export default ReactComponent;
 }
 
+declare module "*.talk.mdx" {
+  import { ComponentType } from "react";
+
+  interface TalkMetadata {
+    name: string;
+    short: string;
+    poster?: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: TalkMetadata;
+  export default ReactComponent;
+}
 declare module "*.mdx" {
   import { ComponentType } from "react";
 

pages/_app.css

@@ -23,6 +23,7 @@ body {
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
+  --background-teal-2: rgb(78, 212, 178, 0.2);
   /* used in mobile navbar background */
   --navbar-gray: #787878b2;
   /* used in home page */

pages/playground.mdx

@@ -8,9 +8,11 @@ import {
   TeamMemberCardDemo,
   OrganizedContentDemo,
   ButtonDemo,
+  TechTalkDemo,
+  MiniTechTalkDemo,
 } from "../components/playground";
-import { ConnectWithUs } from "../components/ConnectWithUs"
-import { EmailSignup } from "../components/EmailSignup"
+import { ConnectWithUs } from "../components/ConnectWithUs";
+import { EmailSignup } from "../components/EmailSignup";
 
 import { TeamMemberCard } from "../components/TeamMemberCard";
 
@@ -93,6 +95,21 @@ The `<Link />` component is used on various pages such as Meet the Team! and Our
 
 ---
 
+## `<TechTalkCard />`
+
+The `<TechTalkCard />` component is used on the Resources page to display information
+about Tech Talks.
+
+<TechTalkDemo />
+
+---
+
+## `<MiniTechTalkCard />`
+
+The `<MiniTechTalkCard />` component is used on the Resources page to display condensed
+information about Tech Talks.
+
+<MiniTechTalkDemo />
 ## `<ConnectWithUs />`
 
 The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!