From ce289294a03a1eb28da48cdb4cddc5124053aaa3 Mon Sep 17 00:00:00 2001 From: Ashelyn Rose Date: Tue, 9 May 2023 03:13:56 -0600 Subject: [PATCH] about pages, added profile pictures --- app/about/[name]/page.tsx | 34 ++++++++++++++++++++++++++ app/about/page.tsx | 9 ++++--- components/InfoBar/InfoBar.module.css | 30 ++++++++++++++++++++++- components/InfoBar/index.tsx | 25 +++++++++++++++---- config/system.json | 27 +++++++++++++++----- images/profile/dawn.png | Bin 0 -> 279520 bytes images/profile/echo.png | Bin 0 -> 1096194 bytes images/profile/rose.png | Bin 0 -> 598710 bytes styles/about.module.css | 1 + utils/profiles.ts | 7 ++++++ 10 files changed, 117 insertions(+), 16 deletions(-) create mode 100644 app/about/[name]/page.tsx create mode 100644 images/profile/dawn.png create mode 100644 images/profile/echo.png create mode 100644 images/profile/rose.png create mode 100644 utils/profiles.ts diff --git a/app/about/[name]/page.tsx b/app/about/[name]/page.tsx new file mode 100644 index 0000000..625af62 --- /dev/null +++ b/app/about/[name]/page.tsx @@ -0,0 +1,34 @@ +import Markdown from "markdown-to-jsx"; +import { notFound } from "next/navigation"; + +import InfoBar from "~/components/InfoBar"; + +import styles from "~/styles/index.module.css" +import system from "~/config/system.json" + +export default function MemberPage({ params: { name } }) { + const member = system.members.find(member => member.name.toLowerCase() === name) + + if (!member) notFound() + + return ( + <> +
+ +

{member.bioShort}

+ {member.bioContinued} + {member.bioFields?.length && ( + +
+ {member.bioFields.map(({ name, value }) => ( + <> + {name} + {value} + + ))} +
+ )} +
+ + ) +} diff --git a/app/about/page.tsx b/app/about/page.tsx index 82d4864..57b9aa7 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,11 +1,12 @@ -import system from '~/config/system.json' +import Image from 'next/image' +import system from '~/config/system.json' import styles from '~/styles/about.module.css' +import profilePics from '~/utils/profiles' -interface Member { +export interface Member { name: string, mainPronouns: string, - avatarUrl: string, color: string, bioShort: string, readMore: string, @@ -22,7 +23,7 @@ export default function About() { const style = { "--member-color": member.color } as React.CSSProperties return (
- +

{member.name}

{member.mainPronouns}

diff --git a/components/InfoBar/InfoBar.module.css b/components/InfoBar/InfoBar.module.css index 7786bd1..523bf42 100644 --- a/components/InfoBar/InfoBar.module.css +++ b/components/InfoBar/InfoBar.module.css @@ -21,14 +21,42 @@ color: var(--text-dimmed); } +.infobar.postMeta img { + box-sizing: border-box; + border: solid 2px var(--author-color, var(--text-dimmed)); + width: 30px; + height: 30px; + border-radius: 15px; + margin-right: calc(.5 * var(--text-padding)); + margin-left: -6px; +} + .infobar.postMeta .author { - color: var(--text-medium); + color: var(--author-color, var(--text-medium)); } .infobar.postMeta .date { font-style: italic; } +.infobar.memberProfile img { + width: 150px; + height: 150px; + border-radius: 75px; + box-sizing: border-box; + border: solid 4px var(--member-color, var(--text-dimmed)); + margin-right: var(--text-padding); + margin-top: calc(-2.5 * var(--text-padding)); +} + +.infobar.memberProfile h1 { + color: var(--member-color, var(--text-bright)); +} + .infobar + p { margin-top: 0; } + +.infobar.memberProfile { + margin-bottom: 42px; +} diff --git a/components/InfoBar/index.tsx b/components/InfoBar/index.tsx index cb5ac9a..2901883 100644 --- a/components/InfoBar/index.tsx +++ b/components/InfoBar/index.tsx @@ -1,4 +1,8 @@ import { ReactNode } from 'react' +import Image from 'next/image' + +import system from '~/config/system.json' +import profilePics from '~/utils/profiles' import styles from './InfoBar.module.css' interface ArbitraryChildrenProps { @@ -15,8 +19,7 @@ interface PostInfoPros { } interface SystemMemberInfoProps { - memberName: string, - memberAvatar: string + memberName: string } type InfobarProps = ( @@ -36,8 +39,14 @@ export default function InfoBar(props: InfobarProps) { } if ('authorName' in props) { + const authorKey = props.authorName.toLowerCase() + const author = system.members.find((member) => member.name === props.authorName) + const style = { '--author-color': author?.color } as React.CSSProperties + const picture = profilePics[authorKey] + return ( -