---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import ColorScript from "../components/ColorScript.astro";
import Tags from "../components/Tags.astro";
import getTags from "../scripts/getTags";

const posts = await Astro.glob("../posts/*.md");
const tags = getTags(posts);

const {
	content: { title, description, added, updatedDate, heroImage },
} = Astro.props;
---

<html>
	<BaseHead title={title} description={description} />

	<body>
		<Header />
		<main>
			<article>
				{heroImage && <img width={720} height={360} src={heroImage} alt="" />}
				<h1 class="article-title">{title}</h1>
				{added && <time>{added}</time>}
				{
					updatedDate && (
						<div>
							Last updated on <time>{updatedDate}</time>
						</div>
					)
				}
				<hr />
				<slot />
			</article>
		</main>
		<Tags tags={tags} />
		<Footer />
		<ColorScript />
	</body>
</html>
