www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

dynamic importing!!

This commit is contained in:
b38peng 2021-07-23 20:48:02 -03:00
parent 1a0ab90b11
commit 801a200664
13 changed files with 153 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Bubble.tsx
View File

@ -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 (
<div className={styles.bubble}>
<DefaultLayout>{props.children}</DefaultLayout>

30
components/TeamMember.module.css
View File

@ -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);
}
}

10
components/TeamMember.tsx
View File

@ -6,25 +6,21 @@ interface TeamMemberProps {
name: string;
role: string;
image?: string;
size?: "small" | "medium";
}
export const TeamMember: React.FC<TeamMemberProps> = ({
name,
role,
image,
size,
}) => {
const imgSize = size ? "img_" + size : "img_small";
const captionSize = size ? "caption_" + size : "";
return (
<div className={styles.container}>
<Image
className={styles.img + " " + styles[imgSize]}
src={image ?? "/images/team-member-placeholder.svg"}
className={styles.img}
src={image ?? "/images/team/team-member-placeholder.svg"}
alt={`Picture of ${name}`}
/>
<div className={styles.caption + " " + styles[captionSize]}>
<div className={styles.caption}>
<div className={styles.name}>{name}</div>
<div className={styles.role}>{role}</div>
</div>

3
components/TeamMemberCard.module.css
View File

@ -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;

16
content/about/index.mdx
View File

@ -1,4 +1,4 @@
import Bubble from "./../../components/Bubble";
import { Bubble } from "./../../components/Bubble";
<Bubble>
@ -17,13 +17,13 @@ growth.
## Our <span>Vision</span>
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.
</Bubble>
@ -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 <br />
Math & Computer 3036/3037 <br />
University of Waterloo <br />
200 University Avenue West <br />
Waterloo, ON N2L 3G1 <br />
Waterloo, ON N2L 3G1 <br />
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)
</address>
</Bubble>

10
content/meet-the-team/execs/Kallen-Tu.team-member.mdx → content/meet-the-team/execs/01-kallen-tu.md
View File

@ -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

10
content/meet-the-team/execs/Neil-Parikh.team-member.mdx → content/meet-the-team/execs/02-gordon-le.md
View File

@ -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

10
content/meet-the-team/execs/Gordon-Le.team-member.mdx → content/meet-the-team/execs/03-neil-parikh.md
View File

@ -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

10
content/meet-the-team/execs/Max-Erenberg.team-member.mdx → content/meet-the-team/execs/04-nakul-vijhani.md
View File

@ -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

7
content/meet-the-team/execs/05-max-erenberg.md Normal file
View File

@ -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

7
content/meet-the-team/execs/Ravindu-Angammana.team-member.mdx
View File

@ -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

28
lib/team.ts Normal file
View File

@ -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,
};
}

215
pages/about/team.tsx
View File

@ -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 (
<MDXProvider components={{}}>
<>
@ -51,37 +48,15 @@ export default function MeetTheTeam() {
<Image src="images/team/team-codey.svg" className={styles.codey} />
</div>
<div className={styles.execsDesktop} id="execs">
{/* {props.execs.map((exec) => {
{execs.map((exec) => {
return (
<div key={exec.metadata.name}>
<TeamMemberCard {...exec.metadata}>
{exec.content}
<MDXRemote {...exec.content} />
</TeamMemberCard>
</div>
);
})} */}
<TeamMemberCard {...KallenMetadata}>
<KallenTu />
</TeamMemberCard>
<TeamMemberCard {...GordonMetadata}>
<GordonLe />
</TeamMemberCard>
<TeamMemberCard {...RavinduMetadata}>
<RavinduAngammana />
</TeamMemberCard>
<TeamMemberCard {...NeilMetadata}>
<NeilParikh />
</TeamMemberCard>
<TeamMemberCard {...MaxMetadata}>
<MaxErenberg />
</TeamMemberCard>
</div>
<div className={styles.execsMobile} id="execs">
<MobileExec metadata={KallenMetadata} content={KallenTu} />
<MobileExec metadata={GordonMetadata} content={GordonLe} />
<MobileExec metadata={RavinduMetadata} content={RavinduAngammana} />
<MobileExec metadata={NeilMetadata} content={NeilParikh} />
<MobileExec metadata={MaxMetadata} content={MaxErenberg} />
})}
</div>
<div className={styles.programme} id="programme">
<h2 className={styles.subheading}>Programme Committee</h2>
@ -95,10 +70,12 @@ export default function MeetTheTeam() {
<h2 className={styles.subheading}>Systems Committee</h2>
<MembersList team={systems} />
</div>
<div className={styles.elections}>
<h2 className={styles.electionSubheading}>Elections</h2>
<ElectionContent />
</div>
<Bubble>
<div className={styles.elections}>
<h2 className={styles.electionSubheading}>Elections</h2>
<ElectionContent />
</div>
</Bubble>
</>
</MDXProvider>
);
@ -108,21 +85,6 @@ interface MembersProps {
team: Array<Metadata>;
}
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 (
<div className={styles.members}>
@ -133,72 +95,65 @@ function MembersList(props: MembersProps) {
);
}
function MobileExec(props: MobileExecProps) {
const [isOpen, setIsOpen] = useState(false);
const togglePopup = () => {
setIsOpen(!isOpen);
};
return (
<>
<button
className={styles.reset_button + " " + styles.execButton}
onClick={togglePopup}
>
<TeamMember {...props.metadata} size="medium" />
</button>
{isOpen && (
<>
<div className={styles.popup_background} onClick={togglePopup}></div>
<ExecPopup
metadata={props.metadata}
content={props.content}
handleClose={togglePopup}
/>
</>
)}
</>
);
}
function ExecPopup(props: Propup) {
return (
<div className={styles.popup_container}>
<div className={styles.popup_content}>
<button className={styles.reset_button} onClick={props.handleClose}>
<Image src="images/team/popup-close.svg" className={styles.close} />
</button>
<div className={styles.exec}>
<TeamMember {...props.metadata} size="medium" />
<props.content />
</div>
</div>
</div>
);
}
// -- 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<typeof getStaticProps>
// 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 = <exec.default />;
// // 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 (
// <>
// <button
// className={styles.reset_button + " " + styles.execButton}
// onClick={togglePopup}
// >
// <TeamMember {...props.metadata} size="medium" />
// </button>
// {isOpen && (
// <>
// <div className={styles.popup_background} onClick={togglePopup}></div>
// <ExecPopup
// metadata={props.metadata}
// content={props.content}
// handleClose={togglePopup}
// />
// </>
// )}
// </>
// );
// }
// function ExecPopup(props: Propup) {
// return (
// <div className={styles.popup_container}>
// <div className={styles.popup_content}>
// <button className={styles.reset_button} onClick={props.handleClose}>
// <Image src="images/team/popup-close.svg" className={styles.close} />
// </button>
// <div className={styles.exec}>
// <TeamMember {...props.metadata} size="medium" />
// <props.content />
// </div>
// </div>
// </div>
// );
// }
export const getStaticProps: GetStaticProps<Props> = async () => {
const execNames = await getExecNames();
const execs = (await Promise.all(
execNames.map((name) => getExecContent(name))
)) as SerializedExec[];
return {
props: { execs },
};
};