From 4ea6d168a62f4dd4b2c06d00a5719a8ea2da48dd Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Tue, 31 Mar 2026 15:28:37 +0200
Subject: [PATCH] filters now filter blog posts correctly

---
 src/routes/blog/+page.svelte | 43 ++++++++++++++++--------------------
 src/routes/blog/posts.ts     |  1 +
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index e44ce4f..92574e8 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,31 +1,26 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/viewport/content.svelte";
-    // import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
-    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
+    import { BlogPostTag, posts, type BlogPostDetails, type BlogPostLink } from "./posts";
     import BlogGallery from "$lib/lists/blog-gallery.svelte";
 
-    function selectFilter(tag: string) {
-        console.log(tag);
+    let filter = $state(BlogPostTag.NULL);
+    let filteredPosts = filterPosts();
+
+    function setFilter(tag: BlogPostTag) {
+        filter = tag;
+        console.log(filter);
     }
-    
-    // let entries: GalleryEntry[] = posts.map(mapEntries);
 
-    // function mapEntries(entry: BlogPostLink, index: number): GalleryEntry {
-    //     let banner = "";
-    //     if (entry.post.banner && entry.post.banner !== "") {
-    //         banner = `/blog/${entry.key}/${entry.post.banner}`;
-    //     }
+    function filterPosts(): BlogPostLink[] {
+        if (filter == BlogPostTag.NULL) {
+            return posts;
+        }
 
-    //     return {
-    //         title: `${entry.post.title}`,
-    //         subtitle: `#${(posts.length - index).toString().padStart(2, '0')} // ${entry.post.date}, ${entry.post.time}`,
-    //         img: banner,
-    //         link: `/blog/${entry.key}/`,
-    //         imgAlt: `Preview image for ${entry.post.title}`,
-    //         description: entry.post.description,
-    //     };
-    // }
+        let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter))
+        console.log(a);
+        return a;
+    }
 </script>
 
 <svelte:head>
@@ -41,13 +36,13 @@
     <!-- TODO descriptions on filter click -->
     <div class="tag-filter-container">
         {#each Object.values(BlogPostTag) as tag}
-            <button onclick={() => {
-                selectFilter(tag)
-            }} class="post-tag tag-filter">{tag}</button>
+            <button class="post-tag tag-filter" onclick={() => {
+                setFilter(tag)
+            }}>{tag}</button>
         {/each}
     </div>
 
-    <BlogGallery {posts} />
+    <BlogGallery posts={filterPosts()} />
 </Content>
 
 <style>
diff --git a/src/routes/blog/posts.ts b/src/routes/blog/posts.ts
index 9fb0d86..5ced2ae 100644
--- a/src/routes/blog/posts.ts
+++ b/src/routes/blog/posts.ts
@@ -24,6 +24,7 @@ export interface BlogPostLink {
 }
 
 export enum BlogPostTag {
+	NULL = "X", // placeholder when a 'no tag' is needed. if in doubt, do not use this
 	ART = "art-stuff", // ramblings to do with art
 	DRAWING = "drawing", // self-explanatory
 	META = "natconf-meta", // about the website itself