added blog post tag filter buttons

src/lib/lists/blog-gallery.svelte

@@ -19,7 +19,7 @@
                 <p class="entry-description">{post.post.description}</p>
                 <div class="entry-tag-container">
                     {#each post.post.tags as tag}
-                        <span>{tag}</span>
+                        <span class="post-tag">{tag}</span>
                     {/each}
                 </div>
             </div>
@@ -99,15 +99,4 @@
         flex-direction: row;
         flex-wrap: nowrap;
     }
-
-    .entry-tag-container span {
-        font-family: var(--font-mono);
-        font-size: 0.8rem;
-        background-color: var(--color-background-highlight-alt);
-        margin: 0;
-        padding: 4px;
-        border-radius: 8px;
-        line-height: 1.0rem;
-        font-weight: 600;
-    }
 </style>

src/routes/blog/+layout.svelte

@@ -0,0 +1,20 @@
+<script>
+    let { children } = $props();
+</script>
+
+{@render children()}
+
+<style>
+    :global {
+        .post-tag {
+            font-family: var(--font-mono);
+            font-size: 0.8rem;
+            background-color: var(--color-background-highlight-alt);
+            margin: 0;
+            padding: 4px;
+            border-radius: 8px;
+            line-height: 1rem;
+            font-weight: 600;
+        }
+    }
+</style>

src/routes/blog/+page.svelte

@@ -2,8 +2,12 @@
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/viewport/content.svelte";
     // import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
-    import { posts, type BlogPostLink } from "./posts";
+    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
     import BlogGallery from "$lib/lists/blog-gallery.svelte";
+
+    function selectFilter(tag: string) {
+        console.log(tag);
+    }
     
     // let entries: GalleryEntry[] = posts.map(mapEntries);
 
@@ -34,5 +38,35 @@
         banner="robert.webp"
         bannerAlt="View at a tram bridge rising and then curving to the left." />
 
+    <!-- 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>
+        {/each}
+    </div>
+
     <BlogGallery {posts} />
-</Content>
+</Content>
+
+<style>
+    .tag-filter-container {
+        display: flex;
+        gap: 12px;
+        margin-bottom: 8px;
+    }
+
+    .tag-filter {
+        width: fit-content;
+        font-size: 0.9rem;
+        color: var(--color-text);
+        padding: 8px;
+        border-radius: 12px;
+        cursor: pointer;
+    }
+
+    .tag-filter:hover {
+        background-color: aqua;
+    }
+</style>

src/routes/blog/posts.ts

@@ -26,8 +26,8 @@ export interface BlogPostLink {
 export enum BlogPostTag {
 	ART = "art-stuff", // ramblings to do with art
 	DRAWING = "drawing", // self-explanatory
-	TECH_TIP = "tech-tip", // tech guides
 	META = "natconf-meta", // about the website itself
+	TECH_TIP = "tech-tip", // tech guides
 }