fix: load repo stars/forks from GitHub API at build time

RepoCard fetched shields.io badges client-side and scraped an undocumented
SVG element (#rlink). With several cards per page, the concurrent requests
were rate-limited, so some cards failed with "Cannot read properties of null".

Fetch stargazers_count/forks_count from the GitHub API at build time instead,
baking the numbers into the HTML. No runtime fetch, no rate-limiting, no
skeleton flicker. Failures fall back to empty counts so the build never breaks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: andrii-bodnar

src/components/RepoCard.astro

@@ -1,5 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
+import { getRepoStats } from '~/utils/github';
 
 export interface Props {
     organization: string;
@@ -8,7 +9,9 @@ export interface Props {
 }
 
 const { organization, slug, title } = Astro.props;
-const official = Astro.props.organization === 'crowdin';
+const official = organization === 'crowdin';
+
+const { stars, forks } = await getRepoStats(organization, slug);
 ---
 
 <a href={`https://github.com/${organization}/${slug}`} target="_blank" class="no-underline">
@@ -30,16 +33,12 @@ const official = Astro.props.organization === 'crowdin';
         <div class="flex flex-row gap-x-4 text-md text-gray-500 dark:text-gray-300">
             <span>
                 <Icon name="mdi:star" class="inline-icon align-middle size-4" />
-                <span class="stars inline-flex align-middle font-semibold">
-                    <span class="animate-pulse w-8 h-7 bg-slate-200 dark:bg-slate-700 rounded" />
-                </span>
+                <span class="stars inline-flex align-middle font-semibold">{stars}</span>
             </span>
 
             <span>
                 <Icon name="mdi:source-fork" class="inline-icon align-middle size-4" />
-                <span class="forks inline-flex align-middle font-semibold">
-                    <span class="animate-pulse w-8 h-7 bg-slate-200 dark:bg-slate-700 rounded" />
-                </span>
+                <span class="forks inline-flex align-middle font-semibold">{forks}</span>
             </span>
         </div>
         <p>{Astro.locals.t('repo.viewInstall')}</p>
@@ -59,33 +58,3 @@ const official = Astro.props.organization === 'crowdin';
       border-color: var(--sl-color-gray-2);
     }
 </style>
-
-<script is:inline define:vars={{organization, slug}}>
-    async function fetchRepoData(organization, repoSlug) {
-        try {
-            // Fetch GitHub stars data
-            const starsResponse = await fetch(`https://img.shields.io/github/stars/${organization}/${repoSlug}`);
-            const starsText = await starsResponse.text();
-            const starsSvg = new DOMParser().parseFromString(starsText, "image/svg+xml");
-
-            // Fetch GitHub forks data
-            const forksResponse = await fetch(`https://img.shields.io/github/forks/${organization}/${repoSlug}`);
-            const forksText = await forksResponse.text();
-            const forksSvg = new DOMParser().parseFromString(forksText, "image/svg+xml");
-
-            return {
-                stars: +starsSvg.querySelector('#rlink').textContent,
-                forks: +forksSvg.querySelector('#rlink').textContent,
-            };
-        } catch (error) {
-            console.error('Error fetching repo data:', error);
-        }
-    }
-
-    const repoElement = document.getElementById(slug);
-
-    fetchRepoData(organization, slug).then(response => {
-        repoElement.querySelector('.stars').innerHTML = `<span>${response.stars}</span>`;
-        repoElement.querySelector('.forks').innerHTML = `<span>${response.forks}</span>`;
-    })
-</script>

src/utils/github.ts

@@ -0,0 +1,46 @@
+export interface RepoStats {
+    stars: number | null;
+    forks: number | null;
+}
+
+// Cached per build so multiple <RepoCard /> instances for the same repo only hit the GitHub API once.
+const statsCache = new Map<string, RepoStats>();
+
+/**
+ * Fetches a repository's star and fork counts from the GitHub API at build time.
+ *
+ * Returns null counts on any failure (network error, rate limit, missing repo)
+ * so the page still builds — RepoCard renders a dash in that case.
+ *
+ * Set the GITHUB_TOKEN env var to raise the API rate limit (60 → 5000 req/h).
+ */
+export async function getRepoStats(organization: string, slug: string): Promise<RepoStats> {
+    const key = `${organization}/${slug}`;
+
+    const cached = statsCache.get(key);
+    if (cached) return cached;
+
+    const result: RepoStats = { stars: null, forks: null };
+
+    try {
+        const headers: Record<string, string> = { Accept: 'application/vnd.github+json' };
+
+        const token = import.meta.env.GITHUB_TOKEN;
+        if (token) headers.Authorization = `Bearer ${token}`;
+
+        const response = await fetch(`https://api.github.com/repos/${key}`, { headers });
+
+        if (response.ok) {
+            const data = await response.json();
+            result.stars = data.stargazers_count ?? null;
+            result.forks = data.forks_count ?? null;
+        } else {
+            console.warn(`[RepoCard] GitHub API responded ${response.status} for ${key}`);
+        }
+    } catch (error) {
+        console.warn(`[RepoCard] Failed to fetch stats for ${key}:`, error);
+    }
+
+    statsCache.set(key, result);
+    return result;
+}