tags and such

src/pages/archive.astro

@@ -1,64 +0,0 @@
----
-import { getCollection } from 'astro:content'
-const sortParam = Astro.url.search.split('=')[1]
-
-import Layout from '@layouts/Layout.astro'
-import FormattedDate from '@components/FormattedDate.astro'
-
-const posts = await getCollection('blog')
-
-switch (sortParam) {
-	case 'date-des':
-		posts.sort(
-			(a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate)
-		)
-		break
-	case 'date-asc':
-		posts.sort(
-			(a, b) => Date.parse(a.data.pubDate) - Date.parse(b.data.pubDate)
-		)
-		break
-	case 'title':
-		posts.sort((a, b) => a.data.title - b.data.title)
-	default:
-		break
-}
----
-
-<Layout title="Blog Archive">
-	<div class="archive-options">
-		<div class="select-container">
-			<select name="sort by" id="sort-by">
-				<option value="title">Title (Alphabetically)</option>
-				<option value="date-des">Publish Date (Newest First)</option>
-				<option value="date-asc">Publish Date (Oldest First)</option>
-			</select>
-		</div>
-	</div>
-	{
-		posts.map(({ slug, data }) => (
-			<div>
-				<a href={`/posts/${slug}`}>{data.title}</a> -{' '}
-				<FormattedDate date={data.pubDate} />
-			</div>
-		))
-	}
-</Layout>
-
-<script is:inline>
-	const sort = location.search.split('=')[1]
-	const sortEl = document.querySelector('#sort-by')
-
-	sortEl.value = sort || 'title'
-
-	sortEl.addEventListener(
-		'change',
-		() => (window.location.href = `/archive?sort=${sortEl.value}`)
-	)
-</script>
-
-<style>
-	.archive-options {
-		padding: 10px 0 20px;
-	}
-</style>

src/pages/archive/[tag].astro

@@ -0,0 +1,32 @@
+---
+import { getCollection } from 'astro:content'
+
+import Layout from '@layouts/Layout.astro'
+import FormattedDate from '@components/FormattedDate.astro'
+
+const { tag } = Astro.params
+console.log(tag)
+const posts = await getCollection('blog', ({ data }) => {
+	if (tag === 'all') {
+		return true
+	}
+	return data.tags.includes(tag)
+})
+
+if (posts.length === 0) {
+	return Astro.redirect('/404')
+}
+
+posts.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
+---
+
+<Layout title="Blog Archive">
+	{
+		posts.map(({ slug, data }) => (
+			<div>
+				<a href={`/posts/${slug}`}>{data.title}</a> -{' '}
+				<FormattedDate date={data.pubDate} />
+			</div>
+		))
+	}
+</Layout>

src/pages/index.astro

@@ -18,7 +18,7 @@ const posts = await getCollection('blog')
 	{
 		posts.length < 5 ? null : (
 			<div class="more-posts">
-				<a class="link-button blue-btn" href="/archive">
+				<a class="link-button blue-btn" href="/archive/all">
 					All Posts
 				</a>
 			</div>

src/pages/posts/[slug].astro

@@ -4,6 +4,7 @@ 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')
@@ -25,6 +26,7 @@ const { Content } = await post.render()
 	<article>
 		<Content />
 	</article>
+	<Tags tags={data.tags} />
 </Layout>
 
 <style is:global>