website/src/pages/index.astro

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

// Posts
const MAX_POSTS = 10;
const allPosts = await getAllPosts();
const allPostsByDate = allPosts.sort(collectionDateSort) as CollectionEntry<"post">[];
const latestPosts = allPostsByDate.slice(0, MAX_POSTS);

// Pinned Posts, set to a max of 3;
const MAX_PINNED_POSTS = 3;
const pinnedPosts = allPostsByDate
	.values()
	.filter((p) => p.data.pinned)
	.take(MAX_PINNED_POSTS)
	.toArray();

// Notes, set to a max of 5
const MAX_NOTES = 5;
const allNotes = await getCollection("note");
const latestNotes = allNotes
	.sort(collectionDateSort)
	.slice(0, MAX_NOTES) as CollectionEntry<"note">[];
---

<PageLayout meta={{ title: "Home" }}>
	<section>
		<h1 class="title mb-12">Hello World!</h1>
		<p class="mb-4">
			Hi, I’m a theme for Astro, a simple starter that you can use to create your website or blog.
			If you want to know more about how you can customise me, add more posts, and make it your own,
			click on the GitHub icon link below and it will take you to my repo.
		</p>
		<SocialList />
	</section>
	{
		pinnedPosts.length > 0 && (
			<section class="mt-16">
				<h2 class="title mb-6 text-xl">Pinned Posts</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>
		)
	}
	<section class="mt-16">
		<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">Posts</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>
	{
		latestNotes.length > 0 && (
			<section class="mt-16">
				<h2 class="title text-accent mb-6 text-xl">
					<a href="/notes/">Notes</a>
				</h2>
				<ul class="space-y-6" role="list">
					{latestNotes.map((note) => (
						<li>
							<Note note={note} as="h3" isPreview />
						</li>
					))}
				</ul>
			</section>
		)
	}
</PageLayout>