From 801a20066478605025d1ae1b857a0f515d6eb002 Mon Sep 17 00:00:00 2001 From: b38peng Date: Fri, 23 Jul 2021 20:48:02 -0300 Subject: [PATCH] dynamic importing!! --- components/Bubble.tsx | 2 +- components/TeamMember.module.css | 30 +-- components/TeamMember.tsx | 10 +- components/TeamMemberCard.module.css | 3 +- content/about/index.mdx | 16 +- ...len-Tu.team-member.mdx => 01-kallen-tu.md} | 10 +- ...Parikh.team-member.mdx => 02-gordon-le.md} | 10 +- ...n-Le.team-member.mdx => 03-neil-parikh.md} | 10 +- ...rg.team-member.mdx => 04-nakul-vijhani.md} | 10 +- .../meet-the-team/execs/05-max-erenberg.md | 7 + .../execs/Ravindu-Angammana.team-member.mdx | 7 - lib/team.ts | 28 +++ pages/about/team.tsx | 215 +++++++----------- 13 files changed, 153 insertions(+), 205 deletions(-) rename content/meet-the-team/execs/{Kallen-Tu.team-member.mdx => 01-kallen-tu.md} (70%) rename content/meet-the-team/execs/{Neil-Parikh.team-member.mdx => 02-gordon-le.md} (70%) rename content/meet-the-team/execs/{Gordon-Le.team-member.mdx => 03-neil-parikh.md} (69%) rename content/meet-the-team/execs/{Max-Erenberg.team-member.mdx => 04-nakul-vijhani.md} (67%) create mode 100644 content/meet-the-team/execs/05-max-erenberg.md delete mode 100644 content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx create mode 100644 lib/team.ts diff --git a/components/Bubble.tsx b/components/Bubble.tsx index 39d7094b..d9db8e39 100644 --- a/components/Bubble.tsx +++ b/components/Bubble.tsx @@ -2,7 +2,7 @@ import React from "react"; import { DefaultLayout } from "./DefaultLayout"; import styles from "./Bubble.module.css"; -export default function Bubble(props: { children: React.ReactNode }) { +export function Bubble(props: { children: React.ReactNode }) { return (
{props.children} diff --git a/components/TeamMember.module.css b/components/TeamMember.module.css index 0a764cb8..f2134c8d 100644 --- a/components/TeamMember.module.css +++ b/components/TeamMember.module.css @@ -6,21 +6,12 @@ } .img { + width: 100%; border-radius: 50%; margin: 0 auto; object-fit: cover; } -.img_small { - width: calc(110rem / 16); - height: calc(110rem / 16); -} - -.img_medium { - width: calc(130rem / 16); - height: calc(130rem / 16); -} - .caption { text-align: center; margin-top: calc(24rem / 16); @@ -35,22 +26,3 @@ font-weight: 600; color: var(--purple-2); } - -@media only screen and (max-width: calc(768rem / 16)) { - .container { - width: min-content; - } - - .img_small { - width: calc(85rem / 16); - height: calc(85rem / 16); - } - - .caption { - font-size: calc(11rem / 16); - } - - .caption_medium { - font-size: calc(14rem / 16); - } -} diff --git a/components/TeamMember.tsx b/components/TeamMember.tsx index 453b097b..4de446ed 100644 --- a/components/TeamMember.tsx +++ b/components/TeamMember.tsx @@ -6,25 +6,21 @@ interface TeamMemberProps { name: string; role: string; image?: string; - size?: "small" | "medium"; } export const TeamMember: React.FC = ({ name, role, image, - size, }) => { - const imgSize = size ? "img_" + size : "img_small"; - const captionSize = size ? "caption_" + size : ""; return (
{`Picture -
+
{name}
{role}
diff --git a/components/TeamMemberCard.module.css b/components/TeamMemberCard.module.css index 3065f92c..317ebf3d 100644 --- a/components/TeamMemberCard.module.css +++ b/components/TeamMemberCard.module.css @@ -51,8 +51,7 @@ margin-top: 0; } -/* TODO: Use the correct mobile styles from figma -@media only screen and (max-width: calc(375rem / 16)) { +/* @media only screen and (max-width: calc(375rem / 16)) { .card { grid-template-columns: calc(70rem / 16) auto; grid-template-rows: auto calc(calc(14rem / 16) * 1.5 + calc(12rem / 16)) auto; diff --git a/content/about/index.mdx b/content/about/index.mdx index 2c592309..ccfa6968 100644 --- a/content/about/index.mdx +++ b/content/about/index.mdx @@ -1,4 +1,4 @@ -import Bubble from "./../../components/Bubble"; +import { Bubble } from "./../../components/Bubble"; @@ -17,13 +17,13 @@ growth. ## Our Vision 1. Academic: Promoting the knowledge and interest of Computer Science, as well -as supporting students throughout their academic experiences. + as supporting students throughout their academic experiences. 2. Career: Providing career guidance and resources to help students gain -experience and knowledge for their own job search. + experience and knowledge for their own job search. 3. Community: Encouraging interpersonal relationships through community building -and social events for all computing students. + and social events for all computing students. @@ -64,9 +64,9 @@ The CS Club office is located at room **MC 3036/3037**, in the Math & Computer Building of the University of Waterloo. - An office favorite is our $0.50 pop for members. We have a fridge in the -office which is stocked with many different kinds of pop. + office which is stocked with many different kinds of pop. - We have lots of informative books, 5 computer terminals, and an array of -knowledgeable people to talk to. + knowledgeable people to talk to. Come visit us on campus in our office! Meet new members and find out what's new in the club. @@ -77,7 +77,7 @@ Computer Science Club
Math & Computer 3036/3037
University of Waterloo
200 University Avenue West
-Waterloo, ON N2L 3G1
+Waterloo, ON N2L 3G1
Canada Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870) @@ -85,5 +85,3 @@ Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870) - - diff --git a/content/meet-the-team/execs/Kallen-Tu.team-member.mdx b/content/meet-the-team/execs/01-kallen-tu.md similarity index 70% rename from content/meet-the-team/execs/Kallen-Tu.team-member.mdx rename to content/meet-the-team/execs/01-kallen-tu.md index 6d00f0f2..45f9d8c4 100644 --- a/content/meet-the-team/execs/Kallen-Tu.team-member.mdx +++ b/content/meet-the-team/execs/01-kallen-tu.md @@ -1,7 +1,7 @@ -export const metadata = { - name: "Kallen Tu", - role: "President", - image: "/images/team/exec/Exec_KallenTu.jpg", -}; +--- +name: Kallen Tu +role: President +image: /images/team/exec/Exec_KallenTu.jpg +--- words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words diff --git a/content/meet-the-team/execs/Neil-Parikh.team-member.mdx b/content/meet-the-team/execs/02-gordon-le.md similarity index 70% rename from content/meet-the-team/execs/Neil-Parikh.team-member.mdx rename to content/meet-the-team/execs/02-gordon-le.md index 5b0e9e92..23c6a446 100644 --- a/content/meet-the-team/execs/Neil-Parikh.team-member.mdx +++ b/content/meet-the-team/execs/02-gordon-le.md @@ -1,7 +1,7 @@ -export const metadata = { - name: "Neil Parikh", - role: "Treasurer", - image: "/images/team/exec/Exec_NeilParikh.jpg", -}; +--- +name: Gordon Le +role: Vice President +image: /images/team/exec/Exec_GordonLe.jpg +--- words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words diff --git a/content/meet-the-team/execs/Gordon-Le.team-member.mdx b/content/meet-the-team/execs/03-neil-parikh.md similarity index 69% rename from content/meet-the-team/execs/Gordon-Le.team-member.mdx rename to content/meet-the-team/execs/03-neil-parikh.md index 7cab08a4..e42a9827 100644 --- a/content/meet-the-team/execs/Gordon-Le.team-member.mdx +++ b/content/meet-the-team/execs/03-neil-parikh.md @@ -1,7 +1,7 @@ -export const metadata = { - name: "Gordon Le", - role: "Vice President", - image: "/images/team/exec/Exec_GordonLe.jpg", -}; +--- +name: Neil Parikh +role: Treasurer +image: /images/team/exec/Exec_NeilParikh.jpg +--- words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words diff --git a/content/meet-the-team/execs/Max-Erenberg.team-member.mdx b/content/meet-the-team/execs/04-nakul-vijhani.md similarity index 67% rename from content/meet-the-team/execs/Max-Erenberg.team-member.mdx rename to content/meet-the-team/execs/04-nakul-vijhani.md index d514bf2c..993ab468 100644 --- a/content/meet-the-team/execs/Max-Erenberg.team-member.mdx +++ b/content/meet-the-team/execs/04-nakul-vijhani.md @@ -1,7 +1,7 @@ -export const metadata = { - name: "Max Erenberg", - role: "Systems Administrator", - image: "/images/team/exec/Exec_MaxErenberg.png", -}; +--- +name: Nakul Vijhani +role: Assistant Vice President +image: /images/team/team-member-placeholder.svg +--- words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words diff --git a/content/meet-the-team/execs/05-max-erenberg.md b/content/meet-the-team/execs/05-max-erenberg.md new file mode 100644 index 00000000..e5c68dc7 --- /dev/null +++ b/content/meet-the-team/execs/05-max-erenberg.md @@ -0,0 +1,7 @@ +--- +name: Max Erenberg +role: Systems Administrator +image: /images/team/exec/Exec_MaxErenberg.png +--- + +words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words diff --git a/content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx b/content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx deleted file mode 100644 index 34e0fc54..00000000 --- a/content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx +++ /dev/null @@ -1,7 +0,0 @@ -export const metadata = { - name: "Ravindu Angammana", - role: "Assistant Vice President", - image: "/images/team/exec/Exec_RavinduAngammana.jpg", -}; - -words words words codey words words words words codey words words words words codey words words words words codey words words words words codey words words words words words codey words words words words codey words words words words codey words words words words codey words words words diff --git a/lib/team.ts b/lib/team.ts new file mode 100644 index 00000000..e888181e --- /dev/null +++ b/lib/team.ts @@ -0,0 +1,28 @@ +import { readFile, readdir } from "fs/promises"; +import path from "path"; +import matter from "gray-matter"; +import { serialize } from "next-mdx-remote/serialize"; + +const EXECS_PATH = path.join("content", "meet-the-team", "execs"); +const fileType = ".md"; + +export interface Metadata { + name: string; + role: string; + image?: string; // path to image of person, relative to public directory +} + +export async function getExecNames() { + return (await readdir(EXECS_PATH)) + .filter((name) => name.endsWith(fileType)) + .map((name) => name.slice(0, -1 * fileType.length)); +} + +export async function getExecContent(fileName: string, convert = true) { + const raw = await readFile(path.join(EXECS_PATH, `${fileName}${fileType}`)); + const { content, data: metadata } = matter(raw); + return { + content: convert ? await serialize(content) : content, + metadata, + }; +} diff --git a/pages/about/team.tsx b/pages/about/team.tsx index c61fd7b9..84c8f0b1 100644 --- a/pages/about/team.tsx +++ b/pages/about/team.tsx @@ -1,34 +1,31 @@ -import React, { ComponentType, ReactNode, useState } from "react"; +import React from "react"; import { MDXProvider } from "@mdx-js/react"; +import { getExecContent, getExecNames, Metadata } from "../../lib/team"; +import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote"; +import { GetStaticProps } from "next"; import { Image } from "../../components/Image"; import { TeamMemberCard } from "../../components/TeamMemberCard"; import { TeamMember } from "../../components/TeamMember"; import { Link } from "../../components/Link"; +import { Bubble } from "../../components/Bubble"; import ElectionContent from "../../content/meet-the-team/elections.mdx"; import programme from "../../content/meet-the-team/programme-committee.json"; import website from "../../content/meet-the-team/website-committee.json"; import systems from "../../content/meet-the-team/systems-committee.json"; import styles from "./team.module.css"; -import KallenTu, { - metadata as KallenMetadata, -} from "../../content/meet-the-team/execs/Kallen-Tu.team-member.mdx"; -import GordonLe, { - metadata as GordonMetadata, -} from "../../content/meet-the-team/execs/Gordon-Le.team-member.mdx"; -import RavinduAngammana, { - metadata as RavinduMetadata, -} from "../../content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx"; -import NeilParikh, { - metadata as NeilMetadata, -} from "../../content/meet-the-team/execs/Neil-Parikh.team-member.mdx"; -import MaxErenberg, { - metadata as MaxMetadata, -} from "../../content/meet-the-team/execs/Max-Erenberg.team-member.mdx"; - // TODO: get hotdog for elections -export default function MeetTheTeam() { +interface SerializedExec { + content: MDXRemoteSerializeResult; + metadata: Metadata; +} + +interface Props { + execs: SerializedExec[]; +} + +export default function MeetTheTeam({ execs }: Props) { return ( <> @@ -51,37 +48,15 @@ export default function MeetTheTeam() {
- {/* {props.execs.map((exec) => { + {execs.map((exec) => { return (
- {exec.content} +
); - })} */} - - - - - - - - - - - - - - - -
-
- - - - - + })}

Programme Committee

@@ -95,10 +70,12 @@ export default function MeetTheTeam() {

Systems Committee

-
-

Elections

- -
+ +
+

Elections

+ +
+ ); @@ -108,21 +85,6 @@ interface MembersProps { team: Array; } -interface Metadata { - name: string; - role: string; - image?: string; -} - -interface MobileExecProps { - metadata: Metadata; - content: ComponentType; -} - -interface Propup extends MobileExecProps { - handleClose: () => void; -} - function MembersList(props: MembersProps) { return (
@@ -133,72 +95,65 @@ function MembersList(props: MembersProps) { ); } -function MobileExec(props: MobileExecProps) { - const [isOpen, setIsOpen] = useState(false); - const togglePopup = () => { - setIsOpen(!isOpen); - }; - return ( - <> - - {isOpen && ( - <> -
- - - )} - - ); -} - -function ExecPopup(props: Propup) { - return ( -
-
- -
- - -
-
-
- ); -} - -// -- Dynamic Import logic -- - -// import { readdirSync } from "fs"; -// import { InferGetStaticPropsType } from "next"; -// import dynamic from "next/dynamic"; - -// const files = readdirSync("content/meet-the-team/execs/") - -// const components = files.map((file) => -// dynamic(() => import("../../" + execsPath + file)) -// ); - -// props: InferGetStaticPropsType - -// export async function getStaticProps() { -// // const execs: ExecProps[] = []; -// const files = readdirSync(execsPath); -// console.log(files); -// // files.map(async (file: string) => { -// // // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -// // const exec = await import("../../" + execsPath + file); -// // exec.content = ; -// // execs.push(exec); -// // }); -// return { props: { files } }; +// interface MobileExecProps { +// metadata: Metadata; +// content: ComponentType; // } + +// interface Propup extends MobileExecProps { +// handleClose: () => void; +// } + +// function MobileExec(props: MobileExecProps) { +// const [isOpen, setIsOpen] = useState(false); +// const togglePopup = () => { +// setIsOpen(!isOpen); +// }; +// return ( +// <> +// +// {isOpen && ( +// <> +//
+// +// +// )} +// +// ); +// } + +// function ExecPopup(props: Propup) { +// return ( +//
+//
+// +//
+// +// +//
+//
+//
+// ); +// } + +export const getStaticProps: GetStaticProps = async () => { + const execNames = await getExecNames(); + const execs = (await Promise.all( + execNames.map((name) => getExecContent(name)) + )) as SerializedExec[]; + + return { + props: { execs }, + }; +};