generate img path
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
79eefba11a
commit
80cb6e3897
|
@ -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<TeamMemberProps> = ({
|
||||
name,
|
||||
role,
|
||||
image,
|
||||
}) => {
|
||||
export const TeamMember: React.FC<TeamMemberProps> = ({ name, role }) => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Image
|
||||
className={styles.img}
|
||||
src={image ?? "/images/team/team-member-placeholder.svg"}
|
||||
src={getMemberImagePath(name)}
|
||||
alt={`Picture of ${name}`}
|
||||
/>
|
||||
<div className={styles.caption}>
|
||||
|
|
|
@ -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({
|
|||
<div className={styles.picture}>
|
||||
<Image
|
||||
className={styles.image}
|
||||
src={image ?? "/images/team/team-member-placeholder.svg"}
|
||||
src={getMemberImagePath(name)}
|
||||
alt={`Picture of ${name}`}
|
||||
/>
|
||||
</div>
|
||||
|
@ -38,12 +33,7 @@ export function TeamMemberCard({
|
|||
<div className={styles.description}>{children}</div>
|
||||
</article>
|
||||
{isOpen && (
|
||||
<ExecPopup
|
||||
name={name}
|
||||
role={role}
|
||||
image={image}
|
||||
handleClick={handleClick}
|
||||
>
|
||||
<ExecPopup name={name} role={role} handleClick={handleClick}>
|
||||
{children}
|
||||
</ExecPopup>
|
||||
)}
|
||||
|
@ -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 (
|
||||
<>
|
||||
<div className={styles.popupBackground} onClick={handleClick} />
|
||||
|
@ -67,7 +57,7 @@ function ExecPopup({ name, image, role, children, handleClick }: Propup) {
|
|||
<div className={styles.picture}>
|
||||
<Image
|
||||
className={styles.popupImage}
|
||||
src={image ?? "/images/team/team-member-placeholder.svg"}
|
||||
src={getMemberImagePath(name)}
|
||||
alt={`Picture of ${name}`}
|
||||
/>
|
||||
</div>
|
||||
|
|
19
lib/team.ts
19
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;
|
||||
}
|
||||
|
|
|
@ -37,7 +37,6 @@ declare module "*.team-member.mdx" {
|
|||
interface TeamMemberMetadata {
|
||||
name: string;
|
||||
role: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const ReactComponent: ComponentType;
|
||||
|
|
Loading…
Reference in New Issue