feat(docs): add astro routes for experience, projects, speaking, and writing pages

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

@@ -0,0 +1,110 @@
+---
+import { render } from "astro:content";
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import { Icon } from "astro-icon/components";
+import PostPreview from "@/components/blog/PostPreview.astro";
+import { getAllExperience, getContentForExperience } from "@/data/experience";
+import PageLayout from "@/layouts/Base.astro";
+
+export const getStaticPaths = (async () => {
+	const experiences = await getAllExperience();
+	return Promise.all(
+		experiences.map(async (exp) => ({
+			params: { slug: exp.id },
+			props: { exp, content: await getContentForExperience(exp.id) },
+		})),
+	);
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { exp, content } = Astro.props as Props;
+const { Content } = await render(exp);
+const { startDate, endDate, organization, role, location, url } = exp.data;
+const range = `${startDate.getFullYear()} – ${endDate ? endDate.getFullYear() : "Present"}`;
+
+const meta = {
+	description: exp.data.description ?? `${role ?? ""} at ${organization}`.trim(),
+	title: exp.data.title,
+};
+---
+
+<PageLayout meta={meta}>
+	<nav class="mb-8" aria-label="Breadcrumbs">
+		<ul class="flex items-center">
+			<li class="flex items-center">
+				<a class="text-accent" href="/experience/">Experience</a>
+				<Icon aria-hidden="true" name="mdi:chevron-right" class="mx-1.5" />
+			</li>
+			<li aria-current="page">{exp.data.title}</li>
+		</ul>
+	</nav>
+
+	<h1 class="title">{role ? `${role}, ${organization}` : organization}</h1>
+	<p class="text-muted mt-1">
+		{range}{location && ` · ${location}`}
+		{
+			url && (
+				<>
+					{" · "}
+					<a class="cactus-link" href={url} rel="noopener noreferrer" target="_blank">
+						Website →
+					</a>
+				</>
+			)
+		}
+	</p>
+
+	<div class="prose prose-sm prose-cactus mt-6 mb-12 max-w-none">
+		<Content />
+	</div>
+
+	{
+		content.projects.length > 0 && (
+			<section class="mb-12">
+				<h2 class="title mb-4 text-xl">Projects</h2>
+				<ul class="space-y-3">
+					{content.projects.map((p) => (
+						<li>
+							<a class="cactus-link" href={`/projects/${p.id}/`}>
+								{p.data.title}
+							</a>
+						</li>
+					))}
+				</ul>
+			</section>
+		)
+	}
+
+	{
+		content.writing.length > 0 && (
+			<section class="mb-12">
+				<h2 class="title mb-4 text-xl">Writing</h2>
+				<ul class="space-y-4">
+					{content.writing.map((p) => (
+						<li class="grid gap-1 sm:grid-cols-[auto_1fr]">
+							<PostPreview as="h3" post={p} />
+						</li>
+					))}
+				</ul>
+			</section>
+		)
+	}
+
+	{
+		content.speaking.length > 0 && (
+			<section class="mb-12">
+				<h2 class="title mb-4 text-xl">Speaking</h2>
+				<ul class="space-y-3">
+					{content.speaking.map((t) => (
+						<li>
+							<a class="cactus-link" href={`/speaking/${t.id}/`}>
+								{t.data.title}
+							</a>
+						</li>
+					))}
+				</ul>
+			</section>
+		)
+	}
+</PageLayout>

src/pages/experience/index.astro

@@ -0,0 +1,36 @@
+---
+import { getAllExperience } from "@/data/experience";
+import PageLayout from "@/layouts/Base.astro";
+
+const experiences = await getAllExperience();
+
+const meta = {
+	description: "Roles and organizations I've worked with",
+	title: "Experience",
+};
+
+const range = (start: Date, end?: Date) =>
+	`${start.getFullYear()} – ${end ? end.getFullYear() : "Present"}`;
+---
+
+<PageLayout meta={meta}>
+	<h1 class="title mb-12">Experience</h1>
+	<ul class="space-y-10">
+		{
+			experiences.map((exp) => (
+				<li>
+					<div class="flex flex-wrap items-baseline justify-between gap-x-4">
+						<h2 class="title text-lg">
+							<a class="cactus-link" href={`/experience/${exp.id}/`}>
+								{exp.data.role ? `${exp.data.role}, ${exp.data.organization}` : exp.data.organization}
+							</a>
+						</h2>
+						<span class="text-muted text-sm">{range(exp.data.startDate, exp.data.endDate)}</span>
+					</div>
+					{exp.data.location && <p class="text-muted text-sm">{exp.data.location}</p>}
+					{exp.data.description && <p class="mt-2">{exp.data.description}</p>}
+				</li>
+			))
+		}
+	</ul>
+</PageLayout>

src/pages/projects/[...page].astro

@@ -0,0 +1,62 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import type { GetStaticPaths, Page } from "astro";
+import { Icon } from "astro-icon/components";
+import Pagination from "@/components/Paginator.astro";
+import Project from "@/components/project/Project.astro";
+import PageLayout from "@/layouts/Base.astro";
+import { collectionDateSort } from "@/utils/date";
+
+export const getStaticPaths = (async ({ paginate }) => {
+	const MAX_PROJECTS_PER_PAGE = 10;
+	const allProjects = await getCollection("projects");
+	return paginate(allProjects.sort(collectionDateSort), { pageSize: MAX_PROJECTS_PER_PAGE });
+}) satisfies GetStaticPaths;
+
+interface Props {
+	page: Page<CollectionEntry<"projects">>;
+}
+
+const { page } = Astro.props;
+
+const meta = {
+	description: "Things I've built",
+	title: "Projects",
+};
+
+const paginationProps = {
+	...(page.url.prev && {
+		prevUrl: {
+			text: "← Previous Page",
+			url: page.url.prev,
+		},
+	}),
+	...(page.url.next && {
+		nextUrl: {
+			text: "Next Page →",
+			url: page.url.next,
+		},
+	}),
+};
+---
+
+<PageLayout meta={meta}>
+	<section>
+		<h1 class="title mb-12 flex items-center gap-3">
+			Projects <a class="text-accent" href="/projects/rss.xml" target="_blank">
+				<span class="sr-only">RSS feed</span>
+				<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
+			</a>
+		</h1>
+		<ul class="mt-6 space-y-8 text-start">
+			{
+				page.data.map((project) => (
+					<li class="">
+						<Project project={project} as="h2" isPreview />
+					</li>
+				))
+			}
+		</ul>
+		<Pagination {...paginationProps} />
+	</section>
+</PageLayout>

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

@@ -0,0 +1,28 @@
+---
+import { getCollection } from "astro:content";
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import Project from "@/components/project/Project.astro";
+import PageLayout from "@/layouts/Base.astro";
+
+// if you're using an adaptor in SSR mode, getStaticPaths wont work -> https://docs.astro.build/en/guides/routing/#modifying-the-slug-example-for-ssr
+export const getStaticPaths = (async () => {
+	const allProjects = await getCollection("projects");
+	return allProjects.map((project) => ({
+		params: { slug: project.id },
+		props: { project },
+	}));
+}) satisfies GetStaticPaths;
+
+export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { project } = Astro.props;
+
+const meta = {
+	description: project.data.description || `Project: ${project.data.title}`,
+	title: project.data.title,
+};
+---
+
+<PageLayout meta={meta}>
+	<Project as="h1" project={project} />
+</PageLayout>

src/pages/projects/rss.xml.ts

@@ -0,0 +1,18 @@
+import { getCollection } from "astro:content";
+import rss from "@astrojs/rss";
+import { siteConfig } from "@/site.config";
+
+export const GET = async () => {
+	const projects = await getCollection("projects");
+
+	return rss({
+		title: siteConfig.title,
+		description: siteConfig.description,
+		site: import.meta.env.SITE,
+		items: projects.map((project) => ({
+			title: project.data.title,
+			pubDate: project.data.publishDate,
+			link: `projects/${project.id}/`,
+		})),
+	});
+};

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

@@ -0,0 +1,52 @@
+---
+import type { CollectionEntry } from "astro:content";
+import type { GetStaticPaths, Page } from "astro";
+import FormattedDate from "@/components/FormattedDate.astro";
+import Pagination from "@/components/Paginator.astro";
+import { getAllSpeaking } from "@/data/speaking";
+import PageLayout from "@/layouts/Base.astro";
+import { collectionDateSort } from "@/utils/date";
+
+export const getStaticPaths = (async ({ paginate }) => {
+	const talks = await getAllSpeaking();
+	return paginate(talks.sort(collectionDateSort), { pageSize: 10 });
+}) satisfies GetStaticPaths;
+
+interface Props {
+	page: Page<CollectionEntry<"speaking">>;
+}
+
+const { page } = Astro.props;
+
+const meta = {
+	description: "Talks and presentations I've given",
+	title: "Speaking",
+};
+
+const paginationProps = {
+	...(page.url.prev && { prevUrl: { text: "← Previous Page", url: page.url.prev } }),
+	...(page.url.next && { nextUrl: { text: "Next Page →", url: page.url.next } }),
+};
+---
+
+<PageLayout meta={meta}>
+	<h1 class="title mb-12">Speaking</h1>
+	<ul class="space-y-6">
+		{
+			page.data.map((talk) => (
+				<li class="grid gap-1 sm:grid-cols-[auto_1fr]">
+					<FormattedDate class="text-muted min-w-30 font-semibold" date={talk.data.publishDate} />
+					<div>
+						<h2 class="title text-base">
+							<a class="cactus-link" href={`/speaking/${talk.id}/`}>
+								{talk.data.title}
+							</a>
+						</h2>
+						{talk.data.event && <p class="text-muted text-sm">{talk.data.event}</p>}
+					</div>
+				</li>
+			))
+		}
+	</ul>
+	<Pagination {...paginationProps} />
+</PageLayout>

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

@@ -0,0 +1,47 @@
+---
+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, 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>

src/pages/writing/[...page].astro

@@ -0,0 +1,127 @@
+---
+import type { CollectionEntry } from "astro:content";
+import type { GetStaticPaths, Page } from "astro";
+import { Icon } from "astro-icon/components";
+import PostPreview from "@/components/blog/PostPreview.astro";
+import Pagination from "@/components/Paginator.astro";
+import { getAllExperience } from "@/data/experience";
+import { getAllPosts, groupPostsByYear } from "@/data/post";
+import PageLayout from "@/layouts/Base.astro";
+import { collectionDateSort } from "@/utils/date";
+
+export const getStaticPaths = (async ({ paginate }) => {
+	const MAX_POSTS_PER_PAGE = 10;
+	const MAX_PINNED_POSTS = 3;
+	const allPosts = await getAllPosts();
+	const allPostsByDate = allPosts.sort(collectionDateSort);
+	const experiences = await getAllExperience();
+	const pinnedPosts = allPostsByDate
+		.values()
+		.filter((p) => p.data.pinned)
+		.take(MAX_PINNED_POSTS)
+		.toArray();
+	return paginate(allPostsByDate, {
+		pageSize: MAX_POSTS_PER_PAGE,
+		props: { experiences, pinnedPosts },
+	});
+}) satisfies GetStaticPaths;
+
+interface Props {
+	page: Page<CollectionEntry<"writing">>;
+	experiences: CollectionEntry<"experience">[];
+	pinnedPosts: CollectionEntry<"writing">[];
+}
+
+const { page, experiences, pinnedPosts } = Astro.props;
+
+const meta = {
+	description: "Essays, notes and articles I've written",
+	title: "Writing",
+};
+
+const paginationProps = {
+	...(page.url.prev && {
+		prevUrl: {
+			text: "← Previous Page",
+			url: page.url.prev,
+		},
+	}),
+	...(page.url.next && {
+		nextUrl: {
+			text: "Next Page →",
+			url: page.url.next,
+		},
+	}),
+};
+
+const groupedByYear = groupPostsByYear(page.data);
+const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
+---
+
+<PageLayout meta={meta}>
+	<div class="mb-12 flex items-center gap-3">
+		<h1 class="title">Writing</h1>
+		<a class="text-accent" href="/rss.xml" target="_blank">
+			<span class="sr-only">RSS feed</span>
+			<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
+		</a>
+	</div>
+	<div class="grid sm:grid-cols-[3fr_1fr] sm:gap-x-8 sm:gap-y-16">
+		<div>
+			{
+				pinnedPosts.length > 0 && (
+					<section class="mb-16">
+						<h2 class="title mb-6 text-xl">Pinned</h2>
+						<ul class="space-y-4" role="list">
+							{pinnedPosts.map((p) => (
+								<li class="grid gap-1 sm:grid-cols-[auto_1fr]">
+									<PostPreview post={p} />
+								</li>
+							))}
+						</ul>
+					</section>
+				)
+			}
+			{
+				descYearKeys.map((yearKey) => (
+					<section class="mb-16">
+						<h2 id={`year-${yearKey}`} class="title text-lg">
+							<span class="sr-only">Posts in</span>
+							{yearKey}
+						</h2>
+						<ul class="mt-5 space-y-4 text-start">
+							{groupedByYear[yearKey]?.map((p) => (
+								<li class="grid gap-1 sm:grid-cols-[auto_1fr] sm:[&_q]:col-start-2">
+									<PostPreview post={p} />
+								</li>
+							))}
+						</ul>
+					</section>
+				))
+			}
+			<Pagination {...paginationProps} />
+		</div>
+		{
+			!!experiences.length && (
+				<aside>
+					<h2 class="title mb-4 text-lg">Experience</h2>
+					<ul class="flex flex-col gap-2">
+						{experiences.map((exp) => (
+							<li>
+								<a class="cactus-link" href={`/experience/${exp.id}/`}>
+									{exp.data.title}
+								</a>
+							</li>
+						))}
+					</ul>
+					<span class="mt-4 block sm:text-end">
+						<a class="hover:text-link" href="/experience/">
+							View all <span aria-hidden="true">→</span>
+							<span class="sr-only">experience</span>
+						</a>
+					</span>
+				</aside>
+			)
+		}
+	</div>
+</PageLayout>

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

@@ -0,0 +1,24 @@
+---
+import { render } from "astro:content";
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import { getAllPosts } from "@/data/post";
+import PostLayout from "@/layouts/BlogPost.astro";
+
+// if you're using an adaptor in SSR mode, getStaticPaths wont work -> https://docs.astro.build/en/guides/routing/#modifying-the-slug-example-for-ssr
+export const getStaticPaths = (async () => {
+	const blogEntries = await getAllPosts();
+	return blogEntries.map((post) => ({
+		params: { slug: post.id },
+		props: { post },
+	}));
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<PostLayout post={post}>
+	<Content />
+</PostLayout>