diff --git a/app/about/[name]/page.tsx b/app/about/[name]/page.tsx index 411a2f0..afdbe29 100644 --- a/app/about/[name]/page.tsx +++ b/app/about/[name]/page.tsx @@ -1,3 +1,4 @@ +import { Fragment } from "react"; import Markdown from "markdown-to-jsx"; import { notFound } from "next/navigation"; @@ -20,16 +21,15 @@ export default function MemberPage({ params: { name } }) { <>
-

{member.bioShort}

- {member.bioContinued} + {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 970d76f..863bea9 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -6,6 +6,7 @@ import profilePics from '~/utils/profiles' export interface Member { name: string, + featured: boolean, mainPronouns: string, color: string, bioShort: string, @@ -13,35 +14,69 @@ export interface Member { } export default function About() { + const members = system.members as Member[] + const featuredMembers : Member[] = members.filter(({featured}) => featured) + const nonfeaturedMembers : Member[] = members.filter(({featured}) => !featured) + return ( <>

About Us

- {system.members.map((member: Member) => { + {featuredMembers.map((member: Member) => { const style = { "--member-color": member.color } as React.CSSProperties return (
- +

{member.name}

{member.mainPronouns}

{member.bioShort}

-

{member.readMore}

+

+ {member.readMore} +

) })} -
+

- Our system is composed of the above three members. Generally you - don't have to care who is most present at any given time, as we share - memory and flow in and out of front pretty often, but we do appreciate - when people notice us individually + Generally the above three members are who interact with others + throughout our day to day. They handle our work, our social relationships, + and our broader plans for life. In addition, our system has another + internally-focused member who you will likely not meet unless you seek it out:

+ {nonfeaturedMembers.map((member: Member) => { + const style = { "--member-color": member.color } as React.CSSProperties + return ( +
+ +

{member.name}

+

{member.mainPronouns}

+

+ {member.bioShort} +

+

+ {member.readMore} +

+
+ ) + })} +

For avatar sources, see here

+ ) } diff --git a/app/page.tsx b/app/page.tsx index 9209518..eeb99af 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,7 +7,7 @@ export default function Index() {

Hi, we're tempest! And we also go by ashe. We're a median plural - system of three members, but most of the time you'll probably see us + system of four members, but most of the time you'll probably see us operating as one

diff --git a/config/system.json b/config/system.json index 5e5c44a..ad8adc3 100644 --- a/config/system.json +++ b/config/system.json @@ -2,18 +2,20 @@ "pluralkit": "aypoe", "members": [{ "name": "rose", + "featured": true, "mainPronouns": "they/them", "bioShort": "web developer and system administrator, i'm the part of us that spends most of my time online and maintains our technical infrastructure", "readMore": "read my docs", "bioContinued": "it's become my responsibility to get and hold down a job for us, although when i have spare energy from that i like to work on coding, websites, and other technical persuits\n\npersonality-wise i've been told i can be a bit brash — i think i'm more of a tease but it is what it is", "color": "#df5c87", "bioFields": [ - {"name": "names:", "value": "rose"}, + {"name": "names:", "value": "rose, rosalyn, occasionally callista"}, {"name": "pronouns:", "value": "they/them. very occasionally she/her but i'm not usually in the mood"}, {"name": "orientation:", "value": "the hell if i know"} ] },{ "name": "Dawn", + "featured": true, "mainPronouns": "she/her", "bioShort": "As our artist, our performer, and our orator I'm the one of us who maintains in-person relationships and makes sure we care for each other", "bioContinued": "Historically I was also the system member responsible for masking the others, but that isn't a role I take as often these days\n\nIf we speak in person, I'm probably involved at some point in that conversation", @@ -27,14 +29,27 @@ },{ "name": "echo", "mainPronouns": "it/its", - "bioShort": "hi! echo is the one who catalogues and digs through our understanding of the outside world", + "bioShort": "hi! echo is the one who catalogues and digs through our understanding of the outside world\n\nfavors speaking in third person", "bioContinued": "", "readMore": "see the archive", "color": "#67d4b3", "bioFields": [ - {"name": "names:", "value": "echo"}, - {"name": "pronouns:", "value": "it/its, most neopronouns okay"}, + {"name": "name:", "value": "echo"}, + {"name": "pronouns:", "value": "it/its, “that one”, most neopronouns okay"}, {"name": "orientation:", "value": "aroace"} ] + },{ + "name": "Corona", + "featured": true, + "mainPronouns": "they/she", + "bioShort": "I'm sort of the system protector, but in lieu of something to protect against I'm usually the one planning for the future", + "bioContinued": "I'm developing a reputation for being the grumpy one, but I promise I *usually* don't bite\n\n", + "readMore": "Get to know me", + "color": "#7a81be", + "bioFields": [ + {"name": "Names:", "value": "Corona (previously known as Harrow)"}, + {"name": "Pronouns:", "value": "she/her or they/them with equal preference"}, + {"name": "Orientation", "value": "Indeterminate"} + ] }] } diff --git a/images/profile/corona.png b/images/profile/corona.png new file mode 100644 index 0000000..3a236bc Binary files /dev/null and b/images/profile/corona.png differ diff --git a/styles/about.module.css b/styles/about.module.css index ba24fc7..981b519 100644 --- a/styles/about.module.css +++ b/styles/about.module.css @@ -40,6 +40,7 @@ .member p { margin-top: 0; + white-space: pre-wrap; } .member .pronouns { @@ -67,21 +68,25 @@ flex-direction: column; align-items: center; margin-top: 0; - --text-padding: 8px; } .member { - max-width: 600px; - width: calc(100% - var(--text-padding)); + max-width: calc(600px - 2 * var(--text-padding)); + width: calc(100% - 2 * var(--text-padding)); display: grid; - grid-template-columns: max(100px, 30%) 1fr; - grid-template-rows: 30px 70px 1fr 30px; + grid-template-columns: calc(80px + 2 * var(--text-padding)) 1fr 8px; + grid-template-rows: 48px 70px 1fr 8px 36px; + padding: 0; + margin: 0; } .member h2 { + margin-top: 8px; grid-row: 1; - grid-column: 1/3; - text-align: center; + grid-column: 2/3; + text-align: left; + border-bottom: solid 1px currentcolor; + margin-bottom: 8px; } .member:not(:last-child){ @@ -98,15 +103,21 @@ .member .pronouns { grid-column: 1; + grid-row: 3/7; } .member .bio { grid-column: 2; - grid-row: 2/4; + grid-row: 2/5; + } + + .member p { + margin-bottom: 8px; } .member p:last-child { grid-column: 1/3; + grid-row: 5/7; } .summary { @@ -114,3 +125,45 @@ width: 100%; } } + +.member.lower { + max-width: 600px; + width: 100%; + display: grid; + grid-template-columns: calc(80px + 2 * var(--text-padding)) 1fr 8px; + grid-template-rows: 48px 70px 1fr 8px 36px; + padding: 0; + margin: 0; +} + +.member.lower h2 { + margin-top: 8px; + grid-row: 1; + grid-column: 2/3; + text-align: left; + border-bottom: solid 1px currentcolor; + margin-bottom: 8px; +} + +.member.lower img { + width: 80px; + height: auto; + margin-top: 16px; + grid-row: 1/3; + grid-column: 1; +} + +.member.lower .pronouns { + grid-column: 1; + grid-row: 3/7; +} + +.member.lower .bio { + grid-column: 2; + grid-row: 2/5; +} + +.member.lower p:last-child { + grid-column: 1/3; + grid-row: 5/7; +} diff --git a/utils/profiles.ts b/utils/profiles.ts index ec3535a..06302a2 100644 --- a/utils/profiles.ts +++ b/utils/profiles.ts @@ -1,7 +1,8 @@ import rose from '~/images/profile/rose.png' import dawn from '~/images/profile/dawn.png' import echo from '~/images/profile/echo.png' +import corona from '~/images/profile/corona.png' export default { - rose, dawn, echo + rose, dawn, echo, corona }