From 2ad54e184c5355ab8f1e3b3919af1b51829409f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 20 Feb 2026 19:36:51 +0100
Subject: [PATCH] feat: add tag template with header and infinite scroll

---
 tag.hbs | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 tag.hbs

diff --git a/tag.hbs b/tag.hbs
new file mode 100644
index 0000000..a8fc2c1
--- /dev/null
+++ b/tag.hbs
@@ -0,0 +1,43 @@
+{{!< default}}
+
+{{#tag}}
+<header class="container mx-auto px-4 py-16 md:py-24 text-center animate-fadeInUp">
+    <span class="text-xs uppercase tracking-[0.3em] text-[var(--text-tertiary)] mb-4 block">Tag</span>
+    <h1 class="text-6xl md:text-8xl font-bold tracking-tighter text-[var(--brand-primary)] mb-4">{{name}}</h1>
+    {{#if description}}
+        <p class="mt-4 text-xl md:text-2xl text-[var(--text-secondary)] max-w-2xl mx-auto font-serif italic italic opacity-90">{{description}}</p>
+    {{else}}
+        <p class="mt-4 text-xl md:text-2xl text-[var(--text-secondary)] max-w-2xl mx-auto font-serif italic italic opacity-90">A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}</p>
+    {{/if}}
+</header>
+{{/tag}}
+
+<div class="container mx-auto px-4 pb-20">
+    {{#if posts}}
+        <div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+            {{#foreach posts}}
+                {{> "post-card"}}
+            {{/foreach}}
+
+            {{#if pagination.next}}
+                <div id="pagination-trigger" 
+                     hx-get="{{page_url pagination.next}}" 
+                     hx-trigger="revealed" 
+                     hx-select="#posts-container > *" 
+                     hx-target="this" 
+                     hx-swap="outerHTML"
+                     hx-indicator="#loading-spinner"
+                     class="col-span-full h-1">
+                </div>
+            {{/if}}
+        </div>
+
+        <div id="loading-spinner" class="htmx-indicator text-center py-12">
+            <div class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
+            <p class="text-[var(--text-secondary)] mt-4 font-medium tracking-wide">Loading more posts...</p>
+        </div>
+
+    {{else}}
+        <p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
+    {{/if}}
+</div>