filters now filter blog posts correctly

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 BlogPostDetails, type BlogPostLink } from "./posts";
-    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
     import BlogGallery from "$lib/lists/blog-gallery.svelte";
 
-    function selectFilter(tag: string) {
+    let filter = $state(BlogPostTag.NULL);
-        console.log(tag);
+    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 {
+    function filterPosts(): BlogPostLink[] {
-    //     let banner = "";
+        if (filter == BlogPostTag.NULL) {
-    //     if (entry.post.banner && entry.post.banner !== "") {
+            return posts;
-    //         banner = `/blog/${entry.key}/${entry.post.banner}`;
+        }
-    //     }
 
-    //     return {
+        let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter))
-    //         title: `${entry.post.title}`,
+        console.log(a);
-    //         subtitle: `#${(posts.length - index).toString().padStart(2, '0')} // ${entry.post.date}, ${entry.post.time}`,
+        return a;
-    //         img: banner,
+    }
-    //         link: `/blog/${entry.key}/`,
-    //         imgAlt: `Preview image for ${entry.post.title}`,
-    //         description: entry.post.description,
-    //     };
-    // }
 </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={() => {
+            <button class="post-tag tag-filter" onclick={() => {
-                selectFilter(tag)
+                setFilter(tag)
-            }} class="post-tag tag-filter">{tag}</button>
+            }}>{tag}</button>
         {/each}
     </div>
 
-    <BlogGallery {posts} />
+    <BlogGallery posts={filterPosts()} />
 </Content>
 
 <style>

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