Merge branch 'main' into feat/events-lib
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
commit
9f7d40b426
|
@ -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);
|
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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
@ -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)]
|
|
@ -1,72 +1,3 @@
|
||||||
/// <reference types="next" />
|
/// <reference types="next" />
|
||||||
/// <reference types="next/types/global" />
|
/// <reference types="next/types/global" />
|
||||||
|
/// <reference types="next/image-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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -6,4 +6,5 @@ module.exports = withMDX({
|
||||||
pageExtensions: ["ts", "tsx", "mdx"],
|
pageExtensions: ["ts", "tsx", "mdx"],
|
||||||
trailingSlash: true,
|
trailingSlash: true,
|
||||||
basePath: process.env.NEXT_PUBLIC_BASE_PATH,
|
basePath: process.env.NEXT_PUBLIC_BASE_PATH,
|
||||||
|
eslint: { ignoreDuringBuilds: true }
|
||||||
});
|
});
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
|
@ -12,32 +12,32 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdx-js/loader": "^1.6.22",
|
"@mdx-js/loader": "^1.6.22",
|
||||||
"@mdx-js/react": "^1.6.22",
|
"@mdx-js/react": "^1.6.22",
|
||||||
"@next/mdx": "^10.1.3",
|
"@next/mdx": "11.0.1",
|
||||||
"date-fns": "^2.11.1",
|
"date-fns": "^2.11.1",
|
||||||
"next": "^10.0.0",
|
"next": "11.0.1",
|
||||||
"next-mdx-remote": "^3.0.2",
|
"next-mdx-remote": "3.0.4",
|
||||||
"prettier": "^2.3.0",
|
"prettier": "^2.3.0",
|
||||||
"react": "17.0.1",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.1",
|
"react-dom": "17.0.2",
|
||||||
"remark": "^12.0.0",
|
"remark": "^12.0.0",
|
||||||
"remark-html": "^12.0.0"
|
"remark-html": "^12.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/mdx-js__react": "^1.5.3",
|
"@types/mdx-js__react": "^1.5.3",
|
||||||
"@types/node": "^14.14.41",
|
"@types/node": "^14.14.41",
|
||||||
"@types/react": "^17.0.3",
|
"@types/react": "^17.0.14",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
"@typescript-eslint/eslint-plugin": "4.28.4",
|
||||||
"@typescript-eslint/parser": "^4.22.0",
|
"@typescript-eslint/parser": "4.28.4",
|
||||||
"eslint": "^7.25.0",
|
"eslint": "7.32.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-prettier": "^3.4.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",
|
"eslint-plugin-react-hooks": "^4.2.0",
|
||||||
"gray-matter": "^4.0.3",
|
"gray-matter": "^4.0.3",
|
||||||
"postcss": "^8.3.0",
|
"postcss": "^8.3.0",
|
||||||
"postcss-calc": "^8.0.0",
|
"postcss-calc": "^8.0.0",
|
||||||
"postcss-flexbugs-fixes": "^5.0.2",
|
"postcss-flexbugs-fixes": "^5.0.2",
|
||||||
"postcss-preset-env": "^6.7.0",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"typescript": "^4.2.4"
|
"typescript": "4.3.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
|
@ -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!
|
||||||
|
|
|
@ -27,6 +27,7 @@
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"next-env.d.ts",
|
"next-env.d.ts",
|
||||||
|
"types.d.ts",
|
||||||
"**/*.ts",
|
"**/*.ts",
|
||||||
"**/*.tsx"
|
"**/*.tsx"
|
||||||
],
|
],
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue