refactor(ui): Update landing page content and improve GitHub stats fetching with Shields.io

docs/index.html

@@ -65,7 +65,7 @@
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                     </svg>
-                    <span class="badge-value" data-metric="stars">—</span>
+                    <span class="badge-value" id="github-stars">—</span>
                     <span class="badge-label">Stars</span>
                 </a>
                 <a href="https://github.com/cogwheel0/conduit/releases" target="_blank" class="social-badge">
@@ -74,7 +74,7 @@
                         <polyline points="7 10 12 15 17 10"/>
                         <line x1="12" y1="15" x2="12" y2="3"/>
                     </svg>
-                    <span class="badge-value" data-metric="downloads">—</span>
+                    <span class="badge-value" id="github-downloads">—</span>
                     <span class="badge-label">Downloads</span>
                 </a>
             </div>
@@ -528,20 +528,20 @@
         <div class="container">
             <div class="cta-card">
                 <div class="cta-content">
-                    <h2>Your AI awaits</h2>
+                    <h2>Ready to get started?</h2>
-                    <p>Free, open source, and ready when you are. Download now.</p>
+                    <p>Join thousands of users who've made Conduit their gateway to self-hosted AI. Open source and available now.</p>
                     <div class="cta-buttons">
                         <a href="https://apps.apple.com/us/app/conduit-open-webui-client/id6749840287" class="btn btn-white">
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                 <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                             </svg>
-                            App Store
+                            Download for iOS
                         </a>
                         <a href="https://play.google.com/store/apps/details?id=app.cogwheel.conduit" class="btn btn-outline-white">
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                 <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"/>
                             </svg>
-                            Google Play
+                            Download for Android
                         </a>
                     </div>
                 </div>

docs/script.js

@@ -273,9 +273,9 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // ============================================
-    // FETCH REPOSITORY STATS
+    // FETCH GITHUB STATS (via Shields.io proxy)
     // ============================================
-    const formatCount = (num) => {
+    const formatNumber = (num) => {
         if (num >= 1000000) {
             return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
         }
@@ -285,68 +285,57 @@ document.addEventListener('DOMContentLoaded', () => {
         return num.toString();
     };
 
-    // Use data attributes instead of IDs to avoid ad blocker element hiding
+    const parseShieldsValue = (value) => {
-    const starsEl = document.querySelector('[data-metric="stars"]');
+        // Shields.io returns values like "1.2k", "5.3M", etc.
-    const downloadsEl = document.querySelector('[data-metric="downloads"]');
+        // Extract numeric value and convert to number
-    
+        const match = value.match(/([\d.]+)([kKmM]?)/);
-    // Build API URL dynamically to avoid static pattern matching
+        if (!match) return 0;
-    const apiBase = ['https:/', '/api', '.github', '.com/'].join('');
+        
-    const repoPath = 'repos/cogwheel0/conduit';
+        const num = parseFloat(match[1]);
-    
+        const suffix = match[2].toLowerCase();
-    // Fetch repo stats using a class-based approach (less likely to be blocked)
+        
-    const fetchRepoData = async () => {
+        if (suffix === 'k') return num * 1000;
-        try {
+        if (suffix === 'm') return num * 1000000;
-            const endpoint = apiBase + repoPath;
+        return num;
-            const response = await fetch(endpoint);
-            if (!response.ok) throw new Error('API request failed');
-            return await response.json();
-        } catch (e) {
-            return null;
-        }
     };
+
+    const starsElement = document.getElementById('github-stars');
+    const downloadsElement = document.getElementById('github-downloads');
     
-    const fetchReleaseData = async () => {
+    // Fetch repo stats (stars) via Shields.io
-        try {
+    if (starsElement) {
-            const endpoint = apiBase + repoPath + '/releases';
+        fetch('https://img.shields.io/github/stars/cogwheel0/conduit.json')
-            const response = await fetch(endpoint);
+            .then(response => response.json())
-            if (!response.ok) throw new Error('API request failed');
+            .then(data => {
-            return await response.json();
+                if (data.value) {
-        } catch (e) {
+                    const numValue = parseShieldsValue(data.value);
-            return null;
+                    starsElement.textContent = formatNumber(numValue);
-        }
+                    starsElement.classList.add('loaded');
-    };
+                }
-    
+            })
-    // Initialize stats
+            .catch(() => {
-    if (starsEl) {
+                starsElement.textContent = '★';
-        fetchRepoData().then(data => {
+            });
-            if (data && data.stargazers_count !== undefined) {
-                starsEl.textContent = formatCount(data.stargazers_count);
-                starsEl.classList.add('loaded');
-            } else {
-                starsEl.textContent = '★';
-            }
-        });
     }
 
-    if (downloadsEl) {
+    // Fetch downloads via Shields.io
-        fetchReleaseData().then(releases => {
+    if (downloadsElement) {
-            if (Array.isArray(releases)) {
+        fetch('https://img.shields.io/github/downloads/cogwheel0/conduit/total.json')
-                const total = releases.reduce((sum, release) => {
+            .then(response => response.json())
-                    return sum + release.assets.reduce((assetSum, asset) => {
+            .then(data => {
-                        return assetSum + (asset.download_count || 0);
+                if (data.value) {
-                    }, 0);
+                    const numValue = parseShieldsValue(data.value);
-                }, 0);
+                    if (numValue > 0) {
-                
+                        downloadsElement.textContent = formatNumber(numValue);
-                if (total > 0) {
+                    } else {
-                    downloadsEl.textContent = formatCount(total);
+                        downloadsElement.textContent = 'New';
-                } else {
+                    }
-                    downloadsEl.textContent = 'New';
+                    downloadsElement.classList.add('loaded');
                 }
-                downloadsEl.classList.add('loaded');
+            })
-            } else {
+            .catch(() => {
-                downloadsEl.textContent = '↓';
+                downloadsElement.textContent = '↓';
-            }
+            });
-        });
     }
 
     console.log('✨ Conduit landing page initialized');