feat: update authors page to include pronouns and social media links

torontojs · Sep 4, 2024 · acdeb72 · acdeb72
1 parent 32b52a1
commit acdeb72
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git 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
@@ -10,21 +10,22 @@
 	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);
 	text-decoration-color: var(--tjs-red-7);
 	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;
 }