assets update

Author: mgks

assets/css/style.css

@@ -398,6 +398,55 @@ a {
     transform: translateY(1px);
     box-shadow: inset 0 -20px 25px -5px rgb(244 39 116 / 18%);
 }
+.pop-page-header {
+    margin-bottom: 30px;
+    text-align: center;
+}
+.pop-page-header h1 {
+    margin-bottom: 10px;
+}
+#repo-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.repo-entry {
+    background: #f8fafd;
+    border: 1px solid #e1e4e8;
+    border-radius: 5px;
+    padding: 12px 16px;
+    font-size: 1.05em;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: box-shadow 0.2s;
+}
+.repo-entry:hover {
+    box-shadow: 0 2px 8px rgba(3,102,214,0.08);
+    background: #f0f6ff;
+}
+.repo-entry i {
+    font-size: 1.2em;
+    color: #0366d6;
+    min-width: 22px;
+    text-align: center;
+}
+#load-more-btn {
+    display: block;
+    margin: 0 auto 10px auto;
+    padding: 8px 24px;
+    background: #0366d6;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+#load-more-btn:hover {
+    background: #024fa2;
+}
 .footer {
     text-align: center;
     padding: .5em 1em;

assets/js/script.js

@@ -144,13 +144,15 @@ function parseURL() {
     }
 
     // Skip URL parsing for specific pages we want to preserve
-    const specialPages = ['/popular-repos/', '/popular-repos', '/popular-repos.html'];
+    const specialPages = ['/popular-repos', '/popular-repos.html'];
     if (specialPages.includes(window.location.pathname)) {
         // Special page identified, ensure visibility of container if needed
         if (window.location.pathname.includes('popular-repos')) {
             const popularRepoContainer = document.getElementById('popular-repos-container');
             if (popularRepoContainer) {
                 popularRepoContainer.style.display = 'block';
+                // Initialize popular repos pagination if needed
+                initializePopularRepos();
             }
         }
         return; // Don't process URLs for special pages
@@ -861,3 +863,96 @@ themeToggle.addEventListener('click', () => {
         trackEvent('UI', 'ThemeToggle', isDarkMode ? 'dark' : 'light');
     }
 });
+
+// --- Popular Repos Page Functions ---
+function initializePopularRepos() {
+    const categoryButtons = document.querySelectorAll('.category-btn');
+    const categoryOptions = document.querySelectorAll('.category-option');
+    const repoEntries = document.querySelectorAll('.repo-entry');
+    const loadMoreBtn = document.getElementById('load-more-btn');
+    
+    // Skip if elements aren't found (not on popular repos page)
+    if (!categoryButtons.length || !repoEntries.length || !loadMoreBtn) return;
+    
+    let visibleCount = 0;
+    const PAGE_SIZE = 15;
+    let currentCategory = 'all';
+
+    function showReposByCategory(category) {
+        let shown = 0;
+        repoEntries.forEach(entry => {
+            if (category === 'all' || entry.classList.contains(category)) {
+                if (shown < PAGE_SIZE) {
+                    entry.style.display = '';
+                    shown++;
+                } else {
+                    entry.style.display = 'none';
+                }
+            } else {
+                entry.style.display = 'none';
+            }
+        });
+        visibleCount = shown;
+        // Show load more button if there are more to show
+        let totalInCategory = Array.from(repoEntries).filter(entry => 
+            category === 'all' || entry.classList.contains(category)).length;
+        loadMoreBtn.style.display = (visibleCount < totalInCategory) ? '' : 'none';
+    }
+
+    function loadMoreRepos() {
+        let shown = 0;
+        let loaded = 0;
+        repoEntries.forEach(entry => {
+            if ((currentCategory === 'all' || entry.classList.contains(currentCategory))) {
+                if (entry.style.display !== 'none') {
+                    shown++;
+                }
+            }
+        });
+        repoEntries.forEach(entry => {
+            if ((currentCategory === 'all' || entry.classList.contains(currentCategory))) {
+                if (entry.style.display === 'none' && loaded < PAGE_SIZE) {
+                    entry.style.display = '';
+                    loaded++;
+                }
+            }
+        });
+        visibleCount += loaded;
+        let totalInCategory = Array.from(repoEntries).filter(entry => 
+            currentCategory === 'all' || entry.classList.contains(currentCategory)).length;
+        loadMoreBtn.style.display = (visibleCount < totalInCategory) ? '' : 'none';
+    }
+
+    // Initial show
+    showReposByCategory('all');
+
+    // Category button click
+    categoryButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            categoryButtons.forEach(btn => btn.classList.remove('active'));
+            this.classList.add('active');
+            currentCategory = this.getAttribute('data-category');
+            showReposByCategory(currentCategory);
+        });
+    });
+    
+    categoryOptions.forEach(option => {
+        option.addEventListener('click', function(e) {
+            e.preventDefault();
+            categoryButtons.forEach(btn => btn.classList.remove('active'));
+            document.querySelector(`[data-category="${this.getAttribute('data-category')}"]`).classList.add('active');
+            currentCategory = this.getAttribute('data-category');
+            showReposByCategory(currentCategory);
+        });
+    });
+    
+    loadMoreBtn.addEventListener('click', loadMoreRepos);
+}
+
+// Call initialize on DOMContentLoaded (in case we navigate directly to the page)
+document.addEventListener('DOMContentLoaded', function() {
+    // If we're on the popular repos page, initialize it
+    if (window.location.pathname.includes('popular-repos')) {
+        initializePopularRepos();
+    }
+});