feat: implement category tabs with filtering for content list page

layouts/_default/list.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
-<div class="tabs" id="tabs">
+<div class="tabs" id="tabs" data-current-section-title="{{ .Title }}">
   {{ $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>
+    <div class="tab" data-tab="{{ $cat }}">{{ $cat }}</div>
   {{ end }}
 </div>
 
@@ -14,43 +14,59 @@
   {{ end }}
 </div>
 <script>
-// Tab switching with "All" default view
 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 originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML
+  const cardsContainer = document.getElementById('cards');
+  const allCards = Array.from(cardsContainer.children);
+  const currentSectionTitle = tabsContainer.getAttribute('data-current-section-title');
+  const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
+
+  // Create and prepend the "All" tab
   const allTab = document.createElement('div');
-  allTab.className = 'tab active';
+  allTab.className = 'tab'; // Will be set to active by activateTabAndFilter
   allTab.textContent = 'All';
   allTab.setAttribute('data-tab', 'all');
   tabsContainer.prepend(allTab);
-  
+
-  // Make other tabs inactive initially
+  // Function to activate a tab and filter cards
-  tabs.forEach(tab => tab.classList.remove('active'));
+  function activateTabAndFilter(selectedCategory) {
-  
+    // Update active state for all tabs
-  // Add click handler for all tabs (including the new All tab)
+    document.querySelectorAll('#tabs .tab').forEach(t => {
-  document.querySelectorAll('.tab').forEach(tab => {
+      if (t.getAttribute('data-tab') === selectedCategory) {
+        t.classList.add('active');
+      } else {
+        t.classList.remove('active');
+      }
+    });
+
+    // Filter cards
+    allCards.forEach(card => {
+      if (selectedCategory === 'all') {
+        card.style.display = '';
+      } else {
+        const cardCategory = card.getAttribute('data-category');
+        card.style.display = (cardCategory === selectedCategory) ? '' : 'none';
+      }
+    });
+  }
+
+  // Determine initial category to display
+  let initialCategoryToDisplay = 'all';
+  if (currentSectionTitle && knownCategories.includes(currentSectionTitle)) {
+    initialCategoryToDisplay = currentSectionTitle;
+  }
+
+  // Attach click listeners to all tabs (including the new "All" tab)
+  document.querySelectorAll('#tabs .tab').forEach(tab => {
     tab.addEventListener('click', function() {
-      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      const categoryToFilter = this.getAttribute('data-tab');
-      this.classList.add('active');
+      activateTabAndFilter(categoryToFilter);
-      const cat = this.getAttribute('data-tab');
-      
-      allCards.forEach(card => {
-        if (cat === 'all') {
-          card.style.display = '';
-        } else {
-          const category = card.getAttribute('data-category');
-          card.style.display = (category === cat) ? '' : 'none';
-        }
-      });
     });
   });
-  
+
-  // Trigger the "All" tab by default
+  // Initial filter and active tab setup
-  allTab.click();
+  activateTabAndFilter(initialCategoryToDisplay);
 });
 </script>
 {{ end }}