From 22787eceda1700c9bdc5a517b582666deeff0fd6 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Thu, 10 Oct 2024 12:00:35 -0700
Subject: [PATCH] feat: Tag system

---
 README.md                            |  2 +-
 src/lib/components/PostHeader.svelte |  2 +-
 src/lib/posts.ts                     | 23 ++++++++++++++++++----
 src/lib/sitemap.ts                   |  2 +-
 src/routes/tag/+page.server.ts       |  7 +++++++
 src/routes/tag/+page.svelte          | 28 +++++++++++++++++++++++++++
 src/routes/tag/[slug]/+page.svelte   | 29 ++++++++++++++++++++++++++++
 src/routes/tag/[slug]/+page.ts       | 10 ++++++++++
 8 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/tag/+page.server.ts
 create mode 100644 src/routes/tag/[slug]/+page.svelte
 create mode 100644 src/routes/tag/[slug]/+page.ts

diff --git a/README.md b/README.md
index 77f68d6..7cc754f 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ npm run dev [-- --open]
 ### Formatting
 
 ``` bash
-npx run eslint
+npx eslint
 ```
 
 ### Testing
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index 0d01ff6..5546dcc 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -25,7 +25,7 @@
 					<DividerVertical />
 					</div>
 				{/if}
-				<a href="/">{tag}</a>
+				<a href="/tag/{tag}">{tag}</a>
 			{/each}
 		</p>
 		<p class="text-l text-gray-500">{date}</p>
diff --git a/src/lib/posts.ts b/src/lib/posts.ts
index ff2065e..0c31b6e 100644
--- a/src/lib/posts.ts
+++ b/src/lib/posts.ts
@@ -1,8 +1,8 @@
-export async function getPosts() {
+export async function getPosts(tag: string | null = null) {
 	const allPostFiles = import.meta.glob('$content/post/*.md');
 	const iterablePostFiles = Object.entries(allPostFiles);
 
-	const allPosts = await Promise.all(
+	let posts = await Promise.all(
 		iterablePostFiles.map(async ([pathMarkdown, resolver]) => {
 			const { metadata } = await resolver();
 			const pathPost = "/post/" + pathMarkdown.slice(pathMarkdown.lastIndexOf("/") + 1, -".md".length);
@@ -16,11 +16,26 @@ export async function getPosts() {
 			};
 		})
 	);
+	if (tag)
+		posts = posts.filter(obj => obj.meta.tags.includes(tag))
 
-	allPosts.sort((post1, post2) => {
+	posts.sort((post1, post2) => {
 		const date1: Date = post1.meta.date;
 		const date2: Date = post2.meta.date;
 		return date2.getTime() - date1.getTime();
 	});
-	return allPosts;
+	return posts;
+}
+
+export async function getTags() {
+	const allPostFiles = import.meta.glob('$content/post/*.md');
+	const iterablePostFiles = Object.entries(allPostFiles);
+
+	const allPosts: string[][] = await Promise.all(
+		iterablePostFiles.map(async ([_, resolver]) => {
+			const { metadata } = await resolver();
+			return metadata.tags;
+		})
+	);
+	return new Set(allPosts.flat());
 }
diff --git a/src/lib/sitemap.ts b/src/lib/sitemap.ts
index 97f9051..3b312b9 100644
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -1,7 +1,7 @@
 export const routes: { route: string, name: string, disabled?: boolean }[] = [
 	{ route: "/", name: "Home" },
 	{ route: "/post", name: "Blog" },
-	{ route: "/tag", name: "Tags", disabled: true },
+	{ route: "/tag", name: "Tags" },
 	{ route: "/gallery", name: "Gallery", disabled: true },
 	{ route: "/archives", name: "Archives" },
 ];
diff --git a/src/routes/tag/+page.server.ts b/src/routes/tag/+page.server.ts
new file mode 100644
index 0000000..a5bf330
--- /dev/null
+++ b/src/routes/tag/+page.server.ts
@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+import { getTags } from '$lib/posts';
+
+export const load: PageLoad = async (_) => {
+	const allTags = await getTags();
+	return { allTags };
+};
diff --git a/src/routes/tag/+page.svelte b/src/routes/tag/+page.svelte
index e69de29..2386ccf 100644
--- a/src/routes/tag/+page.svelte
+++ b/src/routes/tag/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	const { allTags } = data;
+	import siteMetadata from '$content/metadata.json';
+</script>
+
+<svelte:head>
+	<title>Tags | {siteMetadata.blogName}</title>
+</svelte:head>
+
+<h1>Tags</h1>
+
+<hr class="separator" />
+<ul id="catalog" class="content">
+	{#each allTags as tag}
+		<li>
+			<a href="/tag/{tag}">{tag}</a>
+		</li>
+	{/each}
+</ul>
+<hr class="separator" />
+
+<style>
+	#catalog li {
+		margin-bottom: 10px;
+	}
+</style>
diff --git a/src/routes/tag/[slug]/+page.svelte b/src/routes/tag/[slug]/+page.svelte
new file mode 100644
index 0000000..ccf9660
--- /dev/null
+++ b/src/routes/tag/[slug]/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+	const { name, posts } = data;
+	import siteMetadata from '$content/metadata.json';
+	import PostHeader from '$lib/components/PostHeader.svelte';
+</script>
+
+<svelte:head>
+	<title>{name} | {siteMetadata.blogName}</title>
+</svelte:head>
+
+<h1>{name}</h1>
+
+<hr class="separator" />
+<ul id="catalog" class="content">
+	{#each posts as post}
+		<li>
+			<PostHeader metadata={post.meta} link={post.path} />
+		</li>
+	{/each}
+</ul>
+<hr class="separator" />
+
+<style>
+	#catalog li {
+		margin-bottom: 10px;
+	}
+</style>
diff --git a/src/routes/tag/[slug]/+page.ts b/src/routes/tag/[slug]/+page.ts
new file mode 100644
index 0000000..f3a0fe0
--- /dev/null
+++ b/src/routes/tag/[slug]/+page.ts
@@ -0,0 +1,10 @@
+import type { PageLoad } from './$types';
+import { getPosts } from '$lib/posts';
+
+export const load: PageLoad = async ({ params }) => {
+	const posts = await getPosts(params.slug);
+	return {
+		name: params.slug,
+		posts,
+	};
+}