fix(landing,docs): use build-time GitHub star count, drop per-page api.github.com fetch (#560)

Removes the client-side api.github.com fetch from the landing navbar and the docs theme; both now render a build-time star count (docs via a new VitePress data loader). deploy-docs.yml gets GITHUB_TOKEN plus a daily refresh cron, mirroring deploy-landing.yml. Fixes #555.

.github/workflows/deploy-docs.yml

@@ -5,6 +5,11 @@ on:
     branches: [main]
     paths:
       - "apps/docs/**"
+  # Daily rebuild so the build-time GitHub star count refreshes even when no
+  # docs files changed (mirrors deploy-landing.yml, offset an hour so the two
+  # scheduled deploys don't fire at once).
+  schedule:
+    - cron: "0 8 * * *"
   workflow_dispatch:
 
 concurrency:
@@ -24,6 +29,10 @@ jobs:
 
       - name: Build Docs
         run: pnpm --filter @snapotter/docs docs:build
+        env:
+          # Authenticated GitHub API (5,000 req/hr) so the build-time star-count
+          # fetch isn't rate-limited on shared runner IPs (60 req/hr unauth).
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Deploy to Cloudflare Pages
         run: npx wrangler pages deploy apps/docs/.vitepress/dist --project-name snapotter-docs --branch main --commit-dirty=true

apps/docs/.vitepress/theme/GitHubStars.vue

@@ -1,26 +1,17 @@
 <script setup lang="ts">
 import { useData } from "vitepress";
-import { computed, onMounted, ref } from "vue";
+import { computed } from "vue";
 import { normalizeLocale, t } from "../i18n/ui.mjs";
+import { data as githubStars } from "./github-stars.data.ts";
 
 const { lang } = useData();
 const locale = computed(() => normalizeLocale(lang.value));
 const starLabel = computed(() => t(locale.value, "github.star"));
 
-const stars = ref<string | null>(null);
+// Resolved at build time (see github-stars.data.ts), so no per-page request to
+// api.github.com is made from the browser.
+const stars = githubStars.display;
 const repo = "https://github.com/snapotter-hq/snapotter";
-
-onMounted(async () => {
-  try {
-    const res = await fetch("https://api.github.com/repos/snapotter-hq/snapotter");
-    if (!res.ok) return;
-    const data = await res.json();
-    const count = data.stargazers_count;
-    stars.value = count >= 1000 ? `${(count / 1000).toFixed(1)}k` : String(count);
-  } catch {
-    // Stars count won't show if fetch fails
-  }
-});
 </script>
 
 <template>
@@ -33,7 +24,7 @@ onMounted(async () => {
       <span class="github-btn-label">{{ starLabel }}</span>
     </a>
     <a
-      v-if="stars !== null"
+      v-if="stars"
       :href="`${repo}/stargazers`"
       target="_blank"
       rel="noopener"

apps/docs/.vitepress/theme/github-stars.data.ts

@@ -0,0 +1,57 @@
+// Build-time GitHub star count for the docs navbar. Fetched in Node during the
+// VitePress build (never from the browser), so the docs site makes no per-page
+// request to api.github.com. Mirrors the landing site's build-time getStarCount
+// (apps/landing/src/lib/stats.ts): sends an Authorization header when
+// GITHUB_TOKEN is set (CI) to lift the 60 req/hr unauthenticated limit, and
+// degrades to a maintained constant if the API is unreachable or rate-limited,
+// so a build never ships an empty count.
+import { defineLoader } from "vitepress";
+
+const GITHUB_REPO = "snapotter-hq/SnapOtter";
+
+// Fallback used when the upstream fetch fails. Keep roughly current so a
+// degraded build still shows a believable figure (matches STAR_FALLBACK in
+// apps/landing/src/lib/stats.ts).
+const STAR_FALLBACK = 1720;
+
+export interface GitHubStarsData {
+  /** Compact star count for display, e.g. "1.7k". */
+  display: string;
+}
+
+declare const data: GitHubStarsData;
+
+export { data };
+
+/** Compact integer formatting: 1720 -> "1.7k", 2_300_000 -> "2.3M". */
+function formatCompact(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, "")}k`;
+  return n.toString();
+}
+
+async function fetchStarCount(): Promise<number> {
+  try {
+    const token = process.env.GITHUB_TOKEN;
+    const res = await fetch(`https://api.github.com/repos/${GITHUB_REPO}`, {
+      headers: {
+        Accept: "application/vnd.github+json",
+        "User-Agent": "SnapOtter-Docs",
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+    });
+    if (res.ok) {
+      const json = await res.json();
+      if (typeof json.stargazers_count === "number") return json.stargazers_count;
+    }
+  } catch {
+    // Network/JSON failure: fall through to the fallback below.
+  }
+  return STAR_FALLBACK;
+}
+
+export default defineLoader({
+  async load(): Promise<GitHubStarsData> {
+    return { display: formatCompact(await fetchStarCount()) };
+  },
+});

apps/landing/src/components/Navbar.astro

@@ -93,7 +93,7 @@ const links: NavItem[] = [
       >
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
         <svg class="h-3.5 w-3.5 text-primary" viewBox="0 0 24 24" fill="currentColor"><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="gh-stars" class="text-xs">{starCount}</span>
+        <span class="text-xs">{starCount}</span>
       </a>
       <a
         href={localizeHref(locale, "/contact")}
@@ -167,39 +167,3 @@ const links: NavItem[] = [
     display: block;
   }
 </style>
-
-<script is:inline>
-  // Live GitHub star count, cached in localStorage for 1 hour so a visitor browsing
-  // many pages only hits the API once. Falls back to the build-time value on failure.
-  (function () {
-    var el = document.getElementById("gh-stars");
-    if (!el) return;
-    var KEY = "snapotter:gh-stars";
-    var TTL = 3600000; // 1 hour
-    function fmt(n) {
-      return n >= 1000
-        ? ((n / 1000) % 1 === 0 ? (n / 1000).toFixed(0) : (n / 1000).toFixed(1)) + "k"
-        : String(n);
-    }
-    try {
-      var cached = JSON.parse(localStorage.getItem(KEY) || "null");
-      if (cached && typeof cached.n === "number" && Date.now() - cached.t < TTL) {
-        el.textContent = fmt(cached.n);
-        return;
-      }
-    } catch (e) {}
-    fetch("https://api.github.com/repos/snapotter-hq/snapotter")
-      .then(function (r) {
-        return r.ok ? r.json() : null;
-      })
-      .then(function (d) {
-        if (d && typeof d.stargazers_count === "number") {
-          el.textContent = fmt(d.stargazers_count);
-          try {
-            localStorage.setItem(KEY, JSON.stringify({ n: d.stargazers_count, t: Date.now() }));
-          } catch (e) {}
-        }
-      })
-      .catch(function () {});
-  })();
-</script>