More fixes

assets/js/main.js

@@ -614,4 +614,126 @@ document.addEventListener('DOMContentLoaded', function() {
     
     console.log('UK Data Services website initialized successfully');
     console.log('Performance optimizations: Lazy loading, WebP support, and preloading enabled');
+    
+    // Universal Blog Pagination System
+    initializeBlogPagination();
+    
+    function initializeBlogPagination() {
+        const paginationContainer = document.querySelector('.blog-pagination');
+        const articlesGrid = document.querySelector('.articles-grid');
+        
+        if (!paginationContainer || !articlesGrid) {
+            return; // No pagination on this page
+        }
+        
+        const prevButton = paginationContainer.querySelector('button:first-child');
+        const nextButton = paginationContainer.querySelector('button:last-child');
+        const paginationInfo = paginationContainer.querySelector('.pagination-info');
+        
+        if (!prevButton || !nextButton || !paginationInfo) {
+            return; // Invalid pagination structure
+        }
+        
+        // Get current page from URL or default to 1
+        const urlParams = new URLSearchParams(window.location.search);
+        let currentPage = parseInt(urlParams.get('page')) || 1;
+        
+        // Get all articles on the page
+        const allArticles = Array.from(articlesGrid.querySelectorAll('.article-card'));
+        const articlesPerPage = 6;
+        const totalPages = Math.ceil(allArticles.length / articlesPerPage);
+        
+        // If we have actual multiple pages of content, use the original pagination logic
+        // Otherwise, implement client-side pagination
+        if (totalPages <= 1) {
+            // Hide pagination if not needed
+            paginationContainer.style.display = 'none';
+            return;
+        }
+        
+        function renderPage(page) {
+            // Hide all articles
+            allArticles.forEach(article => {
+                article.style.display = 'none';
+            });
+            
+            // Show articles for current page
+            const startIndex = (page - 1) * articlesPerPage;
+            const endIndex = startIndex + articlesPerPage;
+            
+            for (let i = startIndex; i < endIndex && i < allArticles.length; i++) {
+                allArticles[i].style.display = 'block';
+                allArticles[i].style.animation = 'fadeInUp 0.6s ease forwards';
+            }
+            
+            // Update pagination info
+            paginationInfo.textContent = `Page ${page} of ${totalPages}`;
+            
+            // Update button states
+            prevButton.disabled = (page <= 1);
+            nextButton.disabled = (page >= totalPages);
+            
+            // Update URL without page reload
+            const newUrl = new URL(window.location);
+            if (page > 1) {
+                newUrl.searchParams.set('page', page);
+            } else {
+                newUrl.searchParams.delete('page');
+            }
+            window.history.replaceState({}, '', newUrl);
+            
+            // Scroll to articles section
+            articlesGrid.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+        
+        // Event listeners
+        prevButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (currentPage > 1) {
+                currentPage--;
+                renderPage(currentPage);
+            }
+        });
+        
+        nextButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (currentPage < totalPages) {
+                currentPage++;
+                renderPage(currentPage);
+            }
+        });
+        
+        // Initialize first page
+        renderPage(currentPage);
+        
+        // Add CSS animation for article transitions
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            
+            .article-card {
+                transition: opacity 0.3s ease, transform 0.3s ease;
+            }
+            
+            .article-card[style*="display: none"] {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+        `;
+        document.head.appendChild(style);
+        
+        console.log(`Blog pagination initialized: ${totalPages} pages, ${allArticles.length} articles`);
+    }
 });