website/src/pages/speaking/[...slug].astro

---
import { getCollection, render } from "astro:content";
import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
import ExperienceTags from "@/components/ExperienceTags.astro";
import FormattedDate from "@/components/FormattedDate.astro";
import StreamPlayer from "@/components/StreamPlayer.astro";
import PageLayout from "@/layouts/Base.astro";

export const getStaticPaths = (async () => {
	const talks = await getCollection("speaking");
	return talks.map((talk) => ({
		params: { slug: talk.id },
		props: { talk },
	}));
}) satisfies GetStaticPaths;

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { talk } = Astro.props as Props;
const { Content } = await render(talk);
const { title, description, videoId, originalSource, event, publishDate, experiences } = talk.data;

const meta = { description, ogImage: `/og-image/speaking/${talk.id}.png`, title };
---

<PageLayout meta={meta}>
	<article data-pagefind-body>
		<h1 class="title mb-2">{title}</h1>
		<p class="text-muted mb-6">
			<FormattedDate date={publishDate} />{event && ` · ${event}`}
		</p>
		<StreamPlayer videoId={videoId} title={title} />
		{
			originalSource && (
				<p class="text-muted mt-3 text-sm">
					<a class="cactus-link" href={originalSource} rel="noopener noreferrer" target="_blank">
						Watch original on YouTube →
					</a>
				</p>
			)
		}
		<div class="prose prose-sm prose-cactus mt-8 max-w-none">
			<Content />
		</div>
		{experiences.length > 0 && <div class="mt-8"><ExperienceTags experiences={experiences} /></div>}
	</article>
</PageLayout>