From 1f8bcca779d7bb1af6372578d19637bc0c620740 Mon Sep 17 00:00:00 2001
From: Samuel Berthe <dev@samuel-berthe.fr>
Date: Tue, 14 Apr 2026 19:51:12 +0200
Subject: [PATCH] feat: add GitHub stars to StatsBar and fix cache early-return
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 site/src/components/Header.astro   |  1 +
 site/src/components/StatsBar.astro | 56 ++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 97bb6b9..0c657d9 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -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
       }
     }
 
diff --git a/site/src/components/StatsBar.astro b/site/src/components/StatsBar.astro
index 748d245..eef3c02 100644
--- a/site/src/components/StatsBar.astro
+++ b/site/src/components/StatsBar.astro
@@ -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>