feat: implement category tabs with filtering for content listing page

layouts/_default/list.html

@@ -1,5 +1,17 @@
 {{ define "main" }}
-<div class="tabs" id="tabs" data-current-section-title="{{ .Title }}">
+{{/* Pass the current section to the JavaScript via data attributes */}}
+{{/* Also add a data attribute mapping section names to category names */}}
+<div class="tabs" id="tabs" 
+     data-current-section="{{ .Section }}" 
+     data-section-mappings='{
+       "books": "Books",
+       "movies": "Movies",
+       "tvseries": "TV Series", 
+       "recipes": "Recipes",
+       "youtube": "YouTube",
+       "music": "Music",
+       "concerts": "Concerts"
+     }'>
   {{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
   {{ range $i, $cat := $categories }}
     <div class="tab" data-tab="{{ $cat }}">{{ $cat }}</div>
@@ -19,7 +31,20 @@ document.addEventListener('DOMContentLoaded', function() {
   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');
+  
+  // Get the current section and section-to-category mappings
+  const currentSection = tabsContainer.getAttribute('data-current-section');
+  let sectionMappings = {};
+  try {
+    sectionMappings = JSON.parse(tabsContainer.getAttribute('data-section-mappings'));
+  } catch (e) {
+    console.error('Error parsing section mappings:', e);
+  }
+  
+  // Map the current section to its corresponding category
+  const currentCategory = sectionMappings[currentSection] || null;
+  
+  // Get all category values from the tabs
   const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
 
   // Create and prepend the "All" tab
@@ -31,6 +56,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Function to activate a tab and filter cards
   function activateTabAndFilter(selectedCategory) {
+    console.log('Filtering by category:', selectedCategory);
+    
     // Update active state for all tabs
     document.querySelectorAll('#tabs .tab').forEach(t => {
       if (t.getAttribute('data-tab') === selectedCategory) {
@@ -41,20 +68,30 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     // Filter cards
+    let visibleCount = 0;
     allCards.forEach(card => {
       if (selectedCategory === 'all') {
         card.style.display = '';
+        visibleCount++;
       } else {
         const cardCategory = card.getAttribute('data-category');
-        card.style.display = (cardCategory === selectedCategory) ? '' : 'none';
+        console.log('Card category:', cardCategory, 'Selected:', selectedCategory);
+        const isVisible = (cardCategory === selectedCategory);
+        card.style.display = isVisible ? '' : 'none';
+        if (isVisible) visibleCount++;
       }
     });
+    console.log('Visible cards after filtering:', visibleCount);
   }
 
   // Determine initial category to display
   let initialCategoryToDisplay = 'all';
-  if (currentSectionTitle && knownCategories.includes(currentSectionTitle)) {
+  
-    initialCategoryToDisplay = currentSectionTitle;
+  // If we're on a section page and we have a mapping for this section,
+  // use the corresponding category
+  if (currentSection && currentCategory && knownCategories.includes(currentCategory)) {
+    initialCategoryToDisplay = currentCategory;
+    console.log('Initial category set to', initialCategoryToDisplay, 'based on section', currentSection);
   }
 
   // Attach click listeners to all tabs (including the new "All" tab)