Merge branch 'main' into feat/events-lib

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

@@ -1,72 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
-
-declare module "*.event.mdx" {
-  import { ComponentType } from "react";
-
-  interface EventMetadata {
-    name: string;
-    short: string;
-    date: Date;
-    online: boolean;
-    location: string;
-    poster?: string;
-    registerLink?: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: EventMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.news.mdx" {
-  import { ComponentType } from "react";
-
-  interface NewsMetadata {
-    author: string;
-    date: Date;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: NewsMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.team-member.mdx" {
-  import { ComponentType } from "react";
-
-  interface TeamMemberMetadata {
-    name: string;
-    role: string;
-    image?: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: TeamMemberMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.section.mdx" {
-  import { ComponentType } from "react";
-
-  interface SectionMetadata {
-    title: string;
-    id: string;
-  }
-
-  const ReactComponent: ComponentType;
-
-  export const metadata: SectionMetadata;
-  export default ReactComponent;
-}
-
-declare module "*.mdx" {
-  import { ComponentType } from "react";
-
-  const ReactComponent: ComponentType;
-
-  export default ReactComponent;
-}
+/// <reference types="next/image-types/global" />

next.config.js

@@ -6,4 +6,5 @@ module.exports = withMDX({
   pageExtensions: ["ts", "tsx", "mdx"],
   trailingSlash: true,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  eslint: { ignoreDuringBuilds: true }
 });

package.json

@@ -12,32 +12,32 @@
   "dependencies": {
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@next/mdx": "^10.1.3",
+    "@next/mdx": "11.0.1",
     "date-fns": "^2.11.1",
-    "next": "^10.0.0",
-    "next-mdx-remote": "^3.0.2",
+    "next": "11.0.1",
+    "next-mdx-remote": "3.0.4",
     "prettier": "^2.3.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "remark": "^12.0.0",
     "remark-html": "^12.0.0"
   },
   "devDependencies": {
     "@types/mdx-js__react": "^1.5.3",
     "@types/node": "^14.14.41",
-    "@types/react": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "eslint": "^7.25.0",
+    "@types/react": "^17.0.14",
+    "@typescript-eslint/eslint-plugin": "4.28.4",
+    "@typescript-eslint/parser": "4.28.4",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "gray-matter": "^4.0.3",
     "postcss": "^8.3.0",
     "postcss-calc": "^8.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "typescript": "^4.2.4"
+    "typescript": "4.3.5"
   }
 }

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!

tsconfig.json

@@ -27,6 +27,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "types.d.ts",
     "**/*.ts",
     "**/*.tsx"
   ],

types.d.ts

@@ -0,0 +1,84 @@
+declare module "*.event.mdx" {
+  import { ComponentType } from "react";
+
+  interface EventMetadata {
+    name: string;
+    short: string;
+    date: Date;
+    online: boolean;
+    location: string;
+    poster?: string;
+    registerLink?: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: EventMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.news.mdx" {
+  import { ComponentType } from "react";
+
+  interface NewsMetadata {
+    author: string;
+    date: Date;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: NewsMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.team-member.mdx" {
+  import { ComponentType } from "react";
+
+  interface TeamMemberMetadata {
+    name: string;
+    role: string;
+    image?: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: TeamMemberMetadata;
+  export default ReactComponent;
+}
+
+declare module "*.section.mdx" {
+  import { ComponentType } from "react";
+
+  interface SectionMetadata {
+    title: string;
+    id: string;
+  }
+
+  const ReactComponent: ComponentType;
+
+  export const metadata: SectionMetadata;
+  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";
+
+  const ReactComponent: ComponentType;
+
+  export default ReactComponent;
+}