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;

4
content/about/index.mdx
View File

@ -1,4 +1,4 @@
import Bubble from "./../../components/Bubble";
import { Bubble } from "./../../components/Bubble";
<Bubble>
@ -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,
};
}

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