feat: add tabbed category filtering to list page with All view default

content/books/the-midnight-library.md

@@ -3,7 +3,7 @@ title: "The Three Body Problem"
 category: "Books"
 image: "/img/3body.jpg"
 rating: 5.0
-tags: ["sciencefiction", "fantasy", "bestseller"]
+tags: ["sciencefiction", "bestseller"]
 description: "A novel about choices, regrets, and the infinite possibilities of life."
 link:
   url: "https://en.wikipedia.org/wiki/The_Three-Body_Problem_(novel)"

layouts/_default/list.html

@@ -1,13 +1,54 @@
 {{ define "main" }}
-    <h2>{{ .Title }}</h2>
-    {{ .Content }} 
-    <ul>
-        {{ range .Pages.ByDate.Reverse }}
-            <li>
-                <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-                <p><small>Published: {{ .Date.Format "January 2, 2006" }}</small></p>
-                {{ .Summary }}
-            </li>
+<div class="tabs" id="tabs">
+  {{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
+  {{ range $i, $cat := $categories }}
+    <div class="tab{{ if eq $i 0 }} active{{ end }}" data-tab="{{ $cat }}">{{ $cat }}</div>
   {{ end }}
-    </ul>
+</div>
+<div class="cards" id="cards">
+  {{ range .Pages }}
+    {{ if .Params.category }}
+      {{ partial "card.html" . }}
+    {{ end }}
+  {{ end }}
+</div>
+<script>
+// Tab switching with "All" default view
+// (same as index.html)
+document.addEventListener('DOMContentLoaded', function() {
+  const tabs = document.querySelectorAll('.tab');
+  const cards = document.getElementById('cards');
+  const allCards = Array.from(cards.children);
+  
+  // Add an "All" tab at the beginning
+  const tabsContainer = document.getElementById('tabs');
+  const allTab = document.createElement('div');
+  allTab.className = 'tab active';
+  allTab.textContent = 'All';
+  allTab.setAttribute('data-tab', 'all');
+  tabsContainer.prepend(allTab);
+  
+  // Make other tabs inactive initially
+  tabs.forEach(tab => tab.classList.remove('active'));
+  
+  // Add click handler for all tabs (including the new All tab)
+  document.querySelectorAll('.tab').forEach(tab => {
+    tab.addEventListener('click', function() {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      this.classList.add('active');
+      const cat = this.getAttribute('data-tab');
+      
+      allCards.forEach(card => {
+        if (cat === 'all') {
+          card.style.display = '';
+        } else {
+          // Add a data-category attribute to make filtering more reliable
+          const category = card.getAttribute('data-category');
+          card.style.display = (category === cat) ? '' : 'none';
+        }
+      });
+    });
+  });
+});
+</script>
 {{ end }}