website/src/pages/index.astro

---
import { type CollectionEntry, getCollection } from "astro:content";
import PostPreview from "@/components/blog/PostPreview.astro";
import Project from "@/components/project/Project.astro";
import SocialList from "@/components/SocialList.astro";
import { getAllPosts } from "@/data/post";
import { getAllSpeaking } from "@/data/speaking";
import PageLayout from "@/layouts/Base.astro";
import { collectionDateSort } from "@/utils/date";

const MAX_POSTS = 5;
const allPosts = await getAllPosts();
const latestPosts = (allPosts.sort(collectionDateSort) as CollectionEntry<"writing">[]).slice(
	0,
	MAX_POSTS,
);

const MAX_PROJECTS = 3;
const allProjects = await getCollection("projects");
const latestProjects = allProjects
	.sort(collectionDateSort)
	.slice(0, MAX_PROJECTS) as CollectionEntry<"projects">[];

const MAX_TALKS = 3;
const latestTalks = (await getAllSpeaking()).sort(collectionDateSort).slice(0, MAX_TALKS);
---

<PageLayout meta={{ title: "Home" }}>
	<section>
		<h1 class="title mb-6">Prad Nukala</h1>
		<p class="mb-4">
			Engineer and founder. I build decentralized identity infrastructure and tools for developers.
			Here you'll find what I've built, where I've worked, what I write, and the talks I've given.
		</p>
		<SocialList />
	</section>
	{
		latestProjects.length > 0 && (
			<section class="mt-16">
				<h2 class="title text-accent mb-6 text-xl">
					<a href="/projects/">Projects</a>
				</h2>
				<ul class="space-y-6" role="list">
					{latestProjects.map((project) => (
						<li>
							<Project project={project} as="h3" isPreview />
						</li>
					))}
				</ul>
			</section>
		)
	}
	<section class="mt-16">
		<h2 class="title text-accent mb-6 text-xl"><a href="/writing/">Writing</a></h2>
		<ul class="space-y-4" role="list">
			{
				latestPosts.map((p) => (
					<li class="grid gap-1 sm:grid-cols-[auto_1fr]">
						<PostPreview post={p} />
					</li>
				))
			}
		</ul>
	</section>
	{
		latestTalks.length > 0 && (
			<section class="mt-16">
				<h2 class="title text-accent mb-6 text-xl">
					<a href="/speaking/">Speaking</a>
				</h2>
				<ul class="space-y-4" role="list">
					{latestTalks.map((talk) => (
						<li>
							<a class="cactus-link" href={`/speaking/${talk.id}/`}>
								{talk.data.title}
							</a>
							{talk.data.event && <span class="text-muted text-sm"> · {talk.data.event}</span>}
						</li>
					))}
				</ul>
			</section>
		)
	}
</PageLayout>