feat: add speaker names and URL next to their talks (#338)

<!-- 👋 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

_I do not have all the speaker URLs at this time, but that doesn't need
to block the PR or its review, I can add the missing ones later on._

<img width="1512" alt="Index page showing speaker names and websites"
src="https://github.com/user-attachments/assets/e0178e64-ee71-46bd-922a-1b060a411c75">

<img width="1512" alt="Events list page showing speaker names and
websites"
src="https://github.com/user-attachments/assets/e8d5ec66-c96e-4da8-91f4-4d1f96386dd3">

app/components/AdGrid.css.ts

@@ -66,7 +66,7 @@ export const h1 = style({
 	"@media": {
 		[breakpoints.medium]: {
 			fontSize: `clamp(5rem, 9vw, 8rem)`,
-			fontWeight: "700",
+			fontWeight: vars.weights.large,
 		},
 	},
 

app/components/AnchorWithArrow.css.ts

@@ -1,9 +1,8 @@
 import { style } from "@vanilla-extract/css";
 
 export const anchor = style({
-	display: "flex",
-	gap: "0.25em",
-	justifyContent: "flex-start",
+	alignItems: "center",
+	display: "inline-flex",
 });
 
 export const arrow = style({

app/components/AnchorWithArrow.tsx

@@ -12,7 +12,6 @@ export function AnchorWithArrow({ children, href }: AnchorWithArrowProps) {
 			href={href}
 			rel="noreferrer"
 			target="_blank"
-			variant="heavy"
 		>
 			{children}
 			<Arrow className={styles.arrow} label="" variant="out" />

app/components/EventDetails.tsx

@@ -3,6 +3,7 @@ import { EventData } from "~/schemas";
 
 import { AnchorWithArrow } from "./AnchorWithArrow";
 import * as styles from "./EventDetails.css";
+import { UnorderedList } from "./UnorderedList";
 
 export interface EventDetailsProps {
 	active?: boolean;
@@ -23,11 +24,26 @@ export function EventDetails({ active, event }: EventDetailsProps) {
 		<article className={styles.article}>
 			<h3 className={styles.heading}>{formatDate(event.date)}</h3>
 			<div>{event.location}</div>
-			<ul className={styles.list}>
+			<UnorderedList className={styles.list}>
 				{event.topics.map((topic) => (
-					<li key={topic}>{topic}</li>
+					<li key={topic.title}>
+						<strong>{topic.title}</strong>
+						{topic.author && (
+							<>
+								{" "}
+								by{" "}
+								{topic.author.url ? (
+									<AnchorWithArrow href={topic.author.url}>
+										{topic.author.name}
+									</AnchorWithArrow>
+								) : (
+									topic.author.name
+								)}
+							</>
+						)}
+					</li>
 				))}
-			</ul>
+			</UnorderedList>
 			<AnchorWithArrow href={event.link}>
 				{active ? "Register Now" : "Event Info"}
 			</AnchorWithArrow>

app/components/UnorderedList.css.ts

@@ -0,0 +1,3 @@
+import { bodyText } from "./BodyText.css";
+
+export const unorderedList = bodyText;

app/components/UnorderedList.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx";
+import React from "react";
+
+import * as styles from "./UnorderedList.css";
+
+export interface UnorderedListProps extends React.PropsWithChildren {
+	className?: string;
+}
+
+export function UnorderedList({ children, className }: UnorderedListProps) {
+	return <ul className={clsx(styles.unorderedList, className)}>{children}</ul>;
+}

app/data/events.json

@@ -5,8 +5,20 @@
 		"location": "Microsoft NERD Center",
 		"time": "5:30pm - 8:30pm",
 		"topics": [
-			"Declarative Builds and Deployments with Nix",
-			"Supabase is Sweet"
+			{
+				"author": {
+					"name": "Xavier Ruiz",
+					"url": "https://xav.ie"
+				},
+				"title": "Declarative Builds and Deployments with Nix"
+			},
+			{
+				"author": {
+					"name": "Josh Goldberg",
+					"url": "https://joshuakgoldberg.com/"
+				},
+				"title": "Supabase is Sweet"
+			}
 		]
 	},
 	{
@@ -15,8 +27,19 @@
 		"location": "Microsoft NERD Center",
 		"time": "5:30pm - 8:30pm",
 		"topics": [
-			"Web Observables! In The Platform!",
-			"Coding for the Common Good with BUILD UMass"
+			{
+				"author": {
+					"name": "Dominic Farolino"
+				},
+				"title": "Web Observables! In The Platform!"
+			},
+			{
+				"author": {
+					"name": "Abhijit Ajit Kamath",
+					"url": "https://abhijitkamath.com/"
+				},
+				"title": "Coding for the Common Good with BUILD UMass"
+			}
 		]
 	},
 	{
@@ -25,8 +48,14 @@
 		"location": "Microsoft NERD Center",
 		"time": "5:30pm - 8:30pm",
 		"topics": [
-			"What's New in TypeScript 5.5",
-			"Group Discussion: Learning TypeScript"
+			{
+				"author": {
+					"name": "Josh Goldberg",
+					"url": "https://joshuakgoldberg.com/"
+				},
+				"title": "What's New in TypeScript 5.5"
+			},
+			{ "title": "Group Discussion: Learning TypeScript" }
 		]
 	},
 	{
@@ -35,8 +64,19 @@
 		"location": "Microsoft NERD Center",
 		"time": "5:30pm - 8:30pm",
 		"topics": [
-			"Every Single Thing You Can Do With Destructuring",
-			"Conference And Meetup Talk Proposals Helpful Tips"
+			{
+				"author": {
+					"name": "Dimitri Mitropoulos"
+				},
+				"title": "Every Single Thing You Can Do With Destructuring"
+			},
+			{
+				"author": {
+					"name": "Anna Astori",
+					"url": "https://www.linkedin.com/in/anna-astori/"
+				},
+				"title": "Conference And Meetup Talk Proposals Helpful Tips"
+			}
 		]
 	},
 	{
@@ -45,9 +85,26 @@
 		"location": "Microsoft NERD Center",
 		"time": "6:00pm - 8:30pm",
 		"topics": [
-			"What's New in TypeScript 5.4",
-			"It's Dangerous to Go to Runtime! Take Your (Ark)Types",
-			"How to Become a Fake Polyglot Programmer"
+			{
+				"author": {
+					"name": "Josh Goldberg",
+					"url": "https://joshuakgoldberg.com/"
+				},
+				"title": "What's New in TypeScript 5.4"
+			},
+			{
+				"author": {
+					"name": "David Blass",
+					"url": "https://x.com/ssalbdivad"
+				},
+				"title": "It's Dangerous to Go to Runtime! Take Your (Ark)Types"
+			},
+			{
+				"author": {
+					"name": "Nnenna Ndukwe"
+				},
+				"title": "How to Become a Fake Polyglot Programmer"
+			}
 		]
 	}
 ]

app/routes/about.tsx

@@ -4,6 +4,7 @@ import { ExternalAnchor } from "~/components/Anchor";
 import { BodyText } from "~/components/BodyText";
 import { Heading } from "~/components/Heading";
 import { Layout } from "~/components/Layout";
+import { UnorderedList } from "~/components/UnorderedList";
 import { createMeta, site } from "~/config";
 
 const tagline = `We meet once every month or two to chat about our favorite typed superset of JavaScript.`;
@@ -42,7 +43,7 @@ export default function About() {
 				</ExternalAnchor>
 				.
 			</BodyText>
-			<ul>
+			<UnorderedList>
 				<li>
 					<strong>Josh Goldberg</strong>
 				</li>
@@ -61,7 +62,7 @@ export default function About() {
 				<li>
 					<strong>Hadley Garrett</strong>
 				</li>
-			</ul>
+			</UnorderedList>
 			<Heading level={3}>The Website</Heading>
 			<BodyText>
 				Built with React, Remix, TypeScript, Vanilla Extract, and Vite.

app/routes/speak.tsx

@@ -6,6 +6,7 @@ import { Aside } from "~/components/Aside";
 import { BodyText } from "~/components/BodyText";
 import { Heading } from "~/components/Heading";
 import { Layout } from "~/components/Layout";
+import { UnorderedList } from "~/components/UnorderedList";
 import { createMeta } from "~/config";
 
 const tagline = `No prior experience or TypeScript expertise required!`;
@@ -30,16 +31,14 @@ export default function About() {
 					Boston TS Club Speaking Form
 				</AnchorWithArrow>
 			</BodyText>
-			<BodyText>
-				All we ask is:
-				<ul>
-					<li>
-						Send us your slides 24 hours in advance, so we can check them for
-						accessibility
-					</li>
-					<li>Be prepared to chat about your talk with attendees</li>
-				</ul>
-			</BodyText>
+			<BodyText>All we ask is:</BodyText>
+			<UnorderedList>
+				<li>
+					Send us your slides 24 hours in advance, so we can check them for
+					accessibility
+				</li>
+				<li>Be prepared to chat about your talk with attendees</li>
+			</UnorderedList>
 			<BodyText>
 				We're happy to give you all the support you need for a great experience,
 				including talk ideation, slides review, and feedback on a dry run. 💙

app/schemas.ts

@@ -5,7 +5,17 @@ export const eventSchema = z.object({
 	link: z.string(),
 	location: z.string(),
 	time: z.string(),
-	topics: z.array(z.string()),
+	topics: z.array(
+		z.object({
+			author: z
+				.object({
+					name: z.string(),
+					url: z.string().nullish(),
+				})
+				.nullish(),
+			title: z.string(),
+		}),
+	),
 });
 
 export type EventData = z.infer<typeof eventSchema>;

cspell.json

@@ -10,17 +10,25 @@
 		"pnpm-lock.yaml"
 	],
 	"words": [
+		"Abhijit",
+		"Ajit",
 		"Astori",
 		"Blass",
 		"bluesky",
 		"bostonts",
 		"clsx",
 		"currentcolor",
+		"Dimitri",
+		"Farolino",
 		"Hadley",
 		"isbot",
 		"Jérémie",
+		"Kamath",
 		"knip",
 		"Mariah",
+		"Mitropoulos",
+		"Ndukwe",
+		"Nnenna",
 		"packagejson",
 		"Sanker",
 		"Supabase"

package.json

@@ -15,7 +15,7 @@
 	"scripts": {
 		"build": "remix vite:build",
 		"dev": "remix vite:dev",
-		"format": "prettier .",
+		"format": "prettier --write .",
 		"lint": "eslint . .*js --max-warnings 0",
 		"lint:knip": "knip",
 		"lint:md": "markdownlint \"**/*.md\" \".github/**/*.md\" --rules sentences-per-line",