Treta Insights

Stories & Guides from Ayodhya

Explore spiritual heritage, temple traditions, travel tips, and soulful stories from the holy city.

'; } function renderGrid(posts, append) { var grid = document.getElementById('blogGrid'); var empty = document.getElementById('emptyState'); var btn = document.getElementById('loadMoreBtn'); if (!append) grid.innerHTML = ''; if (posts.length === 0 && !append) { empty.classList.remove('hidden'); btn.classList.add('hidden'); return; } empty.classList.add('hidden'); posts.forEach(function(p) { grid.innerHTML += renderCard(p); }); btn.classList.toggle('hidden', !hasMore); } function showSkeletons() { var grid = document.getElementById('blogGrid'); grid.innerHTML = ''; for (var i = 0; i < 6; i++) { grid.innerHTML += '

' + '

'; } } // ================================================================ // CATEGORY FILTERS // ================================================================ async function loadCategories() { var cats = ['All']; try { var res = await fetch(API_BASE + '/categories'); if (res.ok) { var data = await res.json(); if (data.success) { data.data.forEach(function(c) { cats.push(c.category); }); } } else { throw new Error(); } } catch (e) { // Fallback categories var seen = {}; FALLBACK_POSTS.forEach(function(p) { if (!seen[p.category]) { cats.push(p.category); seen[p.category] = true; } }); } var container = document.getElementById('categoryFilters'); container.innerHTML = ''; cats.forEach(function(cat) { var isActive = (cat === 'All' && currentCategory === 'all') ? ' active' : ''; container.innerHTML += ''; }); } function filterCategory(btn) { document.querySelectorAll('.category-btn').forEach(function(b) { b.classList.remove('active'); }); btn.classList.add('active'); currentCategory = btn.dataset.category; currentPage = 1; loadPosts(); } // ================================================================ // SEARCH // ================================================================ var searchTimer; document.getElementById('searchInput').addEventListener('input', function() { clearTimeout(searchTimer); var val = this.value.trim(); searchTimer = setTimeout(function() { currentSearch = val; currentPage = 1; loadPosts(); }, 400); }); // ================================================================ // LOAD & LOAD MORE // ================================================================ async function loadPosts() { showSkeletons(); var result = await fetchPosts(currentPage, currentCategory, currentSearch); allPosts = result.posts; hasMore = result.hasMore; renderGrid(allPosts, false); } async function loadMore() { currentPage++; var result = await fetchPosts(currentPage, currentCategory, currentSearch); hasMore = result.hasMore; renderGrid(result.posts, true); } // ================================================================ // INIT // ================================================================ loadCategories(); loadPosts();