From 00115ad5a0f2e043b639d9e92cab410aaadd0ece Mon Sep 17 00:00:00 2001
From: grassblock <hi@imgb.space>
Date: Wed, 28 May 2025 22:19:01 +0800
Subject: [PATCH] feat: add categories and tags page (WIP)

---
 src/content/posts/_schemas.ts            |  2 ++
 src/content/posts/minimalism/index.md    |  4 +++
 src/pages/categories.astro               | 17 ++++++++++++
 src/pages/categories/[...category].astro | 33 ++++++++++++++++++++++++
 src/pages/tags.astro                     | 17 ++++++++++++
 src/pages/tags/[...tag].astro            | 31 ++++++++++++++++++++++
 6 files changed, 104 insertions(+)
 create mode 100644 src/pages/categories.astro
 create mode 100644 src/pages/categories/[...category].astro
 create mode 100644 src/pages/tags.astro
 create mode 100644 src/pages/tags/[...tag].astro

diff --git a/src/content/posts/_schemas.ts b/src/content/posts/_schemas.ts
index bc668d1..15806c1 100644
--- a/src/content/posts/_schemas.ts
+++ b/src/content/posts/_schemas.ts
@@ -5,6 +5,8 @@ export const posts = ({ image }) => z.object({
   description: z.string(),
   pubDate: z.coerce.date(),
   updatedDate: z.coerce.date().optional(),
+  categories: z.array(z.string()).optional().default(['uncategorized']),
+  tags: z.array(z.string()).optional().default([]),
   cover: image().optional(),
   author: z.string().optional(),
 });
\ No newline at end of file
diff --git a/src/content/posts/minimalism/index.md b/src/content/posts/minimalism/index.md
index c29b2bd..24c9388 100644
--- a/src/content/posts/minimalism/index.md
+++ b/src/content/posts/minimalism/index.md
@@ -3,6 +3,10 @@ title: 'The Art of Minimalism'
 description: 'Thoughts on minimalism in design and code'
 pubDate: '2025-06-05'
 author: 'Wheatley'
+tags: 
+  - 'design'
+  - 'code' 
+  - 'minimalism'
 ---
 
 Minimalism isn't just about having less, it's about making room for what matters.
diff --git a/src/pages/categories.astro b/src/pages/categories.astro
new file mode 100644
index 0000000..bae76c3
--- /dev/null
+++ b/src/pages/categories.astro
@@ -0,0 +1,17 @@
+---
+import {getCollection} from "astro:content";
+import Layout from "../layouts/Layout.astro";
+const allPosts = await getCollection('posts');
+const uniqueCategories = [...new Set(allPosts.map((post: any) => post.data.categories ? post.data.categories : []).flat())];
+---
+<Layout title="Categoies" description="List all categories used in the blog posts.">
+    <h1 class="title">~/blog/categories</h1>
+    <div style="margin-top: 2rem;">
+        <span class="command">ls -l categories/</span>
+        <div style="margin-top: 1rem; margin-left: 1rem;">
+            {uniqueCategories.map((tag) => (
+                    <p><a href={`/categories/${tag}`}>{tag}</a></p>
+            ))}
+        </div>
+    </div>
+</Layout>
diff --git a/src/pages/categories/[...category].astro b/src/pages/categories/[...category].astro
new file mode 100644
index 0000000..4270589
--- /dev/null
+++ b/src/pages/categories/[...category].astro
@@ -0,0 +1,33 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import {getCollection} from "astro:content";
+import {categoryLabel} from "astro/client/dev-toolbar/apps/audit/rules";
+
+export async function getStaticPaths() {
+    const allPosts = await getCollection('posts');
+    console.log(allPosts)
+    const uniqueCategories = [...new Set(allPosts.map((post: any) => post.data.categories ? post.data.categories : []).flat())];
+    return uniqueCategories.map((category) => {
+        const filteredPosts = allPosts.filter((post: any) => post.data.categories?.includes(category));
+        return {
+            params: { category },
+            props: { posts: filteredPosts },
+        };
+    });
+}
+
+const { category } = Astro.params;
+
+const { posts } = Astro.props;
+---
+<Layout title={`posts tagged with ${category}`} description={`Posts tagged with ${category}`}>
+    <h1 class="title">ls ~/blog | grep "{category}"</h1>
+    <ul>
+        {posts.map((post: any) =>
+            <p>
+                <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
+                <a href={`/post/${post.slug}`}>{post.data.title}</a>
+            </p>
+        )}
+    </ul>
+</Layout>
\ No newline at end of file
diff --git a/src/pages/tags.astro b/src/pages/tags.astro
new file mode 100644
index 0000000..340f690
--- /dev/null
+++ b/src/pages/tags.astro
@@ -0,0 +1,17 @@
+---
+import {getCollection} from "astro:content";
+import Layout from "../layouts/Layout.astro";
+const allPosts = await getCollection('posts');
+const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags ? post.data.tags : []).flat())];
+---
+<Layout title="Tags" description="List all tags used in the blog posts.">
+    <h1 class="title">~/blog/tags</h1>
+    <div style="margin-top: 2rem;">
+        <span class="command">ls -l tags/</span>
+        <div style="margin-top: 1rem; margin-left: 1rem;">
+            {uniqueTags.map((tag) => (
+                    <p><a href={`/tags/${tag}`}>{tag}</a></p>
+            ))}
+        </div>
+    </div>
+</Layout>
diff --git a/src/pages/tags/[...tag].astro b/src/pages/tags/[...tag].astro
new file mode 100644
index 0000000..3b834c1
--- /dev/null
+++ b/src/pages/tags/[...tag].astro
@@ -0,0 +1,31 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import {getCollection} from "astro:content";
+
+export async function getStaticPaths() {
+    const allPosts = await getCollection('posts');
+    const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags ? post.data.tags : []).flat())];
+    return uniqueTags.map((tag) => {
+        const filteredPosts = allPosts.filter((post: any) => post.data.tags?.includes(tag));
+        return {
+            params: { tag },
+            props: { posts: filteredPosts },
+        };
+    });
+}
+
+const { tag } = Astro.params;
+
+const { posts } = Astro.props;
+---
+<Layout title={`posts tagged with ${tag}`} description={`Posts tagged with ${tag}`}>
+    <h1 class="title">ls ~/blog | grep "{tag}"</h1>
+    <ul>
+        {posts.map((post: any) =>
+            <p>
+                <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
+                <a href={`/post/${post.slug}`}>{post.data.title}</a>
+            </p>
+        )}
+    </ul>
+</Layout>
\ No newline at end of file