diff --git a/components/TeamMember.tsx b/components/TeamMember.tsx index 4de446ed..882894ae 100644 --- a/components/TeamMember.tsx +++ b/components/TeamMember.tsx @@ -1,23 +1,19 @@ import React from "react"; import styles from "./TeamMember.module.css"; import { Image } from "./Image"; +import { getMemberImagePath } from "../lib/team"; interface TeamMemberProps { name: string; role: string; - image?: string; } -export const TeamMember: React.FC = ({ - name, - role, - image, -}) => { +export const TeamMember: React.FC = ({ name, role }) => { return (
{`Picture
diff --git a/components/TeamMemberCard.tsx b/components/TeamMemberCard.tsx index 3bbc6689..ce77c615 100644 --- a/components/TeamMemberCard.tsx +++ b/components/TeamMemberCard.tsx @@ -2,20 +2,15 @@ import React, { useState } from "react"; import { Image } from "./Image"; import { useWindowDimension } from "../hooks/useWindowDimension"; import styles from "./TeamMemberCard.module.css"; +import { getMemberImagePath } from "../lib/team"; export interface TeamMemberCardProps { name: string; role: string; - image?: string; // path to image of person, relative to public directory children: React.ReactNode; } -export function TeamMemberCard({ - name, - image, - role, - children, -}: TeamMemberCardProps) { +export function TeamMemberCard({ name, role, children }: TeamMemberCardProps) { const { width } = useWindowDimension(); const [isOpen, setIsOpen] = useState(false); const handleClick = () => { @@ -29,7 +24,7 @@ export function TeamMemberCard({
{`Picture
@@ -38,12 +33,7 @@ export function TeamMemberCard({
{children}
{isOpen && ( - + {children} )} @@ -55,7 +45,7 @@ interface Propup extends TeamMemberCardProps { handleClick: () => void; } -function ExecPopup({ name, image, role, children, handleClick }: Propup) { +function ExecPopup({ name, role, children, handleClick }: Propup) { return ( <>
@@ -67,7 +57,7 @@ function ExecPopup({ name, image, role, children, handleClick }: Propup) {
{`Picture
diff --git a/lib/team.ts b/lib/team.ts index 8f33db2f..2952e721 100644 --- a/lib/team.ts +++ b/lib/team.ts @@ -1,7 +1,7 @@ -import { readFile, readdir } from "fs/promises"; +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"; @@ -9,7 +9,6 @@ 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() { @@ -26,3 +25,17 @@ export async function getExec(fileName: string, convert = true) { metadata, }; } + +export function getMemberImagePath(name: string) { + const imgPath = "/images/team/" + name.replace(" ", "") + ".jpg"; + const placeholder = "/images/team/team-member-placeholder.svg"; + let img; + access(imgPath) + .then(() => { + img = imgPath; + }) + .catch(() => { + img = placeholder; + }); + return img; +} diff --git a/types.d.ts b/types.d.ts index e79f50d9..2ec5b354 100644 --- a/types.d.ts +++ b/types.d.ts @@ -37,7 +37,6 @@ declare module "*.team-member.mdx" { interface TeamMemberMetadata { name: string; role: string; - image?: string; } const ReactComponent: ComponentType;