feat: implement tabbed category navigation with card layout for content browsing

layouts/_default/list.html

@@ -5,22 +5,44 @@
     <div class="tab{{ if eq $i 0 }} active{{ end }}" data-tab="{{ $cat }}">{{ $cat }}</div>
   {{ end }}
 </div>
-<div class="cards" id="cards">
+
-  {{ $currentCat := .Title }}
+<div class="cards-container">
-  {{ range .Site.RegularPages }}
+  {{ range $cat := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
-    {{ if and (.Params.category) (or (eq $currentCat "All") (eq .Params.category $currentCat)) }}
+    <div class="category-cards" id="category-{{ $cat | urlize }}">
-      {{ partial "card.html" . }}
+      {{ range where $.Site.RegularPages "Params.category" $cat }}
-    {{ end }}
+        {{ if not (eq .Params.draft true) }}
+          {{ partial "card.html" . }}
+        {{ end }}
+      {{ end }}
+    </div>
   {{ 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);
   
+  <!-- All cards section (shown by default) -->
+  <div class="category-cards active" id="category-all">
+    {{ range .Site.RegularPages }}
+      {{ if not (eq .Params.draft true) }}
+        {{ partial "card.html" . }}
+      {{ end }}
+    {{ end }}
+  </div>
+</div>
+<style>
+.cards-container {
+  width: 100%;
+}
+.category-cards {
+  display: none; /* Hide all category sections by default */
+}
+.category-cards.active {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
   // Add an "All" tab at the beginning
   const tabsContainer = document.getElementById('tabs');
   const allTab = document.createElement('div');
@@ -30,26 +52,45 @@ document.addEventListener('DOMContentLoaded', function() {
   tabsContainer.prepend(allTab);
   
   // Make other tabs inactive initially
-  tabs.forEach(tab => tab.classList.remove('active'));
+  document.querySelectorAll('.tab').forEach(tab => {
+    tab.classList.remove('active');
+  });
+  allTab.classList.add('active');
   
-  // Add click handler for all tabs (including the new All tab)
+  // Add click handler for all tabs
   document.querySelectorAll('.tab').forEach(tab => {
     tab.addEventListener('click', function() {
+      const selectedCategory = this.getAttribute('data-tab');
+      
+      // Update active tab
       document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
       this.classList.add('active');
-      const cat = this.getAttribute('data-tab');
       
-      allCards.forEach(card => {
+      // Hide all category sections
-        if (cat === 'all') {
+      document.querySelectorAll('.category-cards').forEach(section => {
-          card.style.display = '';
+        section.classList.remove('active');
-        } else {
-          // Add a data-category attribute to make filtering more reliable
-          const category = card.getAttribute('data-category');
-          card.style.display = (category === cat) ? '' : 'none';
-        }
       });
+      
+      // Show the selected category section
+      if (selectedCategory === 'all') {
+        document.getElementById('category-all').classList.add('active');
+      } else {
+        // Convert to URL-friendly format for element ID matching
+        const sectionId = 'category-' + selectedCategory.toLowerCase().replace(/\s+/g, '-');
+        const section = document.getElementById(sectionId);
+        if (section) {
+          section.classList.add('active');
+        } else {
+          // Fallback to showing all if category not found
+          document.getElementById('category-all').classList.add('active');
+          console.log('Category section not found:', sectionId);
+        }
+      }
     });
   });
+  
+  // Trigger the "All" tab by default
+  allTab.click();
 });
 </script>
 {{ end }}