update page structure

src/pages/blog/[...slug].astro

@@ -0,0 +1,32 @@
+---
+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>

src/pages/blog/archive/[tag].astro

@@ -0,0 +1,62 @@
+---
+import { format, add } from 'date-fns';
+import { getCollection } from 'astro:content';
+
+import Layout from '@layouts/Layout.astro';
+
+export async function getStaticPaths() {
+	const posts = await getCollection('blog');
+
+	const tags = ['all'];
+	posts.forEach((post) =>
+		post.data.tags.forEach((tag) => {
+			if (!tags.includes(tag)) {
+				tags.push(tag);
+			}
+		})
+	);
+
+	return tags.map((tag) => ({
+		params: { tag },
+		props: { tag },
+	}));
+}
+
+const { tag }: { tag?: string } = Astro.params;
+
+const posts = await getCollection('blog', ({ data }) => {
+	if (!tag) {
+		return false;
+	}
+
+	if (tag === 'all') {
+		return true;
+	}
+
+	return data.tags.includes(tag);
+});
+
+if (posts.length === 0) {
+	return Astro.redirect('/404');
+}
+
+posts.sort(
+	(a, b) =>
+		Date.parse(String(b.data.pubDate)) - Date.parse(String(a.data.pubDate))
+);
+---
+
+<Layout title="Blog Archive">
+	<ul>
+		{
+			posts.map(({ slug, data }) => (
+				<li>
+					<a href={`/posts/${slug}`}>{data.title}</a> -
+					<span>
+						{format(add(new Date(data.pubDate), { hours: 6 }), 'MMM do, y')}
+					</span>
+				</li>
+			))
+		}
+	</ul>
+</Layout>

src/pages/blog/index.astro

@@ -0,0 +1,28 @@
+---
+import { getCollection } from 'astro:content';
+
+import Layout from '@layouts/Layout.astro';
+import PostPreview from '@components/PostPreview.astro';
+
+const posts = await getCollection('blog');
+---
+
+<Layout title="Home">
+	{
+		posts
+			.sort(
+				(a, b) =>
+					new Date(b.data.pubDate).valueOf() -
+					new Date(a.data.pubDate).valueOf()
+			)
+			.slice(0, 10)
+			.map((post) => <PostPreview post={post} />)
+	}
+	{
+		posts.length < 6 ? null : (
+			<div class="more-posts">
+				<a href="blog/archive/all">All Posts</a>
+			</div>
+		)
+	}
+</Layout>