www
/
www-new
12
2
Fork 3
Code Issues 56 Pull Requests 29 Projects Releases Wiki Activity

pr fixes yay
continuous-integration/drone/push Build is failing
Details

Browse Source
pull/94/head
b38peng 2 years ago
parent bc27350e9d
commit aa47644d41
8 changed files with 136 additions and 122 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      .vscode/settings.json
  2. 2
      components/TeamMember.tsx
  3. 59
      components/TeamMemberCard.tsx
  4. 22
      components/playground.tsx
  5. 3
      lib/team.ts
  6. 16
      pages/about/team.module.css
  7. 127
      pages/about/team.tsx
  8. 20
      tsconfig.json

9
.vscode/settings.json vendored
Unescape View File

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

2
components/TeamMember.tsx
Unescape View File

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

59
components/TeamMemberCard.tsx
Unescape View File

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

22
components/playground.tsx
Unescape View File

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

3
lib/team.ts
Unescape View File

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

16
pages/about/team.module.css
Unescape View File

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

127
pages/about/team.tsx
Unescape View File

@ -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 (
<>
<div className={styles.headerContainer}>
<div className={styles.headerTextContainer}>
<h1 className={styles.header}>Meet the Team!</h1>
<div className={styles.nav}>
<Link href="#execs">The Executives</Link>
<Link href="#programme">Programme Committee</Link>
<Link href="#website">Website Committee</Link>
<Link href="#system">Systems Committee</Link>
<DefaultLayout>
<div className={styles.headerContainer}>
<div className={styles.headerTextContainer}>
<h1 className={styles.header}>Meet the Team!</h1>
<div className={styles.nav}>
<Link href="#execs">The Executives</Link>
<Link href="#programme">Programme Committee</Link>
<Link href="#website">Website Committee</Link>
<Link href="#system">Systems Committee</Link>
</div>
<h2
className={styles.subheading}
style={{ borderBottom: "none", margin: 0, padding: 0 }}
>
The Executives
</h2>
</div>
<h2
className={styles.subheading}
style={{ borderBottom: "none", margin: 0, padding: 0 }}
>
The Executives
</h2>
<Image src="images/team/team-codey.svg" className={styles.codey} />
</div>
<Image src="images/team/team-codey.svg" className={styles.codey} />
</div>
<div className={styles.execs} id="execs">
{execs.map((exec) => {
return (
<div key={exec.metadata.name}>
<TeamMemberCard {...exec.metadata}>
<MDXRemote {...exec.content} />
</TeamMemberCard>
</div>
);
})}
</div>
<div id="programme">
<h2 className={styles.subheading}>Programme Committee</h2>
<MembersList team={programme} />
</div>
<div id="website">
<h2 className={styles.subheading}>Website Committee</h2>
<MembersList team={website} />
</div>
<div id="system">
<h2 className={styles.subheading}>Systems Committee</h2>
<MembersList team={systems} />
</div>
<Bubble>
<div className={styles.elections}>
<div className={styles.execs} id="execs">
{execs.map((exec) => {
return (
<div key={exec.metadata.name}>
<TeamMemberCard {...exec.metadata}>
<MDXRemote {...exec.content} />
</TeamMemberCard>
</div>
);
})}
</div>
<div id="programme">
<h2 className={styles.subheading}>Programme Committee</h2>
<MembersList team={programme} />
</div>
<div id="website">
<h2 className={styles.subheading}>Website Committee</h2>
<MembersList team={website} />
</div>
<div id="system">
<h2 className={styles.subheading}>Systems Committee</h2>
<MembersList team={systems} />
</div>
</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>
</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 },

20
tsconfig.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save