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: www/www-new#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>
amy-random-shapes
Aditya Thakral 1 year ago committed by c29wan
parent 6a64013e5c
commit 1fb308327f
  1. 40
      components/MiniTechTalkCard.module.css
  2. 22
      components/MiniTechTalkCard.tsx
  3. 34
      components/TechTalkCard.module.css
  4. 24
      components/TechTalkCard.tsx
  5. 4
      components/playground.module.css
  6. 33
      components/playground.tsx
  7. 19
      content/playground/temp.talk.mdx
  8. 14
      next-env.d.ts
  9. 1
      pages/_app.css
  10. 21
      pages/playground.mdx

@ -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);
}

@ -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>
);
}

@ -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;
}
}

@ -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>
);
}

@ -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 {

@ -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>
);
}

@ -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)]

14
next-env.d.ts vendored

@ -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";

@ -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 */

@ -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!

Loading…
Cancel
Save