diff --git a/.vscode/settings.json b/.vscode/settings.json
index 68d9b3b3..f41fcec7 100644
--- a/.vscode/settings.json
+++ b/.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
-}
\ No newline at end of file
+ "editor.tabSize": 2,
+ "files.eol": "\n"
+}
diff --git a/components/TeamMember.tsx b/components/TeamMember.tsx
index 49bc267a..9ff19891 100644
--- a/components/TeamMember.tsx
+++ b/components/TeamMember.tsx
@@ -1,5 +1,7 @@
import React from "react";
+
import { Image } from "./Image";
+
import styles from "./TeamMember.module.css";
interface TeamMemberProps {
diff --git a/components/TeamMemberCard.tsx b/components/TeamMemberCard.tsx
index df12f73d..ab2faf13 100644
--- a/components/TeamMemberCard.tsx
+++ b/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 (
+ <>
+
+
+
+ {name}
+ {role}
+
+ {children}
+
+ >
+ );
+}
+
export function TeamMemberCard({
name,
role,
@@ -26,17 +58,9 @@ export function TeamMemberCard({
return (
<>
-
-
-
- {name}
- {role}
- {children}
+ {children}
+
{isOpen && (
-
-
-
-
{name}
-
{role}
-
{children}
+
+ {children}
+
>
diff --git a/components/playground.tsx b/components/playground.tsx
index eeec2693..3671c125 100644
--- a/components/playground.tsx
+++ b/components/playground.tsx
@@ -162,16 +162,16 @@ export function TeamMemberDemo() {
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
);
@@ -180,7 +180,7 @@ export function TeamMemberDemo() {
export function TeamMemberCardDemo() {
return (
-
+
diff --git a/lib/team.ts b/lib/team.ts
index 6fa5b5af..90ab46b9 100644
--- a/lib/team.ts
+++ b/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";
diff --git a/pages/about/team.module.css b/pages/about/team.module.css
index 1a8efdb8..dfbf05de 100644
--- a/pages/about/team.module.css
+++ b/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 {
diff --git a/pages/about/team.tsx b/pages/about/team.tsx
index ff28d1b8..9fec91d2 100644
--- a/pages/about/team.tsx
+++ b/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,60 +38,66 @@ interface Props {
export default function Team({ execs, programme, website, systems }: Props) {
return (
<>
-
-
-
Meet the Team!
-
- The Executives
- Programme Committee
- Website Committee
- Systems Committee
-
-
- The Executives
-
-
-
-
-
- {execs.map((exec) => {
- return (
-
-
-
-
+
+
+
+
Meet the Team!
+
+ The Executives
+ Programme Committee
+ Website Committee
+ Systems Committee
- );
- })}
-
-
-
Programme Committee
-
-
-
-
Website Committee
-
-
-
-
Systems Committee
-
-
-
-
+
+ The Executives
+
+
+
+
+
+ {execs.map((exec) => {
+ return (
+
+
+
+
+
+ );
+ })}
+
+
+
Programme Committee
+
+
+
+
Website Committee
+
+
+
+
Systems Committee
+
+
+
+
+
Elections
To find out when and where the next elections will be held, keep an
eye on on the News.
For details on the elections, read our
Constitution
-
-
+
+
>
);
}
+Team.Layout = function TeamLayout(props: { children: React.ReactNode }) {
+ return
{props.children}
;
+};
+
interface MembersProps {
team: Metadata[];
}
@@ -103,7 +112,7 @@ function MembersList(props: MembersProps) {
);
}
-async function getMemberImage(team: Omit
[]) {
+async function getTeamWithImages(team: Omit[]) {
return await Promise.all(
team.map(async (member) => {
const image = await getMemberImagePath(member.name);
@@ -120,9 +129,11 @@ export const getStaticProps: GetStaticProps = 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 },
diff --git a/tsconfig.json b/tsconfig.json
index dd42be47..d886e684 100644
--- a/tsconfig.json
+++ b/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"]
}