refactor(ui): Update landing page content and improve GitHub stats fetching with Shields.io
This commit is contained in:
cogwheel0
@@ -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>
|
||||
<p>Free, open source, and ready when you are. Download now.</p>
|
||||
<h2>Ready to get started?</h2>
|
||||
<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>
|
||||
|
||||
101
docs/script.js
101
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 starsEl = document.querySelector('[data-metric="stars"]');
|
||||
const downloadsEl = document.querySelector('[data-metric="downloads"]');
|
||||
const parseShieldsValue = (value) => {
|
||||
// Shields.io returns values like "1.2k", "5.3M", etc.
|
||||
// Extract numeric value and convert to number
|
||||
const match = value.match(/([\d.]+)([kKmM]?)/);
|
||||
if (!match) return 0;
|
||||
|
||||
// Build API URL dynamically to avoid static pattern matching
|
||||
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 () => {
|
||||
try {
|
||||
const endpoint = apiBase + repoPath;
|
||||
const response = await fetch(endpoint);
|
||||
if (!response.ok) throw new Error('API request failed');
|
||||
return await response.json();
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
if (suffix === 'k') return num * 1000;
|
||||
if (suffix === 'm') return num * 1000000;
|
||||
return num;
|
||||
};
|
||||
|
||||
const fetchReleaseData = async () => {
|
||||
try {
|
||||
const endpoint = apiBase + repoPath + '/releases';
|
||||
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');
|
||||
|
||||
// Initialize stats
|
||||
if (starsEl) {
|
||||
fetchRepoData().then(data => {
|
||||
if (data && data.stargazers_count !== undefined) {
|
||||
starsEl.textContent = formatCount(data.stargazers_count);
|
||||
starsEl.classList.add('loaded');
|
||||
} else {
|
||||
starsEl.textContent = '★';
|
||||
}
|
||||
});
|
||||
// Fetch repo stats (stars) via Shields.io
|
||||
if (starsElement) {
|
||||
fetch('https://img.shields.io/github/stars/cogwheel0/conduit.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.value) {
|
||||
const numValue = parseShieldsValue(data.value);
|
||||
starsElement.textContent = formatNumber(numValue);
|
||||
starsElement.classList.add('loaded');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
starsElement.textContent = '★';
|
||||
});
|
||||
}
|
||||
|
||||
if (downloadsEl) {
|
||||
fetchReleaseData().then(releases => {
|
||||
if (Array.isArray(releases)) {
|
||||
const total = releases.reduce((sum, release) => {
|
||||
return sum + release.assets.reduce((assetSum, asset) => {
|
||||
return assetSum + (asset.download_count || 0);
|
||||
}, 0);
|
||||
}, 0);
|
||||
|
||||
if (total > 0) {
|
||||
downloadsEl.textContent = formatCount(total);
|
||||
} else {
|
||||
downloadsEl.textContent = 'New';
|
||||
// Fetch downloads via Shields.io
|
||||
if (downloadsElement) {
|
||||
fetch('https://img.shields.io/github/downloads/cogwheel0/conduit/total.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.value) {
|
||||
const numValue = parseShieldsValue(data.value);
|
||||
if (numValue > 0) {
|
||||
downloadsElement.textContent = formatNumber(numValue);
|
||||
} else {
|
||||
downloadsElement.textContent = 'New';
|
||||
}
|
||||
downloadsElement.classList.add('loaded');
|
||||
}
|
||||
downloadsEl.classList.add('loaded');
|
||||
} else {
|
||||
downloadsEl.textContent = '↓';
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
downloadsElement.textContent = '↓';
|
||||
});
|
||||
}
|
||||
|
||||
console.log('✨ Conduit landing page initialized');
|
||||
|
||||
Reference in New Issue
Block a user