Merge pull request #53 from torontojs/feat/authors-improvements

Feature: improve authors data

src/components/AuthorCard/index.astro

@@ -16,17 +16,20 @@ 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">
 	<a class="author-picture" href={`${BLOG_URL}authors/${author}`}>
 		<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 */}

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>

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'
+		;
+	}
 }

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: [email protected]
 website: https://dreymoreau.netlify.app

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: [email protected]
 website: https://madcampos.dev/

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">

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">

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.'),

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;
 }