feat(about): add personal bio and details to about page

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

@@ -3,8 +3,10 @@ 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 TagList from "@/components/TagList.astro";
+import YouTube from "@/components/YouTube.astro";
 import PageLayout from "@/layouts/Base.astro";
+import { breadcrumbList, videoSchema } from "@/utils/seo";
 
 export const getStaticPaths = (async () => {
 	const talks = await getCollection("speaking");
@@ -18,9 +20,28 @@ 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 { title, description, youtubeId, event, publishDate, experiences, tags } = talk.data;
 
-const meta = { description, ogImage: `/og-image/speaking/${talk.id}.png`, title };
+const path = `/speaking/${talk.id}/`;
+const ogImage = `/og-image/speaking/${talk.id}.png`;
+const schema = [
+	breadcrumbList([
+		{ name: "Home", path: "/" },
+		{ name: "Speaking", path: "/speaking/" },
+		{ name: title, path },
+	]),
+	videoSchema({
+		title,
+		description,
+		path,
+		thumbnail: `https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg`,
+		uploadDate: publishDate,
+		embedUrl: `https://www.youtube.com/embed/${youtubeId}`,
+		contentUrl: `https://www.youtube.com/watch?v=${youtubeId}`,
+	}),
+];
+
+const meta = { description, keywords: tags, ogImage, schema, title };
 ---
 
 <PageLayout meta={meta}>
@@ -29,19 +50,11 @@ const meta = { description, ogImage: `/og-image/speaking/${talk.id}.png`, title
 		<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>
-			)
-		}
+		<YouTube id={youtubeId} title={title} />
 		<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>}
+		<TagList tags={tags} class="mt-8" />
+		{experiences.length > 0 && <div class="mt-6"><ExperienceTags experiences={experiences} /></div>}
 	</article>
 </PageLayout>