From 954999dfa94639ed3e1e3cea979f900ddda0cd86 Mon Sep 17 00:00:00 2001
From: Samuel Berthe <dev@samuel-berthe.fr>
Date: Tue, 14 Apr 2026 19:47:49 +0200
Subject: [PATCH] feat: replace GitHub icon with Star button and live star
 count
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 site/src/components/Header.astro | 50 +++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index d1b28e8..97bb6b9 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -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>