TechTalk Card + mini tech card (#71)
continuous-integration/drone/push Build is passing Details

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>
This commit is contained in:
Aditya Thakral 2021-07-29 16:56:47 -04:00 committed by c29wan
parent 6a64013e5c
commit 1fb308327f
10 changed files with 210 additions and 2 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
View File

@ -63,6 +63,20 @@ declare module "*.section.mdx" {
export default ReactComponent; 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" { declare module "*.mdx" {
import { ComponentType } from "react"; import { ComponentType } from "react";

View File

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

View File

@ -8,9 +8,11 @@ import {
TeamMemberCardDemo, TeamMemberCardDemo,
OrganizedContentDemo, OrganizedContentDemo,
ButtonDemo, ButtonDemo,
TechTalkDemo,
MiniTechTalkDemo,
} from "../components/playground"; } from "../components/playground";
import { ConnectWithUs } from "../components/ConnectWithUs" import { ConnectWithUs } from "../components/ConnectWithUs";
import { EmailSignup } from "../components/EmailSignup" import { EmailSignup } from "../components/EmailSignup";
import { TeamMemberCard } from "../components/TeamMemberCard"; 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 />` ## `<ConnectWithUs />`
The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page! The `<ConnectWithUs />` component is used on various pages such as the About page and the Get Involved Page!