---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Post from "../components/Post.astro";
import ColorScript from "../components/ColorScript.astro";

import { SITE_TITLE, SITE_DESCRIPTION } from "../config";

// Use Astro.glob() to fetch all posts, and then sort them by date.
const posts = (await Astro.glob("../posts/*.md")).sort(
	(a, b) =>
		new Date(b.frontmatter.added).valueOf() -
		new Date(a.frontmatter.added).valueOf()
);
---

<!DOCTYPE html>
<html lang="en-us">
	<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
	<body>
		<Header />
		<main>
			<content>
				<ul class="posts-list">
					{
						posts.map(
							({
								url,
								frontmatter: { description, slug, title, tags, added: date },
							}) => <Post {description} {date} {slug} {title} {tags} />
						)
					}
				</ul>
			</content>
			<Footer />
		</main>
		<ColorScript />
	</body>
</html>
