diff --git a/components/HorizontalLine.module.css b/components/HorizontalLine.module.css index 16f3ab85..22d09054 100644 --- a/components/HorizontalLine.module.css +++ b/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); diff --git a/components/MiniTechTalkCard.module.css b/components/MiniTechTalkCard.module.css index 01741c1a..d8312a46 100644 --- a/components/MiniTechTalkCard.module.css +++ b/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 { diff --git a/components/MiniTechTalkCard.tsx b/components/MiniTechTalkCard.tsx index c6f3ad99..b5ab0cd9 100644 --- a/components/MiniTechTalkCard.tsx +++ b/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 (
- +
-

{name}

-

{short}

+

{title}

+

{presentors.join(", ")}

); diff --git a/components/TechTalkCard.module.css b/components/TechTalkCard.module.css index 34dbaf9d..7ae3d71e 100644 --- a/components/TechTalkCard.module.css +++ b/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)) { diff --git a/components/TechTalkCard.tsx b/components/TechTalkCard.tsx index 03eaf182..ed9dc2b1 100644 --- a/components/TechTalkCard.tsx +++ b/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 (
-

{name}

+

{title}

{children}
+ +

Download:

+
); } + +function DownloadLink({ file, type, size }: DownloadLink) { + const text = size ? `${type} (${size})` : type; + return {text}; +} diff --git a/components/playground.tsx b/components/playground.tsx index ba2197b6..9f6701e9 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -247,7 +247,10 @@ export function OrganizedContentDemo() { export function TechTalkDemo() { return (
- +
@@ -257,15 +260,18 @@ export function TechTalkDemo() { export function MiniTechTalkDemo() { return (
- - - - - - - - - + + +
); } diff --git a/content/playground/temp.talk.mdx b/content/playground/temp.talk.mdx index 85612530..3cb2758b 100644 --- a/content/playground/temp.talk.mdx +++ b/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]()]() diff --git a/pages/playground.mdx b/pages/playground.mdx index 2f012979..4c0d0536 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -110,6 +110,9 @@ The `` component is used on the Resources page to display co information about Tech Talks. + +--- + ## `` The `` component is used on various pages such as the About page and the Get Involved Page! diff --git a/types.d.ts b/types.d.ts index 244dd983..8af8765f 100644 --- a/types.d.ts +++ b/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;