From ed9724a36eabf1d49bff7052071151f6a64cf657 Mon Sep 17 00:00:00 2001 From: Dora Su Date: Sun, 23 May 2021 22:56:49 +0000 Subject: [PATCH 1/6] TeamMember --- components/TeamMember.module.css | 29 ++++++++++++++++++++ components/TeamMember.tsx | 21 +++++++++++++++ components/playground.module.css | 33 +++++++++++++++++++++-- components/playground.tsx | 29 ++++++++++++++++++-- content/playground/demo.teammember.mdx | 5 ++++ next-env.d.ts | 15 +++++++++++ pages/playground.mdx | 7 +++++ public/images/playground/team-member.png | Bin 0 -> 210 bytes 8 files changed, 135 insertions(+), 4 deletions(-) create mode 100644 components/TeamMember.module.css create mode 100644 components/TeamMember.tsx create mode 100644 content/playground/demo.teammember.mdx create mode 100644 public/images/playground/team-member.png diff --git a/components/TeamMember.module.css b/components/TeamMember.module.css new file mode 100644 index 00000000..902d099d --- /dev/null +++ b/components/TeamMember.module.css @@ -0,0 +1,29 @@ +.container { + max-width: 7.875rem; + display: flex; + flex-direction: column; + margin: 0; +} + +.img { + width: 100%; + border-radius: 50%; + margin: 0 auto; +} + +.caption { + text-align: center; + font-size: 0.875rem; + margin-top: 1.5rem; +} + +.name { + font-weight: bold; + color: var(--blue-1); +} + +.role { + font-weight: 600; + color: var(--purple-2); + line-height: 1.875; +} diff --git a/components/TeamMember.tsx b/components/TeamMember.tsx new file mode 100644 index 00000000..745b14c5 --- /dev/null +++ b/components/TeamMember.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./TeamMember.module.css"; +import { Image } from "./Image"; + +interface TeamMemberProps { + name: string; + role: string; + src: string; +} + +export const TeamMember: React.FC = ({ name, role, src }) => { + return ( +
+ {`${name} +
+
{name}
+
{role}
+
+
+ ); +}; diff --git a/components/playground.module.css b/components/playground.module.css index 5fb63d85..4afb6d8b 100644 --- a/components/playground.module.css +++ b/components/playground.module.css @@ -2,7 +2,7 @@ background: #e1eefa; } -.news { +.newsDemo { padding: 50px; background-color: var(--off-white); display: inline-block; @@ -52,8 +52,37 @@ margin-bottom: 0; } +.teamMemberDemo { + padding: 10px 50px 30px 50px; + max-width: 847px; +} + +.committee { + margin: 0; + color: var(--purple-2); + font-weight: 600; + font-size: 24px; + line-height: 36px; +} + +.teamMemberDemo > hr { + border: none; + height: 1px; + background-color: var(--blue-2); + width: 100%; + margin-top: 24px; + margin-bottom: 46px; +} + +.teamMembers { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + row-gap: 2.6875rem; + column-gap: 3.3125rem; +} + @media only screen and (max-width: 768px) { - .news, + .newsDemo, .eventDescriptionCardDemo { background-color: #e1eefa; } diff --git a/components/playground.tsx b/components/playground.tsx index b4181839..507e0540 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { EventDescriptionCard } from "./EventDescriptionCard"; import styles from "./playground.module.css"; @@ -9,9 +8,12 @@ import AfterHoursContent, { import UnavailableContent, { metadata as unavailableMetadata, } from "../content/playground/unavailable.news.mdx"; +import { metadata as teamMemberMetadata } from "../content/playground/demo.teammember.mdx"; import { MiniEventCard } from "./MiniEventCard"; import { NewsCard } from "./NewsCard"; +import { EventDescriptionCard } from "./EventDescriptionCard"; +import { TeamMember } from "./TeamMember"; export function MiniEventCardDemo() { const { name, location, short, date } = afterHoursMetadata; @@ -58,7 +60,7 @@ export function MiniEventCardDemo() { export function NewsCardDemo() { return ( -
+
News
Updates from our execs @@ -111,3 +113,26 @@ export function EventDescriptionCardDemo() {
); } + +export function TeamMemberDemo() { + return ( +
+
+

Programme Committee

+
+
+
+ + + + + + + + + + +
+
+ ); +} diff --git a/content/playground/demo.teammember.mdx b/content/playground/demo.teammember.mdx new file mode 100644 index 00000000..116900b7 --- /dev/null +++ b/content/playground/demo.teammember.mdx @@ -0,0 +1,5 @@ +export const metadata = { + name: "Name Name", + role: "Role", + src: "images/playground/team-member.png" +} \ No newline at end of file diff --git a/next-env.d.ts b/next-env.d.ts index ed11a509..2a3d896f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -30,3 +30,18 @@ declare module "*.news.mdx" { export const metadata: NewsMetadata; export default ReactComponent; } + +declare module "*.teammember.mdx" { + import { ComponentType } from "react"; + + interface TeamMemberMetadata { + name: string; + role: string; + src: string; + } + + const ReactComponent: ComponentType; + + export const metadata: TeamMemberMetadata; + export default ReactComponent; +} diff --git a/pages/playground.mdx b/pages/playground.mdx index 2584b4e4..4d4a77df 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -2,6 +2,7 @@ import { MiniEventCardDemo, NewsCardDemo, EventDescriptionCardDemo, + TeamMemberDemo } from "../components/playground"; # Playground @@ -31,3 +32,9 @@ The `` component is used on the home page, and uses the --- +## `` + +The `` component has an image of the team member along with their name and role. +It is used on the Meet the Team page for non executive members. + + diff --git a/public/images/playground/team-member.png b/public/images/playground/team-member.png new file mode 100644 index 0000000000000000000000000000000000000000..7bbd27157f2428b00151c221084e0b312fb40659 GIT binary patch literal 210 zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nETnVv3=AsNnZFJ0t3pdfNIVD6!t zR?Bu$jWbkzLb6Mw<&;$T4vr-WN literal 0 HcmV?d00001 From 429f19fdd4d46a078d31efdb0878820ff6b5af3f Mon Sep 17 00:00:00 2001 From: Jared He Date: Mon, 24 May 2021 06:00:47 +0000 Subject: [PATCH 2/6] Add EventCard --- .gitignore | 2 +- components/EventCard.module.css | 43 ++++++++++++++++++++ components/EventCard.tsx | 45 +++++++++++++++++++++ components/EventDescriptionCard.module.css | 7 ++++ components/EventDescriptionCard.tsx | 13 +++--- components/EventSetting.module.css | 5 --- components/EventSetting.tsx | 3 +- components/playground.tsx | 25 ++++++++++++ content/playground/after-hours.event.mdx | 5 ++- content/playground/alt-tab.event.mdx | 15 +++++++ content/playground/ootb-react.event.mdx | 17 ++++++++ next-env.d.ts | 3 ++ pages/playground.mdx | 13 +++++- public/images/alt-tab.png | Bin 0 -> 83550 bytes public/images/ootb-react.png | Bin 0 -> 102169 bytes 15 files changed, 180 insertions(+), 16 deletions(-) create mode 100644 components/EventCard.module.css create mode 100644 components/EventCard.tsx delete mode 100644 components/EventSetting.module.css create mode 100644 content/playground/alt-tab.event.mdx create mode 100644 content/playground/ootb-react.event.mdx create mode 100644 public/images/alt-tab.png create mode 100644 public/images/ootb-react.png diff --git a/.gitignore b/.gitignore index 922d92a5..238e770b 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,4 @@ # debug npm-debug.log* yarn-debug.log* -yarn-error.log* +yarn-error.log* \ No newline at end of file diff --git a/components/EventCard.module.css b/components/EventCard.module.css new file mode 100644 index 00000000..4f4a96f9 --- /dev/null +++ b/components/EventCard.module.css @@ -0,0 +1,43 @@ +.card { + display: flex; + flex-direction: row; + max-width: 1000px; + box-sizing: border-box; + padding: 24px; +} + +.card aside { + flex: 0 0 144px; + margin-right: 24px; +} + +.card aside img { + width: 100%; + margin-bottom: 16px; +} + +.registerButton { + width: 100%; +} + +.content > h2 { + font-size: 24px; + font-weight: 700; + font-style: normal; + margin-top: 0; + margin-bottom: 0; +} + +.content, +.content > h3 { + color: var(--purple-2); + font-size: 14px; + font-weight: 400; + font-style: normal; + margin-top: 0; + margin-bottom: 14px; +} + +.content { + margin-bottom: 0; +} diff --git a/components/EventCard.tsx b/components/EventCard.tsx new file mode 100644 index 00000000..80d7147e --- /dev/null +++ b/components/EventCard.tsx @@ -0,0 +1,45 @@ +import React, { ReactNode } from "react"; +import styles from "./EventCard.module.css"; + +import { EventSetting } from "./EventSetting"; +import { Image } from "./Image"; + +interface EventCardProps { + name: string; + short: string; + date: Date; + online: boolean; + location: string; + poster: string; + registerLink: string; + children: ReactNode; +} + +export function EventCard({ + name, + date, + online, + location, + poster, + registerLink, + children, +}: EventCardProps) { + return ( +
+ +
+

{name}

+

+ +

+
{children}
+
+
+ ); +} diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css index 6037a248..7796e9d8 100644 --- a/components/EventDescriptionCard.module.css +++ b/components/EventDescriptionCard.module.css @@ -47,6 +47,13 @@ right: 0; } +.setting { + margin: 0; + color: var(--blue-1); + font-weight: bolder; + font-size: 0.75rem; +} + @media only screen and (max-width: 768px) { .card { padding: 0; diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx index 32fcba15..39ca9cb6 100644 --- a/components/EventDescriptionCard.tsx +++ b/components/EventDescriptionCard.tsx @@ -42,12 +42,13 @@ export function EventDescriptionCard(props: Props) {

{props.name}

- - +

+ +

{props.children}
diff --git a/components/EventSetting.module.css b/components/EventSetting.module.css deleted file mode 100644 index 154bb6fa..00000000 --- a/components/EventSetting.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.setting { - color: var(--blue-1); - font-weight: bolder; - font-size: 0.75rem; -} diff --git a/components/EventSetting.tsx b/components/EventSetting.tsx index 237c5bb4..3dec1cde 100644 --- a/components/EventSetting.tsx +++ b/components/EventSetting.tsx @@ -1,5 +1,4 @@ import React from "react"; -import styles from "./EventSetting.module.css"; interface Props { date: Date; @@ -20,7 +19,7 @@ export function EventSetting(props: Props) { const location = props.online ? `Online - ${props.location}` : props.location; return ( -
+
{` | ${location}`}
diff --git a/components/playground.tsx b/components/playground.tsx index 507e0540..31d23087 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -5,6 +5,13 @@ import styles from "./playground.module.css"; import AfterHoursContent, { metadata as afterHoursMetadata, } from "../content/playground/after-hours.event.mdx"; +import OOTBReact, { + metadata as OOTBReactEventMetadata, +} from "../content/playground/ootb-react.event.mdx"; +import AltTab, { + metadata as altTabEventMetadata, +} from "../content/playground/alt-tab.event.mdx"; + import UnavailableContent, { metadata as unavailableMetadata, } from "../content/playground/unavailable.news.mdx"; @@ -12,6 +19,7 @@ import { metadata as teamMemberMetadata } from "../content/playground/demo.teamm import { MiniEventCard } from "./MiniEventCard"; import { NewsCard } from "./NewsCard"; +import { EventCard } from "./EventCard"; import { EventDescriptionCard } from "./EventDescriptionCard"; import { TeamMember } from "./TeamMember"; @@ -114,6 +122,23 @@ export function EventDescriptionCardDemo() { ); } +export function EventCardDemo() { + const eventCardData = [ + { Content: OOTBReact, metadata: OOTBReactEventMetadata }, + { Content: AltTab, metadata: altTabEventMetadata }, + ]; + + return ( + <> + {eventCardData.map(({ Content, metadata }) => ( + + + + ))} + + ); +} + export function TeamMemberDemo() { return (
diff --git a/content/playground/after-hours.event.mdx b/content/playground/after-hours.event.mdx index 45fdb7d3..a9fbb372 100644 --- a/content/playground/after-hours.event.mdx +++ b/content/playground/after-hours.event.mdx @@ -2,7 +2,10 @@ export const metadata = { name: "Afterhours: Personal Relationships", short: "Learn how React works and make your own version!", date: new Date("2021-03-02 2:00 PM"), - location: "Online - Twitch", + online: false, + location: "MC", + poster: "/images/playground/intro-ootb.jpg", + registerLink: "http://csclub.uwaterloo.ca/", }; The past year has been tough for all of us, having to deal with the pandemic diff --git a/content/playground/alt-tab.event.mdx b/content/playground/alt-tab.event.mdx new file mode 100644 index 00000000..a4ee16dd --- /dev/null +++ b/content/playground/alt-tab.event.mdx @@ -0,0 +1,15 @@ +export const metadata = { + name: "Alt-Tab", + short: "CSC is proud to present to you Alt-Tab!", + date: new Date("March 25, 2021 19:00:00"), + online: true, + location: "Twitch", + poster: "/images/alt-tab.png", + registerLink: "http://google.com/", +}; + +CSC is proud to present to you Alt-Tab! Join us in a lightning tech talk series presented to you by our very own students. Alt-Tab consists of 10 to 15-minute talks about anything related to tech. Learn more about exciting topics that range from competitive programming to cryptography! + +We will have four incredible presenters that are eager to share their insights with you. Stay tuned as we'll be introducing them and the topics that they will be discussing soon!. + +Registration is not required to attend! We'll just be sending you an email reminder, as well as inviting you to our calendar even diff --git a/content/playground/ootb-react.event.mdx b/content/playground/ootb-react.event.mdx new file mode 100644 index 00000000..a46427c5 --- /dev/null +++ b/content/playground/ootb-react.event.mdx @@ -0,0 +1,17 @@ +export const metadata = { + name: "Out of the Box: React", + short: "Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks.", + date: new Date("March 23, 2021 19:00:00"), + online: true, + location: "Twitch", + poster: "/images/ootb-react.png", + registerLink: "http://google.com/", +}; + +Modern web frameworks are a black-box. They're easy to use, but they have numerous minute details to master in order to apply them to truly scalable websites. Over the last few years, front-end frameworks have absorbed the responsibilities of the back-end, meaning it's become ever more important to dig their details out of the box. + +Out of the Box is a series of code-along projects that explore what's under the hood of modern web frameworks. Nearly 5 million websites use React, including many of the internet's most popular websites. While its simple syntax attracts developers from all over, underneath lies a complex infrastructure of code to manage all elements from caching to hooks. Rishi will bring these ideas to light in our inaugural episode of Out of the Box. Come join him and code your own version of React! + +Only basic web experience is needed. All JavaScript code will be written within a single HTML document for simplicity. Node.js will also be required to participate in the event! + +Registration is not required to attend! We'll just be sending you an email reminder, as well as inviting you to our calendar event. diff --git a/next-env.d.ts b/next-env.d.ts index 2a3d896f..18bf6b5f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -8,7 +8,10 @@ declare module "*.event.mdx" { name: string; short: string; date: Date; + online: boolean; location: string; + poster: string; + registerLink: string; } const ReactComponent: ComponentType; diff --git a/pages/playground.mdx b/pages/playground.mdx index 4d4a77df..6f7c115f 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -2,6 +2,7 @@ import { MiniEventCardDemo, NewsCardDemo, EventDescriptionCardDemo, + EventCardDemo, TeamMemberDemo } from "../components/playground"; @@ -9,7 +10,7 @@ import { ## `` -The `` component has a collapsible description, and it is used +The `` component has a collapsible description, and it is used on the events page. It uses the `
` tag and works without JS! @@ -32,6 +33,16 @@ The `` component is used on the home page, and uses the --- + +## `` + +The `` component is used on the events page, and uses the +`
)} - {props.online && ( - + {online && platformURL && ( + {props.location} )} diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx index acbd1d63..032e5c8d 100644 --- a/components/MiniEventCard.tsx +++ b/components/MiniEventCard.tsx @@ -1,13 +1,14 @@ import React, { ReactNode } from "react"; +import { EventSetting } from "./EventSetting"; import styles from "./MiniEventCard.module.css"; interface Props { name: string; - descriptionShort: string; description: ReactNode; + short: string; + online: boolean; location: string; - date: string; - time: string; + date: Date; } const dropDownIcon = ( @@ -28,11 +29,11 @@ const dropDownIcon = ( export const MiniEventCard: React.FC = ({ name, - descriptionShort, + short, description, location, date, - time, + online, }) => { return (
@@ -43,9 +44,9 @@ export const MiniEventCard: React.FC = ({

- {location} | {date} | {time} +

-

{descriptionShort}

+

{short}

View details {dropDownIcon}

diff --git a/components/playground.tsx b/components/playground.tsx index 31d23087..75cdc3f6 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -23,45 +23,22 @@ import { EventCard } from "./EventCard"; import { EventDescriptionCard } from "./EventDescriptionCard"; import { TeamMember } from "./TeamMember"; +const events = [ + { Content: AfterHoursContent, metadata: afterHoursMetadata }, + { Content: OOTBReact, metadata: OOTBReactEventMetadata }, + { Content: AltTab, metadata: altTabEventMetadata }, +]; + export function MiniEventCardDemo() { - const { name, location, short, date } = afterHoursMetadata; - - const dateString = date.toLocaleDateString("en-US", { - day: "numeric", - month: "long", - year: "numeric", - }); - const timeString = date.toLocaleTimeString("en-US", { - hour: "numeric", - minute: "numeric", - }); - return (
- } - /> - } - /> - } - /> + {events.map(({ Content, metadata }) => ( + } + key={metadata.name + metadata.date.toString()} + /> + ))}
); } @@ -84,54 +61,28 @@ export function NewsCardDemo() { } export function EventDescriptionCardDemo() { - const { name, short, date } = afterHoursMetadata; - return (
- -

{short}

- - -

{short}

- - -

{short}

- + {events.map(({ metadata }) => ( + + {metadata.short} + + ))}
); } export function EventCardDemo() { - const eventCardData = [ - { Content: OOTBReact, metadata: OOTBReactEventMetadata }, - { Content: AltTab, metadata: altTabEventMetadata }, - ]; - return ( <> - {eventCardData.map(({ Content, metadata }) => ( - + {events.map(({ Content, metadata }) => ( + ))} From 7f88950f78841be31dd56f7e3923c3924b2ba11f Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Mon, 24 May 2021 04:04:02 -0400 Subject: [PATCH 6/6] Make registerLink and poster optional for events --- components/EventCard.module.css | 4 ++++ components/EventCard.tsx | 15 +++++++++------ components/EventDescriptionCard.tsx | 4 ++-- components/playground.tsx | 2 +- content/playground/after-hours.event.mdx | 1 - content/playground/alt-tab.event.mdx | 1 - next-env.d.ts | 4 ++-- 7 files changed, 18 insertions(+), 13 deletions(-) diff --git a/components/EventCard.module.css b/components/EventCard.module.css index 4f4a96f9..8c538d37 100644 --- a/components/EventCard.module.css +++ b/components/EventCard.module.css @@ -16,6 +16,10 @@ margin-bottom: 16px; } +.spacer { + margin-top: 76px; +} + .registerButton { width: 100%; } diff --git a/components/EventCard.tsx b/components/EventCard.tsx index 80d7147e..52118a20 100644 --- a/components/EventCard.tsx +++ b/components/EventCard.tsx @@ -10,8 +10,8 @@ interface EventCardProps { date: Date; online: boolean; location: string; - poster: string; - registerLink: string; + poster?: string; + registerLink?: string; children: ReactNode; } @@ -27,11 +27,14 @@ export function EventCard({ return (

{name}

diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx index 5a69a2ca..e502054a 100644 --- a/components/EventDescriptionCard.tsx +++ b/components/EventDescriptionCard.tsx @@ -9,7 +9,7 @@ interface Props { online: boolean; location: string; date: Date; - poster: string; + poster?: string; registerLink?: string; children: ReactNode; } @@ -52,7 +52,7 @@ export function EventDescriptionCard({ return (
- {name} + {poster && {name}}

{name}

diff --git a/components/playground.tsx b/components/playground.tsx index 75cdc3f6..9f86fc0e 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -24,8 +24,8 @@ import { EventDescriptionCard } from "./EventDescriptionCard"; import { TeamMember } from "./TeamMember"; const events = [ - { Content: AfterHoursContent, metadata: afterHoursMetadata }, { Content: OOTBReact, metadata: OOTBReactEventMetadata }, + { Content: AfterHoursContent, metadata: afterHoursMetadata }, { Content: AltTab, metadata: altTabEventMetadata }, ]; diff --git a/content/playground/after-hours.event.mdx b/content/playground/after-hours.event.mdx index a9fbb372..7d227d63 100644 --- a/content/playground/after-hours.event.mdx +++ b/content/playground/after-hours.event.mdx @@ -4,7 +4,6 @@ export const metadata = { date: new Date("2021-03-02 2:00 PM"), online: false, location: "MC", - poster: "/images/playground/intro-ootb.jpg", registerLink: "http://csclub.uwaterloo.ca/", }; diff --git a/content/playground/alt-tab.event.mdx b/content/playground/alt-tab.event.mdx index c64e4884..fc3567d6 100644 --- a/content/playground/alt-tab.event.mdx +++ b/content/playground/alt-tab.event.mdx @@ -5,7 +5,6 @@ export const metadata = { online: true, location: "Twitch", poster: "/images/playground/alt-tab.jpg", - registerLink: "http://google.com/", }; CSC is proud to present to you Alt-Tab! Join us in a lightning tech talk series presented to you by our very own students. Alt-Tab consists of 10 to 15-minute talks about anything related to tech. Learn more about exciting topics that range from competitive programming to cryptography! diff --git a/next-env.d.ts b/next-env.d.ts index 18bf6b5f..bcee8690 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -10,8 +10,8 @@ declare module "*.event.mdx" { date: Date; online: boolean; location: string; - poster: string; - registerLink: string; + poster?: string; + registerLink?: string; } const ReactComponent: ComponentType;