---
import { getCollection } from 'astro:content';

import Layout from '@layouts/Layout.astro';
import BlogHeader from '@components/BlogHeader.astro';
import Tags from '@components/Tags.astro';

export async function getStaticPaths() {
	const posts = await getCollection('blog');
	return posts.map((post) => ({
		params: { slug: post.slug },
		props: { post },
	}));
}

const { post } = Astro.props;

const { data } = post;

const { Content } = await post.render();
---

<Layout title={data.title}>
	<BlogHeader title={data.title} date={data.pubDate} />
	<article>
		<Content />
	</article>
	<a href="https://notbyai.fyi/">
		<i class="not-by-ai"></i>
	</a>
	<Tags tags={data.tags} />
</Layout>

<style is:global>
	article img {
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		display: block;
		margin: auto;
	}
	.no-shadow {
		box-shadow: none;
	}
	.footnotes {
		font-size: 0.8rem;
	}
	.footnotes p {
		display: inline;
	}
</style>
