XeLabs/awesome-prometheus-alerts
2
0
Fork 0
mirror of https://github.com/samber/awesome-prometheus-alerts.git synced 2026-06-20 16:46:37 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: replace GitHub icon with Star button and live star count

Browse source 
Replace the plain GitHub icon+count in the header with a proper two-zone
star button (★ Star | 8.4k). The count is seeded at build time from the
GitHub API and refreshed client-side on page load with a 1-hour
sessionStorage cache.
This commit is contained in:
Samuel Berthe 2026-04-14 19:47:49 +02:00
parent 297fd9864c
commit 954999dfa9
No known key found for this signature in database
GPG key ID: 64863511FFBD0E3C
1 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
site/src/components/Header.astro
View file

@ -83,15 +83,18 @@ const starsLabel = stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : String(star
href={GITHUB_URL}
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub repository"
class="flex items-center gap-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
aria-label="Star on GitHub"
class="flex items-center gap-0 rounded-md border border-slate-200 dark:border-slate-700 overflow-hidden text-xs font-medium hover:border-slate-300 dark:hover:border-slate-600 transition-colors"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
{stars > 0 && (
<span class="text-xs font-medium tabular-nums">{starsLabel}</span>
)}
<span class="flex items-center gap-1.5 px-2.5 py-1 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
<svg class="w-3.5 h-3.5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
Star
</span>
<span id="github-stars" class="px-2.5 py-1 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border-l border-slate-200 dark:border-slate-700 tabular-nums">
{starsLabel}
</span>
</a>
</nav>
@ -158,4 +161,35 @@ const starsLabel = stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : String(star
hamburger?.classList.toggle('hidden', isOpen);
closeIcon?.classList.toggle('hidden', !isOpen);
});
// Live star count — fetch from GitHub API on page load, cache in sessionStorage
const starsEl = document.getElementById('github-stars');
if (starsEl) {
const CACHE_KEY = 'gh_stars_apa';
const CACHE_TTL = 3600 * 1000; // 1 hour
function formatStars(n: number): string {
return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
}
const cached = sessionStorage.getItem(CACHE_KEY);
if (cached) {
const { value, ts } = JSON.parse(cached);
if (Date.now() - ts < CACHE_TTL) {
starsEl.textContent = formatStars(value);
}
}
fetch('https://api.github.com/repos/samber/awesome-prometheus-alerts', {
headers: { Accept: 'application/vnd.github+json' },
})
.then((r) => r.ok ? r.json() : null)
.then((data) => {
if (data?.stargazers_count) {
starsEl.textContent = formatStars(data.stargazers_count);
sessionStorage.setItem(CACHE_KEY, JSON.stringify({ value: data.stargazers_count, ts: Date.now() }));
}
})
.catch(() => {});
}
</script>