From 982589927fd4bd2f31ef3e72f30693821e051b1c Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Mon, 25 Aug 2025 11:18:39 +0930
Subject: [PATCH] Allow filtering of projects

---
 src/components/ProjectCard.astro | 14 ++++++-
 src/pages/projects.astro         | 70 +++++++++++++++++++++++++++++++-
 2 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 8930804..947ed22 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -14,9 +14,16 @@ interface Props {
   project: CollectionEntry<"projects">;
   textOn?: "left" | "right";
   quality?: number;
+  class?: string;
 }
 
-const { project, textOn = "left", quality = "80" } = Astro.props;
+const {
+  project,
+  textOn = "left",
+  quality = "80",
+  class: className,
+  ...attrs
+} = Astro.props;
 
 const images = getAllProjectImages(project);
 
@@ -124,7 +131,10 @@ const projectHasBody = project.body && project.body.trim().length > 0;
 const link = `/projects/${slugify(project.data.type)}/${slugify(project.data.slug)}/`;
 ---
 
-<div class="grid grid-cols-1 text-left md:grid-cols-2">
+<div
+  class:list={["grid grid-cols-1 text-left md:grid-cols-2", className]}
+  {...attrs}
+>
   <div
     class:list={[
       "order-1 flex flex-col items-start justify-center py-4",
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index a1aca3d..f973437 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,14 +1,19 @@
 ---
 import { getCollection } from "astro:content";
 
-import SectionTitle from "../components/SectionTitle.astro";
-import MainLayout from "../layouts/MainLayout.astro";
+import { slugify } from "@lib/utils";
 
+import SectionTitle from "@components/SectionTitle.astro";
+import MainLayout from "@layouts/MainLayout.astro";
+
+import Token from "@components/Token.astro";
 import ProjectCard from "@components/ProjectCard.astro";
 
 const projects = (await getCollection("projects")).sort(
   (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
 );
+
+const types = [...new Set(projects.map((project) => project.data.type))];
 ---
 
 <MainLayout title="Projects">
@@ -16,6 +21,22 @@ const projects = (await getCollection("projects")).sort(
     <section id="projects" class="bg-white dark:bg-gray-950">
       <div class="mx-auto max-w-4xl px-8 py-16 text-center">
         <SectionTitle>Recent Projects</SectionTitle>
+        <div id="filter-tokens" class="my-8 space-x-2">
+          <Token
+            class="filter-token !text-primary ring-primary bg-white ring-2 hover:cursor-pointer"
+            data-type="all">All</Token
+          >
+          {
+            types.map((type) => (
+              <Token
+                class="filter-token hover:cursor-pointer"
+                data-type={slugify(type)}
+              >
+                {type}
+              </Token>
+            ))
+          }
+        </div>
         <div class="space-y-16 md:space-y-8">
           {
             projects.map((project, index) => {
@@ -23,6 +44,8 @@ const projects = (await getCollection("projects")).sort(
                 <ProjectCard
                   project={project}
                   textOn={index % 2 === 0 ? "left" : "right"}
+                  data-type={slugify(project.data.type)}
+                  class="project"
                 />
               );
             })
@@ -32,3 +55,46 @@ const projects = (await getCollection("projects")).sort(
     </section>
   </div>
 </MainLayout>
+
+<script>
+  function setUpFilters() {
+    const tokensContainer = document.querySelector("#filter-tokens");
+
+    if (!tokensContainer) return;
+
+    const tokens =
+      tokensContainer.querySelectorAll<HTMLElement>(".filter-token");
+    const projects = document.querySelectorAll<HTMLElement>(".project");
+
+    tokensContainer.addEventListener("click", (e) => {
+      const token = (e.target as Element).closest<HTMLElement>(".filter-token");
+      if (!token) return;
+
+      tokens.forEach((t) =>
+        t.classList.remove(
+          "bg-white",
+          "!text-primary",
+          "ring-primary",
+          "ring-2"
+        )
+      );
+
+      token.classList.add(
+        "bg-white",
+        "!text-primary",
+        "ring-primary",
+        "ring-2"
+      );
+
+      const type = token.dataset.type;
+
+      projects.forEach((project) => {
+        const match = type === "all" || project.dataset.type === type;
+        project.classList.toggle("hidden", !match);
+      });
+    });
+  }
+
+  setUpFilters();
+  document.addEventListener("astro:page-load", setUpFilters);
+</script>