dynamic importing!!

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

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

components/TeamMember.tsx

@@ -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]}
+        className={styles.img}
-        src={image ?? "/images/team-member-placeholder.svg"}
+        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>

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;

content/about/index.mdx

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

content/meet-the-team/execs/01-kallen-tu.md

@@ -1,7 +1,7 @@
-export const metadata = {
+---
-  name: "Kallen Tu",
+name: Kallen Tu
-  role: "President",
+role: President
-  image: "/images/team/exec/Exec_KallenTu.jpg",
+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

content/meet-the-team/execs/02-gordon-le.md

@@ -1,7 +1,7 @@
-export const metadata = {
+---
-  name: "Neil Parikh",
+name: Gordon Le
-  role: "Treasurer",
+role: Vice President
-  image: "/images/team/exec/Exec_NeilParikh.jpg",
+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

content/meet-the-team/execs/03-neil-parikh.md

@@ -1,7 +1,7 @@
-export const metadata = {
+---  
-  name: "Gordon Le",
+name: Neil Parikh
-  role: "Vice President",
+role: Treasurer
-  image: "/images/team/exec/Exec_GordonLe.jpg",
+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

content/meet-the-team/execs/04-nakul-vijhani.md

@@ -1,7 +1,7 @@
-export const metadata = {
+---
-  name: "Max Erenberg",
+name: Nakul Vijhani
-  role: "Systems Administrator",
+role: Assistant Vice President
-  image: "/images/team/exec/Exec_MaxErenberg.png",
+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

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

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

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

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

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 (
     <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) {
+// interface MobileExecProps {
-  const [isOpen, setIsOpen] = useState(false);
+//   metadata: Metadata;
-  const togglePopup = () => {
+//   content: ComponentType;
-    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 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 },
+  };
+};