---
import Base from "../layouts/Base.astro";
import Topbar from "../components/Topbar.astro";
import Sidebar from "../components/Sidebar.astro";
import { getCollection } from 'astro:content';

const posts = await getCollection('posts', ({ data }) => data.published === true);
posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---

<Base title="home">
  <Topbar slot="topbar" />
  <Sidebar slot="sidebar" />

  {posts.map((post) => (
    <div class="p-4 mb-3 rounded-lg bg-ctp-surface">
      <a href={`/posts/${post.id}`} class="text-ctp-accent">{post.data.title}</a>
      <p class="text-ctp-subtext text-xs">{post.data.date.toDateString()}</p>
    </div>
  ))}
</Base>