From 6f272718e5a6300a374822905910f2107edea105 Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Sun, 25 May 2025 21:23:18 +0200
Subject: [PATCH] feat: create index layout with tabbed category filtering and
 dynamic card display

---
 layouts/_default/index.html | 118 ++++++++++++++++++++++++++++--------
 1 file changed, 92 insertions(+), 26 deletions(-)

diff --git a/layouts/_default/index.html b/layouts/_default/index.html
index b953060..d5dc16c 100644
--- a/layouts/_default/index.html
+++ b/layouts/_default/index.html
@@ -13,41 +13,107 @@
   {{ 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
+  console.log('SCRIPT (index.html): DOMContentLoaded event fired.');
+
   const tabsContainer = document.getElementById('tabs');
+  console.log('SCRIPT (index.html): tabsContainer:', tabsContainer);
+  if (!tabsContainer) {
+    console.error('SCRIPT ERROR (index.html): Could not find tabsContainer (#tabs). Stopping script.');
+    return;
+  }
+
+  // Note: originalTabs in index.html are directly used, no section mapping needed here.
+  const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab'));
+  console.log('SCRIPT (index.html): originalTabs (from HTML):', originalTabs, 'Count:', originalTabs.length);
+
+  const cardsContainer = document.getElementById('cards');
+  console.log('SCRIPT (index.html): cardsContainer:', cardsContainer);
+  if (!cardsContainer) {
+    console.error('SCRIPT ERROR (index.html): Could not find cardsContainer (#cards). Stopping script.');
+    return;
+  }
+  const allCards = Array.from(cardsContainer.children);
+  console.log('SCRIPT (index.html): allCards (direct children of #cards):', allCards, 'Count:', allCards.length);
+
+  console.log('SCRIPT (index.html): Creating and prepending "All" tab...');
   const allTab = document.createElement('div');
-  allTab.className = 'tab active';
+  allTab.className = 'tab'; // Active state will be set by activateTabAndFilter
   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 => {
+  console.log('SCRIPT (index.html): "All" tab prepended:', allTab);
+
+  // Make other tabs (from HTML) inactive initially as "All" will be default active
+  originalTabs.forEach(tab => tab.classList.remove('active'));
+
+  function activateTabAndFilter(selectedCategory) {
+    console.log('FUNC activateTabAndFilter (index.html): Filtering by category:', selectedCategory);
+
+    document.querySelectorAll('#tabs .tab').forEach(t => {
+      if (t.getAttribute('data-tab') === selectedCategory) {
+        t.classList.add('active');
+      } else {
+        t.classList.remove('active');
+      }
+    });
+    console.log('FUNC activateTabAndFilter (index.html): Active states updated for tabs.');
+
+    let visibleCount = 0;
+    allCards.forEach(cardLinkElement => {
+      const cardDiv = cardLinkElement.querySelector('.card');
+      if (!cardDiv) {
+        console.warn('FUNC activateTabAndFilter (index.html): Card structure issue: .card div not found inside', cardLinkElement);
+        cardLinkElement.style.display = 'none';
+        return;
+      }
+
+      if (selectedCategory === 'all') {
+        cardLinkElement.style.display = '';
+        visibleCount++;
+      } else {
+        const cardCategoryAttr = cardDiv.getAttribute('data-category');
+        const sCat = selectedCategory ? selectedCategory : 'null_or_empty';
+        const cCat = cardCategoryAttr ? cardCategoryAttr : 'null_or_empty';
+        console.log(
+          `FUNC activateTabAndFilter (index.html): Comparing: cardCategory='${cCat}' (length ${cCat.length})` +
+          ` vs selectedCategory='${sCat}' (length ${sCat.length})` +
+          ` for card titled: '${cardDiv.querySelector('.card-title') ? cardDiv.querySelector('.card-title').textContent.trim() : 'N/A'}'`
+        );
+        const isVisible = (cardCategoryAttr === selectedCategory);
+        cardLinkElement.style.display = isVisible ? '' : 'none';
+        if (isVisible) visibleCount++;
+      }
+    });
+    console.log('FUNC activateTabAndFilter (index.html): Visible cards after filtering:', visibleCount);
+  }
+
+  // For index.html, the initial category is always 'all'.
+  const initialCategoryToDisplay = 'all';
+  console.log('SCRIPT (index.html): initialCategoryToDisplay determined as:', initialCategoryToDisplay);
+
+  console.log('SCRIPT (index.html): Attaching click listeners to tabs...');
+  const allTabsForListeners = document.querySelectorAll('#tabs .tab');
+  console.log('SCRIPT (index.html): Found', allTabsForListeners.length, 'tabs to attach listeners to.');
+  allTabsForListeners.forEach((tab, index) => {
+    console.log(`SCRIPT (index.html): Attaching listener to tab ${index + 1}:`, 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';
-        }
-      });
+      console.log('EVENT HANDLER (index.html): Tab clicked:', this);
+      const categoryToFilter = this.getAttribute('data-tab');
+      console.log('EVENT HANDLER (index.html): Category to filter (from data-tab):', categoryToFilter);
+      if (!categoryToFilter) {
+        console.error('EVENT HANDLER ERROR (index.html): data-tab attribute is missing or empty for the clicked tab:', this);
+        return;
+      }
+      activateTabAndFilter(categoryToFilter);
     });
   });
+  console.log('SCRIPT (index.html): Finished attaching click listeners.');
+
+  console.log('SCRIPT (index.html): Calling activateTabAndFilter for initial page load with category:', initialCategoryToDisplay);
+  activateTabAndFilter(initialCategoryToDisplay);
+  console.log('SCRIPT (index.html): Initial page load filtering complete.');
+
 });
 </script>
 {{ end }}