Merge pull request #54 from heem42/feat/allow-multiple-authors

allow multiple authors and update previous content

src/components/AuthorCard/styles.css

@@ -47,5 +47,8 @@
 		place-self: center center;
 	}
 
-	.author-card .author-name { justify-self: center; }
+	.author-card .author-name {
+		justify-self: center;
+		text-align: center;
+	}
 }

src/components/HtmlHead/index.astro

@@ -10,7 +10,7 @@ interface Props {
 	url: string,
 	description: string,
 	tags?: string[],
-	author?: string,
+	authors?: string[],
 	image?: string,
 	imageAlt?: string,
 	createdAt?: Date,
@@ -21,7 +21,7 @@ interface Props {
 const {
 	htmlTitle, title, url,
 	description, tags,
-	author,
+	authors,
 
 	image, imageAlt,
 
@@ -71,11 +71,13 @@ const socialImage = `${BLOG_URL}${(image ?? defaultSocialImage.src).replace(/^\/
 	<meta property="og:image" name="twitter:image" itemprop="image" content={socialImage} />
 	<meta property="og:image:alt" name="twitter:image:alt" content={socialImageAlt} />
 
-	{author && (
-		<meta property="article:author" name="author" content={author} />
-		<!-- TODO: fix to specifically reference to twitter handle -->
-		<meta name="twitter:creator" content={author} />
-	)}
+	{authors?.map((author) => (
+		<>
+			<meta property="article:author" name="author" content={author} />
+			<meta name="twitter:creator" content={author} />
+			<!-- TODO: fix to specifically reference to twitter handle -->
+		</>
+	))}
 
 	<meta name="twitter:dnt" content="on" />
 	<meta name="twitter:widgets:csp" content="on" />

src/components/PostHeader/index.astro

@@ -2,6 +2,7 @@
 import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components';
 
+import { getFormattedAuthorsList } from '../../utils/post';
 import SiteNav from '../SiteNav/index.astro';
 
 import './styles.css';
@@ -17,7 +18,8 @@ interface Props {
 	imageAlt?: string,
 	readingTime?: number,
 	wordCount?: number,
-	letterCount?: number
+	letterCount?: number,
+	authors: string[]
 }
 
 const {
@@ -26,7 +28,8 @@ const {
 	createdAt, updatedAt,
 	hasUpdates,
 	image, imageAlt,
-	readingTime, wordCount
+	readingTime, wordCount,
+	authors
 } = Astro.props;
 
 const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'long' });
@@ -84,6 +87,13 @@ const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyl
 					</small>
 				</p>
 			)}
+			{authors && (
+				<p>
+					<small>
+						By {getFormattedAuthorsList(authors)}
+					</small>
+				</p>
+			)}
 		</aside>
 
 		<aside id="post-share" aria-label="Share options">

src/content/blog/2023/06/tldr-1.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #1"
 createdAt: 2023-06-28T15:45:00
-author: evert
+authors:
+  - evert
 image: ./assets/runescape.png
 imageAlt: A screenshot of RuneSweeper, a Runescape inspired Minesweeper game
 summary: Summer is here, and welcome to the first issue of TorontoJS TL;DR. This is the Toronto Javascript newsletter, by you for you.

src/content/blog/2023/07/tldr-2.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #2"
 createdAt: 2023-07-12T11:11:00
-author: drey
+authors:
+  - drey
 summary: Wow!! Over the half way point of the year, isn't that something? One day its January 1st, maybe we were thinking about goals, resolutions, routines and new habits to implement and then all of a sudden, we are over the 6 month mark.
 tags:
   - TLDR

src/content/blog/2023/07/tldr-3.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #3"
 createdAt: 2023-07-26T12:00:00
-author: marco
+authors:
+  - marco
 summary: Community and growth
 tags:
   - TLDR

src/content/blog/2023/08/tldr-4.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #4"
 createdAt: 2023-08-09T11:01:00
-author: evert
+authors:
+  - evert
 image: ./assets/d784bf5a-e5d5-47f3-a6c8-0b95d50c9b22_2048x1536.jpg
 imageAlt: A top down photo of a room with people seated in chairs and couches forming a semi circle. In front of the people there is a speaker pointing to a presentation. The room is well lit with big windows on the background and lots of sun light coming in.
 summary: Normally summers are a bit quiet for events, but this year seems like an exception. We've had 6(!) TorontoJS events in the last 2 weeks and more on the way.

src/content/blog/2023/08/tldr-5.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #5"
 createdAt: 2023-08-23T11:11:00
-author: drey
+authors:
+  - drey
 summary: This is a blog post about the JavaScript programming language. Like it, love it, hate it, it's here to stay.
 tags:
   - TLDR

src/content/blog/2023/09/tldr-6.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #6"
 createdAt: 2023-09-06T11:11:00
-author: marco
+authors:
+  - marco
 summary: And now for something completely different...
 tags:
   - TLDR

src/content/blog/2023/09/tldr-7.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #7"
 createdAt: 2023-09-20T13:34:00
-author: evert
+authors:
+  - evert
 image: ./assets/party-paint.png
 imageAlt: A screenshot of "Party Paint" showing choppy colors overlayed on top of one another.
 summary: Bi-weekly weather updates delivered to your inbox

src/content/blog/2023/10/tldr-8.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #8"
 createdAt: 2023-10-04T11:11:00
-author: drey
+authors:
+  - drey
 summary: October is here!!!!! Which means that the leaves are changing, there is a mix of crisp air in the morning and more blue sky days but this also means that Hacktober!!! is among us!!! which they are celebrating the 10th year of existence!!!!
 tags:
   - TLDR

src/content/blog/2023/10/tldr-9.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #9"
 createdAt: 2023-10-19T23:16:00
-author: marco
+authors:
+  - marco
 image: ./assets/317fe584-0a70-4ac7-8f50-67c9a76b427c_4080x3072.jpg
 imageAlt: A picture of a group of people smiling to the photo
 summary: Security treats so you won't get tricked

src/content/blog/2023/11/tldr-10.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #10"
 createdAt: 2023-11-01T11:11:00
-author: evert
+authors:
+  - evert
 image: ./assets/06af6b9a-b422-4132-8f22-2948814d4361_720x378.jpg
 imageAlt: A grap of the OKLCH color space, with the word "OKLCH" written in big black letters. The graph axes show Lightness (dark-bright); Chroma (dull-vivid); and Hue (red, yellow, etc.). On the left there is the words "Perceptual Uniformity" and on the right there is "p3-gamut".
 summary: 🎃 Next.js vs Remix. Fight! 🎃

src/content/blog/2023/11/tldr-11.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #11"
 createdAt: 2023-11-15T11:11:00
-author: drey
+authors:
+  - drey
 image: ./assets/7f819de0-057b-4626-8421-5193bfb9fd8b_800x800.jpg
 imageAlt: A picture of Jen Chan with a slight smile, she has dark brown hair with green accents and is wearing a coral winter coat. Behind her is a brick wall.
 summary: 🎃 Next.js vs Remix. Fight! 🎃

src/content/blog/2023/11/tldr-12.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #12"
 createdAt: 2023-11-30T09:31:00
-author: marco
+authors:
+  - marco
 summary: On the 10th day of JS, Brendan Eich gave to me...
 tags:
   - TLDR

src/content/blog/2023/12/tldr-13.md

@@ -1,7 +1,8 @@
 ---
 title: "TorontoJS TL;DR Issue #13"
 createdAt: 2023-12-21T20:05:00
-author: evert
+authors:
+  - evert
 summary: 🍾 This year, wrapped 🍾
 tags:
   - TLDR

src/content/blog/2024/09/new-blog.md

@@ -6,7 +6,9 @@ tags:
   - Community
   - blog
   - meta
-author: marco
+authors:
+  - marco
+  - drey
 ---
 We have a new home! Expect more frequent content and more of the nice and quirky newsletters!
 

src/content/docs/writing-posts.md

@@ -30,8 +30,10 @@ summary: A short summary of the post.
 # The date the post was created. It must be in a format parseable by JavaScript's Date object. It is advised to include the time and timezone to avoid ambiguity.
 createdAt: 2020-01-01T00:00:00.000Z
 
-# The slug for the author of the post. Please look at the docs about adding authors.
-author: author-name
+# The slug for the author(s) of the post. Please look at the docs about adding authors.
+authors:
+  - author1
+  - author2
 
 ### Optional fields ###
 

src/layouts/Base/index.astro

@@ -10,7 +10,7 @@ interface Props {
 	htmlTitle?: string[],
 	url: string,
 	description: string,
-	author?: string,
+	authors?: string[],
 	tags?: string[],
 	image?: string,
 	imageAlt?: string,
@@ -24,7 +24,7 @@ const {
 	title,
 	htmlTitle,
 	description,
-	author,
+	authors,
 	url,
 	tags,
 	image,
@@ -42,7 +42,7 @@ const {
 		title={title}
 		url={url}
 		description={description}
-		author={author}
+		authors={authors}
 		tags={tags}
 		image={image}
 		imageAlt={imageAlt}

src/layouts/BlogPost/index.astro

@@ -12,7 +12,7 @@ import './styles.css';
 interface Props {
 	title: string,
 	summary: string,
-	author: string,
+	authors: string[],
 	image?: ImageMetadata,
 	imageAlt?: string,
 	createdAt: Date,
@@ -31,7 +31,7 @@ const BLOG_URL = Astro.site?.href;
 const {
 	url,
 	title, summary,
-	author,
+	authors,
 	image, imageAlt,
 	createdAt, updatedAt, updates,
 	tags,
@@ -45,7 +45,7 @@ const postUrl = `${BLOG_URL}${url}`;
 	htmlTitle={[title, 'TorontoJS Blog']}
 	title={title}
 	description={summary}
-	author={author}
+	authors={authors}
 	tags={tags}
 	url={postUrl}
 	image={image?.src}
@@ -73,6 +73,7 @@ const postUrl = `${BLOG_URL}${url}`;
 		readingTime={readingTime}
 		wordCount={wordCount}
 		letterCount={letterCount}
+		authors={authors}
 	/>
 
 	<article id="post-contents" itemprop="articleBody" class="e-content">
@@ -107,7 +108,11 @@ const postUrl = `${BLOG_URL}${url}`;
 	<hr />
 
 	<Fragment slot="footer" id="post-footer">
-		<AuthorCard author={author} />
+		<div id="author-cards-wrapper">
+			{authors.map((author) => (
+				<AuthorCard author={author} />
+			))}
+		</div>
 
 		{tags && tags.length > 0 && (
 			<TagList

src/layouts/BlogPost/styles.css

@@ -40,3 +40,8 @@
 	padding: var(--size-1) var(--size-3);
 	text-align: center;
 }
+
+#author-cards-wrapper {
+	display: flex;
+	flex-direction: column;
+}

src/pages/[year]/[month]/[slug].astro

@@ -25,7 +25,7 @@ const {
 		createdAt, updatedAt,
 		updates,
 		tags,
-		author
+		authors
 	},
 	readingTime, letterCount, wordCount,
 	relatedPosts
@@ -36,7 +36,7 @@ const { Content } = await render();
 	url={url}
 	title={title}
 	summary={summary}
-	author={author}
+	authors={authors}
 	image={image}
 	imageAlt={imageAlt}
 	createdAt={createdAt}

src/schemas/blog.ts

@@ -7,7 +7,7 @@ export const blogSchema = ({ image }: SchemaContext) => zod.object({
 	createdAt: zod.coerce.date().describe('The post\'s creation date. As a parseable date string, without quotes. Examples: "2024-01-01", "2024-01-01 00:00:00", "2024-01-01T00:00:00-04:00", "2024-01-01T00:00:00Z".'),
 	updatedAt: zod.coerce.date().optional().describe('The post\'s last update date. As a parseable date string, without quotes. Examples: "2024-01-01", "2024-01-01 00:00:00", "2024-01-01T00:00:00-04:00", "2024-01-01T00:00:00Z".'),
 
-	author: zod.string().describe('The slug for the author of this post from the "authors" collection.'),
+	authors: zod.array(zod.string()).describe('The slug for the list of author(s) of this post from the "authors" collection.'),
 
 	draft: zod.boolean().optional().describe('Whether the post is a draft or not. Draft posts will not be added to the list of posts.'),
 

src/utils/post.ts

@@ -217,3 +217,12 @@ export async function listTags() {
 
 	return tags;
 }
+
+export function getFormattedAuthorsList(authors: string[]) {
+	const formatter = new Intl.ListFormat('en', {
+		style: 'long',
+		type: 'conjunction',
+	});
+
+	return formatter.format(authors);
+}