From 36d119f27533abc31f18a6d6f90a82b6ed53a264 Mon Sep 17 00:00:00 2001
From: madcampos <me@madcampos.dev>
Date: Wed, 4 Sep 2024 14:45:40 -0400
Subject: [PATCH 1/4] feat: add author pronouns

---
 src/content/authors/drey.md  | 1 +
 src/content/authors/marco.md | 1 +
 src/schemas/authors.ts       | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/content/authors/drey.md b/src/content/authors/drey.md
index 7a509f7..8983fa7 100644
--- a/src/content/authors/drey.md
+++ b/src/content/authors/drey.md
@@ -1,6 +1,7 @@
 ---
 name: drey moreau
 avatar: ./assets/drey.jpg
+pronouns: they/them
 avatarAlt: A picture of drey's face at sunrise.
 email: drey@torontojs.com
 website: https://dreymoreau.netlify.app
diff --git a/src/content/authors/marco.md b/src/content/authors/marco.md
index a08a2ae..eac34fd 100644
--- a/src/content/authors/marco.md
+++ b/src/content/authors/marco.md
@@ -1,6 +1,7 @@
 ---
 name: Marco Campos
 avatar: ./assets/marco.jpg
+pronouns: he/him
 avatarAlt: A picture of my face with a smile looking at the camera. I'm wearing aviator glasses, a fake fur winter hat and an orange scarf.
 email: me@madcampos.dev
 website: https://madcampos.dev/
diff --git a/src/schemas/authors.ts b/src/schemas/authors.ts
index 45acb18..a43fe5a 100644
--- a/src/schemas/authors.ts
+++ b/src/schemas/authors.ts
@@ -2,6 +2,7 @@ import { type SchemaContext, z as zod } from 'astro:content';
 
 export const authorsSchema = ({ image }: SchemaContext) => zod.object({
 	name: zod.string().describe('The author\'s name.'),
+	pronouns: zod.string().optional().describe('The author\'s pronouns.'),
 	avatar: image().describe('The avatar image to use when displaying cards.'),
 	avatarAlt: zod.string().describe('The avatar image alt text.'),
 	email: zod.string().email().optional().describe('The author\'s email, if they want to share.'),

From f43acd552768f09bd712712e8699db1982d7f0f3 Mon Sep 17 00:00:00 2001
From: madcampos <me@madcampos.dev>
Date: Wed, 4 Sep 2024 14:54:21 -0400
Subject: [PATCH 2/4] feat: add prionouns to author card

---
 src/components/AuthorCard/index.astro | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/AuthorCard/index.astro b/src/components/AuthorCard/index.astro
index e119be2..202aa2f 100644
--- a/src/components/AuthorCard/index.astro
+++ b/src/components/AuthorCard/index.astro
@@ -16,7 +16,7 @@ const { author } = Astro.props;
 const BLOG_URL = Astro.site?.href;
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const { data: { avatar, avatarAlt, name }, body } = (await getEntry('authors', author))!;
+const { data: { avatar, avatarAlt, name, pronouns }, body } = (await getEntry('authors', author))!;
 const description = await parseMarkdown(body);
 ---
 <div class="author-card" itemprop="author" itemscope itemtype="https://schema.org/Person">
@@ -24,9 +24,12 @@ const description = await parseMarkdown(body);
 		<Avatar image={avatar} imageAlt={avatarAlt} />
 	</a>
 
-	<a class="p-author h-card author-name" rel="author" itemprop="url" href={`${BLOG_URL}authors/${author}`}>
-		<h2 itemprop="name">{name}</h2>
-	</a>
+	<div class="author-name">
+		<a class="p-author h-card" rel="author" itemprop="url" href={`${BLOG_URL}authors/${author}`}>
+			<h2 itemprop="name">{name}</h2>
+		</a>
+		{pronouns && (<small>{pronouns}</small>)}
+	</div>
 
 	<div class="author-bio">
 		{/* eslint-disable-next-line astro/no-set-html-directive */}

From 32b52a121eaf5739bf4fad69dbb9dc2fbe401bdb Mon Sep 17 00:00:00 2001
From: madcampos <me@madcampos.dev>
Date: Wed, 4 Sep 2024 14:55:07 -0400
Subject: [PATCH 3/4] feat: update page header component to accomodate more
 parts

---
 src/components/PageHeader/index.astro |  4 +++
 src/components/PageHeader/styles.css  | 37 ++++++++++++++++++++++-----
 src/layouts/InternalPage/index.astro  |  2 ++
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/PageHeader/index.astro b/src/components/PageHeader/index.astro
index bcb1aa7..36e23c7 100644
--- a/src/components/PageHeader/index.astro
+++ b/src/components/PageHeader/index.astro
@@ -2,7 +2,11 @@
 import './styles.css';
 ---
 <header id="page-header">
+	<slot name="header-picture"></slot>
 	<h1>
 		<slot></slot>
 	</h1>
+	<aside>
+		<slot name="header-extra"></slot>
+	</aside>
 </header>
diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css
index 050d5ea..24bc24f 100644
--- a/src/components/PageHeader/styles.css
+++ b/src/components/PageHeader/styles.css
@@ -3,14 +3,37 @@
 	margin: 1.25rem auto;
 	padding: 0 1rem;
 	text-align: center;
+	gap: var(--size-3);
+	display: grid;
+	grid-template-columns: auto auto;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		'picture title'
+		'picture aside'
+	;
+}
+
+#page-header > *:not(h1):not(aside) { grid-area: picture; }
+#page-header > h1 { grid-area: title; }
+#page-header > aside { grid-area: aside; }
 
-	@media (min-width: 1024px) {
-    .desktop\:px-9 {
-        padding-left: 2.25rem;
-        padding-right: 2.25rem;
-		font-size: 2rem;
-		font-weight: 300;
-    }
+#page-header:has(> h1:first-child) {
+	grid-template-columns: auto;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		'title'
+		'aside'
+	;
 }
 
+@media (max-width: 550px) {
+	#page-header {
+		grid-template-columns: auto;
+		grid-template-rows: repeat(3, auto);
+		grid-template-areas:
+			'picture'
+			'title'
+			'aside'
+		;
+	}
 }
diff --git a/src/layouts/InternalPage/index.astro b/src/layouts/InternalPage/index.astro
index a059059..b0f3b55 100644
--- a/src/layouts/InternalPage/index.astro
+++ b/src/layouts/InternalPage/index.astro
@@ -48,7 +48,9 @@ const {
 	<SkipToContent slot="header" />
 	<SiteNav slot="header" />
 	<PageHeader slot="header">
+		<slot name="header-picture" slot="header-picture"></slot>
 		<slot name="header"></slot>
+		<slot name="header-extra" slot="header-extra"></slot>
 	</PageHeader>
 
 	<div id="contents">

From acdeb721327a0b8b9df1628f1a9373b0e0709934 Mon Sep 17 00:00:00 2001
From: madcampos <me@madcampos.dev>
Date: Wed, 4 Sep 2024 14:55:26 -0400
Subject: [PATCH 4/4] feat: update authors page to include pronouns and social
 media links

---
 src/pages/authors/[author].astro | 25 +++++++++++++++++++------
 src/styles/authors.css           | 21 +++++++++++----------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/pages/authors/[author].astro b/src/pages/authors/[author].astro
index d123e7a..730b9ab 100644
--- a/src/pages/authors/[author].astro
+++ b/src/pages/authors/[author].astro
@@ -20,7 +20,9 @@ export const getStaticPaths = (async () => (await getCollection('authors')).map(
 const {
 	name,
 	body,
-	avatar, avatarAlt
+	avatar, avatarAlt,
+	pronouns,
+	socialMedia
 } = Astro.props;
 const description = await parseMarkdown(body);
 
@@ -35,11 +37,22 @@ const description = await parseMarkdown(body);
 	pageSchema="ProfilePage"
 >
 
-<Fragment slot="header">
-	<a id="author-picture" class="p-author h-card author-name" rel="author" itemprop="url" href={Astro.url}>
-		<Avatar image={avatar} imageAlt={avatarAlt} />
-	</a>
-	<a href={Astro.url}>{name}</a>
+<a
+	slot="header-picture"
+	id="author-picture"
+	class="p-author h-card author-name"
+	rel="author"
+	itemprop="url"
+	href={Astro.url}
+>
+	<Avatar image={avatar} imageAlt={avatarAlt} />
+</a>
+<a slot="header" href={Astro.url}>{name}</a>
+<Fragment slot="header-extra">
+	{pronouns && (<p>{pronouns}</p>)}
+	<ul>
+		{Object.entries(socialMedia ?? {}).map(([name, url]) => (<li><a href={url} rel="nofollow noopener noreferrer">{name}</a></li>))}
+	</ul>
 </Fragment>
 
 <div id="contents" itemprop="about mainEntity" itemscope itemtype="https://schema.org/Person">
diff --git a/src/styles/authors.css b/src/styles/authors.css
index 40a2bc1..72bcecf 100644
--- a/src/styles/authors.css
+++ b/src/styles/authors.css
@@ -10,11 +10,6 @@
 	padding: var(--size-2);
 }
 
-#page-header h1 {
-	display: flex;
-	gap: var(--size-3);
-}
-
 #page-header a {
 	color: var(--title-color);
 	text-shadow: var(--size-1) var(--size-1) var(--size-1) var(--gray-12);
@@ -22,9 +17,15 @@
 	text-underline-offset: var(--size-2);
 }
 
-@media (max-width: 550px) {
-	#page-header h1 {
-		flex-direction: column;
-		align-items: center;
-	}
+#page-header ul {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0;
+	justify-content: center;
+	gap: var(--size-3);
+}
+
+#page-header li {
+	list-style: none;
+	padding: 0;
 }