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: add GitHub stars to StatsBar and fix cache early-return

Browse source 
Add a 4th stat (⭐ GitHub stars) to StatsBar with build-time fallback
and live client-side fetch. Both Header and StatsBar share the same
sessionStorage cache key and skip the API call when the cache is fresh
(1h TTL), reducing fetches to at most one per session.
This commit is contained in:
Samuel Berthe 2026-04-14 19:51:12 +02:00
parent 954999dfa9
commit 1f8bcca779
No known key found for this signature in database
GPG key ID: 64863511FFBD0E3C
2 changed files with 57 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -177,6 +177,7 @@ const starsLabel = stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : String(star
const { value, ts } = JSON.parse(cached);
if (Date.now() - ts < CACHE_TTL) {
starsEl.textContent = formatStars(value);
return; // cache is fresh, skip API call
}
}

56
site/src/components/StatsBar.astro
View file

@ -1,9 +1,23 @@
---
import { getTotalRuleCount, getTotalExporterCount, data } from '../data/rules';
import { GITHUB_API_REPO_URL } from '../data/site';
const totalRules = getTotalRuleCount();
const totalExporters = getTotalExporterCount();
const totalGroups = data.groups.length;
let stars = 0;
try {
const res = await fetch(GITHUB_API_REPO_URL, {
headers: { 'Accept': 'application/vnd.github+json' }
});
if (res.ok) {
const json = await res.json();
stars = json.stargazers_count ?? 0;
}
} catch {}
const starsLabel = stars >= 1000 ? `${(stars / 1000).toFixed(1)}k` : String(stars);
---
<div class="flex flex-wrap justify-center gap-6 sm:gap-10 py-4 text-center">
@ -19,4 +33,46 @@ const totalGroups = data.groups.length;
<div class="text-2xl font-bold text-brand dark:text-brand-dark">{totalGroups}</div>
<div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">categories</div>
</div>
<a href="https://github.com/samber/awesome-prometheus-alerts" target="_blank" rel="noopener noreferrer" class="group">
<div class="text-2xl font-bold text-brand dark:text-brand-dark flex items-center justify-center gap-1">
<svg class="w-5 h-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>
<span id="statsbar-stars">{starsLabel}</span>
</div>
<div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 group-hover:text-brand dark:group-hover:text-brand-dark transition-colors">GitHub stars</div>
</a>
</div>
<script>
const starsEl = document.getElementById('statsbar-stars');
if (starsEl) {
const CACHE_KEY = 'gh_stars_apa';
const CACHE_TTL = 3600 * 1000;
function fmt(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 = fmt(value);
return; // cache is fresh, skip API call
}
}
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 = fmt(data.stargazers_count);
sessionStorage.setItem(CACHE_KEY, JSON.stringify({ value: data.stargazers_count, ts: Date.now() }));
}
})
.catch(() => {});
}
</script>