1  ---
 2  import { getCollection } from "astro:content";
 3  import MainLayout from "~/layouts/MainLayout.astro";
 4  import BackButton from "../components/BackButton.astro";
 5  import PostList from "../components/PostList.svelte";
 6  
 7  const posts = await getCollection("posts", ({ data }) => !data.draft);
 8  
 9  // sort from latest to oldest
10  posts.sort((a, b) => (a.data.date > b.data.date ? -1 : 1));
11  ---
12  
13  <MainLayout seo={{ title: "Posts" }}>
14  	<section class="mx-auto max-w-[920px] px-4 py-10">
15  		<BackButton />
16  		<h1
17  			class="font-display relative inline-block text-3xl md:text-4xl font-bold text-pink-950 my-6 tracking-wide"
18  		>
19  			All Posts
20  		</h1>
21  		<PostList client:load posts={posts.map(({ data, slug }) => ({ ...data, slug }))} />
22  	</section>
23  </MainLayout>