From aa47644d41d5eebfef9106e6ca77c6ad7255cf25 Mon Sep 17 00:00:00 2001 From: b38peng Date: Wed, 18 Aug 2021 22:35:39 -0300 Subject: [PATCH] pr fixes yay --- .vscode/settings.json | 9 ++- components/TeamMember.tsx | 2 + components/TeamMemberCard.tsx | 59 ++++++++++------ components/playground.tsx | 22 +++--- lib/team.ts | 3 +- pages/about/team.module.css | 16 ++--- pages/about/team.tsx | 129 ++++++++++++++++++---------------- tsconfig.json | 20 ++---- 8 files changed, 137 insertions(+), 123 deletions(-) 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 ( + <> +
+ {`Picture +
+

{name}

+

{role}

+
+ {children} +
+ + ); +} + export function TeamMemberCard({ name, role, @@ -26,17 +58,9 @@ export function TeamMemberCard({ return ( <>
-
- {`Picture -
-

{name}

-

{role}

-
{children}
+ {children}
+ {isOpen && (
-
- {`Picture -
-

{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"] }