---
import { getCollection } from "astro:content"
import PageLayout from "@layouts/PageLayout.astro"
import TopLayout from "@layouts/TopLayout.astro"
import BottomLayout from "@layouts/BottomLayout.astro"
import Blog from "@components/Blog"
import { BLOG } from "@consts"

const posts = (await getCollection("blog"))
  .filter(post => !post.data.draft)
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())

const tags = [...new Set(posts.flatMap(post => post.data.tags))]
  .sort((a, b) => a.localeCompare(b))
---

<PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
  <TopLayout>
    <div class="animate page-heading">
      {BLOG.TITLE}
    </div>
  </TopLayout>
  <BottomLayout>
    <div class="animate">
      <Blog client:load tags={tags} data={posts} />
    </div>
  </BottomLayout>
</PageLayout>


