pr fixes yay

.vscode/settings.json

@@ -4,9 +4,7 @@
   "eslint.codeActionsOnSave.mode": "all",
   "[css]": {
     "editor.suggest.insertMode": "replace",
-    "gitlens.codeLens.scopes": [
-      "document"
-    ],
+    "gitlens.codeLens.scopes": ["document"],
     "editor.formatOnSave": true
   },
   "[javascript]": {
@@ -38,5 +36,6 @@
   "files.exclude": {
     "node_modules": true
   },
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "files.eol": "\n"
 }

components/TeamMember.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { Image } from "./Image";
+
 import styles from "./TeamMember.module.css";
 
 interface TeamMemberProps {

components/TeamMemberCard.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
+
+import { useWindowDimension } from "@/hooks/useWindowDimension";
+
 import { Image } from "./Image";
-import { useWindowDimension } from "../hooks/useWindowDimension";
+
 import styles from "./TeamMemberCard.module.css";
 
 export interface TeamMemberCardProps {
@@ -10,6 +13,35 @@ export interface TeamMemberCardProps {
   children: React.ReactNode;
 }
 
+interface TeamMemberInfoProps extends TeamMemberCardProps {
+  isPopup?: boolean;
+}
+
+function TeamMemberInfo({
+  name,
+  role,
+  image,
+  children,
+  isPopup = false,
+}: TeamMemberInfoProps) {
+  return (
+    <>
+      <div className={styles.picture}>
+        <Image
+          className={isPopup ? styles.popupImage : styles.image}
+          src={image}
+          alt={`Picture of ${name}`}
+        />
+      </div>
+      <h1 className={isPopup ? styles.popupName : styles.name}>{name}</h1>
+      <h2 className={isPopup ? styles.popupRole : styles.role}>{role}</h2>
+      <div className={isPopup ? styles.popupDescription : styles.description}>
+        {children}
+      </div>
+    </>
+  );
+}
+
 export function TeamMemberCard({
   name,
   role,
@@ -26,17 +58,9 @@ export function TeamMemberCard({
   return (
     <>
       <article className={styles.card} onClick={handleClick}>
-        <div className={styles.picture}>
-          <Image
-            className={styles.image}
-            src={image}
-            alt={`Picture of ${name}`}
-          />
-        </div>
-        <h1 className={styles.name}>{name}</h1>
-        <h2 className={styles.role}>{role}</h2>
-        <div className={styles.description}>{children}</div>
+        <TeamMemberInfo {...{ name, role, image }}>{children}</TeamMemberInfo>
       </article>
+
       {isOpen && (
         <ExecPopup
           name={name}
@@ -64,16 +88,9 @@ function ExecPopup({ name, role, image, children, handleClick }: Propup) {
           <Image src="images/team/popup-close.svg" />
         </button>
         <div className={styles.popupContent}>
-          <div className={styles.picture}>
-            <Image
-              className={styles.popupImage}
-              src={image}
-              alt={`Picture of ${name}`}
-            />
-          </div>
-          <h1 className={styles.popupName}>{name}</h1>
-          <h2 className={styles.popupRole}>{role}</h2>
-          <div className={styles.popupDescription}>{children}</div>
+          <TeamMemberInfo {...{ name, role, image }} isPopup={true}>
+            {children}
+          </TeamMemberInfo>
         </div>
       </div>
     </>

components/playground.tsx

@@ -162,16 +162,16 @@ export function TeamMemberDemo() {
       </div>
       <hr />
       <div className={styles.teamMembers}>
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
-        <TeamMember {...dogeMetadata} />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
+        <TeamMember {...dogeMetadata} image="/images/playground/doge.jpg" />
       </div>
     </div>
   );
@@ -180,7 +180,7 @@ export function TeamMemberDemo() {
 export function TeamMemberCardDemo() {
   return (
     <div className={styles.teamMemberCardDemo}>
-      <TeamMemberCard {...codeyMetadata}>
+      <TeamMemberCard {...codeyMetadata} image="/images/playground/doge.jpg">
         <CodeyInfo />
       </TeamMemberCard>
     </div>

lib/team.ts

@@ -1,7 +1,8 @@
 import { readFile, readdir, access } from "fs/promises";
-import { serialize } from "next-mdx-remote/serialize";
 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";

pages/about/team.module.css

@@ -50,18 +50,14 @@
 }
 
 .elections {
-  margin-top: 6rem;
+  margin: 6rem 0;
 }
 
 .electionSubheading {
   color: var(--primary-accent);
   font-size: calc(36rem / 16);
   font-weight: 600;
-}
-
-.elections > p {
-  margin: 0;
-  line-height: 1.875;
+  margin-top: 0;
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
@@ -95,14 +91,12 @@
     padding-bottom: calc(15rem / 16);
   }
 
-  .execs, .members {
+  .execs,
+  .members {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(calc(130rem / 16), 1fr));
     justify-items: center;
-  }
-
-  .elections {
-    padding: 2rem;
+    column-gap: 0;
   }
 
   .electionSubheading {

pages/about/team.tsx

@@ -1,24 +1,27 @@
+import { GetStaticProps } from "next";
+import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import React from "react";
+
+import { Bubble } from "@/components/Bubble";
+import { DefaultLayout } from "@/components/DefaultLayout";
+import { Image } from "@/components/Image";
+import { Link } from "@/components/Link";
+import { TeamMember } from "@/components/TeamMember";
+import { TeamMemberCard } from "@/components/TeamMemberCard";
 import {
   getExec,
   getExecNames,
   Metadata,
   getMemberImagePath,
-} 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";
+} from "@/lib/team";
+
 import programmeData from "../../content/meet-the-team/programme-committee.json";
-import websiteData from "../../content/meet-the-team/website-committee.json";
 import systemsData from "../../content/meet-the-team/systems-committee.json";
+import websiteData from "../../content/meet-the-team/website-committee.json";
+
 import styles from "./team.module.css";
 
-// TODO: fix hotdog for elections
-//       change News link in elections to point to News page
+// TODO: link News page in Elections
 
 interface SerializedExec {
   content: MDXRemoteSerializeResult;
@@ -35,6 +38,7 @@ interface Props {
 export default function Team({ execs, programme, website, systems }: Props) {
   return (
     <>
+      <DefaultLayout>
         <div className={styles.headerContainer}>
           <div className={styles.headerTextContainer}>
             <h1 className={styles.header}>Meet the Team!</h1>
@@ -76,19 +80,24 @@ export default function Team({ execs, programme, website, systems }: Props) {
           <h2 className={styles.subheading}>Systems Committee</h2>
           <MembersList team={systems} />
         </div>
-      <Bubble>
+      </DefaultLayout>
       <div className={styles.elections}>
+        <Bubble>
           <h2 className={styles.electionSubheading}>Elections</h2>
           To find out when and where the next elections will be held, keep an
           eye on on the <Link href="">News</Link>. <br />
           For details on the elections, read our
           <Link href="/about/constitution"> Constitution</Link>
-        </div>
         </Bubble>
+      </div>
     </>
   );
 }
 
+Team.Layout = function TeamLayout(props: { children: React.ReactNode }) {
+  return <div>{props.children}</div>;
+};
+
 interface MembersProps {
   team: Metadata[];
 }
@@ -103,7 +112,7 @@ function MembersList(props: MembersProps) {
   );
 }
 
-async function getMemberImage(team: Omit<Metadata, "image">[]) {
+async function getTeamWithImages(team: Omit<Metadata, "image">[]) {
   return await Promise.all(
     team.map(async (member) => {
       const image = await getMemberImagePath(member.name);
@@ -120,9 +129,11 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   const execs = (await Promise.all(
     execNames.map((name) => getExec(name))
   )) as SerializedExec[];
-  const programme = await getMemberImage(programmeData);
-  const website = await getMemberImage(websiteData);
-  const systems = await getMemberImage(systemsData);
+  const [programme, website, systems] = await Promise.all([
+    getTeamWithImages(programmeData),
+    getTeamWithImages(websiteData),
+    getTeamWithImages(systemsData),
+  ]);
 
   return {
     props: { execs, programme, website, systems },

tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -26,16 +22,10 @@
     "strictFunctionTypes": true,
     "paths": {
       "@/components/*": ["components/*"],
-      "@/lib/*": ["lib/*"]
+      "@/lib/*": ["lib/*"],
+      "@/hooks/*": ["hooks/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "types.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "types.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }