feat: add title to February 2025 talk and support multiple authors (#363

)

<!-- 👋 Hi, thanks for sending a PR to boston-ts-website! 💖.
Please fill out all fields below and make sure each item is true and [x]
checked.
Otherwise we may not be able to review your PR. -->

## PR Checklist

- [ ] Addresses an existing open issue: fixes #000
- [ ] That issue was marked as [`status: accepting
prs`](https://github.com/JoshuaKGoldberg/boston-ts-website/issues?q=is%3Aopen+is%3Aissue+label%3A%22status%3A+accepting+prs%22)
- [x] Steps in
[CONTRIBUTING.md](https://github.com/JoshuaKGoldberg/boston-ts-website/blob/main/.github/CONTRIBUTING.md)
were taken

## Overview

<!-- Description of what is changed and how the code change does that.
-->

app/components/Author.tsx

@@ -0,0 +1,15 @@
+import type { AuthorData } from "~/schemas";
+
+import { AnchorWithArrow } from "./AnchorWithArrow";
+
+interface AuthorProps {
+	author: AuthorData;
+}
+
+export function Author({ author }: AuthorProps) {
+	return author.url ? (
+		<AnchorWithArrow href={author.url}>{author.name}</AnchorWithArrow>
+	) : (
+		author.name
+	);
+}

app/components/EventDetails.tsx

@@ -2,7 +2,9 @@ import { region } from "~/config";
 import { EventData } from "~/schemas";
 
 import { AnchorWithArrow } from "./AnchorWithArrow";
+import { Author } from "./Author";
 import * as styles from "./EventDetails.css";
+import { OxfordCommaList } from "./OxfordCommaList";
 import { UnorderedList } from "./UnorderedList";
 
 export interface EventDetailsProps {
@@ -32,12 +34,14 @@ export function EventDetails({ active, event }: EventDetailsProps) {
 							<>
 								{" "}
 								by{" "}
-								{topic.author.url ? (
-									<AnchorWithArrow href={topic.author.url}>
-										{topic.author.name}
-									</AnchorWithArrow>
+								{Array.isArray(topic.author) ? (
+									<OxfordCommaList
+										items={topic.author.map((author) => (
+											<Author author={author} />
+										))}
+									/>
 								) : (
-									topic.author.name
+									<Author author={topic.author} />
 								)}
 							</>
 						)}

app/components/OxfordCommaList.tsx

@@ -0,0 +1,35 @@
+import { Fragment, ReactNode } from "react";
+
+interface OxfordCommaListProps {
+	items: readonly ReactNode[];
+}
+
+export function OxfordCommaList({ items }: OxfordCommaListProps) {
+	if (items.length === 0) {
+		return null;
+	}
+
+	if (items.length === 1) {
+		return <>{items[0]}</>;
+	}
+
+	if (items.length === 2) {
+		return (
+			<>
+				{items[0]} and {items[1]}
+			</>
+		);
+	}
+
+	return (
+		<>
+			{items.slice(0, -1).map((item, index) => (
+				<Fragment key={index}>
+					{item}
+					{index < items.length - 2 ? ", " : ", and "}
+				</Fragment>
+			))}
+			{items[items.length - 1]}
+		</>
+	);
+}

app/data/events.json

@@ -6,10 +6,17 @@
 		"time": "5:30pm - 8:30pm",
 		"topics": [
 			{
-				"author": {
-					"name": "Matt Luo and RJ Dellecese"
-				},
-				"title": "TBD"
+				"author": [
+					{
+						"name": "RJ Dellecese",
+						"url": "https://github.com/rjdellecese"
+					},
+					{
+						"name": "Matt Luo",
+						"url": "https://www.matthewluo.com/"
+					}
+				],
+				"title": "Intro to Convex"
 			},
 			{
 				"author": {

app/schemas.ts

@@ -1,21 +1,22 @@
 import { z } from "zod";
 
+const authorSchema = z.object({
+	name: z.string(),
+	url: z.string().nullish(),
+});
+
 export const eventSchema = z.object({
 	date: z.coerce.date(),
 	link: z.string(),
 	location: z.string(),
 	time: z.string(),
 	topics: z.array(
 		z.object({
-			author: z
-				.object({
-					name: z.string(),
-					url: z.string().nullish(),
-				})
-				.nullish(),
+			author: authorSchema.or(z.array(authorSchema)).nullish(),
 			title: z.string(),
 		}),
 	),
 });
 
+export type AuthorData = z.infer<typeof authorSchema>;
 export type EventData = z.infer<typeof eventSchema>;