Update homepage to show all cards initially with All tab

layouts/_default/index.html

@@ -6,24 +6,43 @@
   {{ end }}
 </div>
 <div class="cards" id="cards">
-  {{ $current := "Books" }}
+  {{ range .Site.RegularPages }}
-  {{ range where .Site.RegularPages ".Params.category" $current }}
+    {{ if .Params.category }}
       {{ partial "card.html" . }}
     {{ end }}
+  {{ end }}
 </div>
 <script>
-// Simple tab switching (client-side, not Hugo)
+// 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);
-  tabs.forEach(tab => {
+  
+  // 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() {
-      tabs.forEach(t => t.classList.remove('active'));
+      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 {
           card.style.display = card.innerHTML.includes(`category=\"${cat}\"`) ? '' : 'none';
+        }
       });
     });
   });