Website: GitHub stars / forks / PRs counter in navbar #36

Website: GitHub stars / forks / PRs counter in the navbar

The landing navbar currently shows a bare round GitHub icon (src/components/landing/navbar.tsx, desktop + mobile) and a plain "Star on GitHub" link in the mobile menu. Replace them with a live counter badge that shows the project's traction and nudges visitors to star it.

Design

A segmented pill with two parts and a divider between them:

┌──────┬──────────────┐
│  ⬤   │  500+  ☆     │   ← stars
└──────┴──────────────┘
  GitHub   count + metric icon
  logo

• Left: GitHub mark
• Divider: a 1px vertical line in the border colour
• Right: a rounded count followed by the icon for that metric
  • Stars → star outline icon (Star from lucide-react)
  • Forks → fork icon (GitFork)
  • Pull requests → PR icon (GitPullRequest)
• Rounded rectangle, border-white/[0.1], dark background, white text — matching the existing navbar buttons
• Hover: subtle bg-white/5, same as the current GitHub button
• Whole pill links to the repo (or /stargazers, /forks, /pulls for each metric)

Behaviour

• Count formatting: round down to a friendly bucket followed by + (e.g. 10+, 150+, 500+, 1k+, 1.2k+). Use Intl.NumberFormat with notation: "compact" for 1000 and above.
• Data source: GitHub REST API GET /repos/babelize/babelize-elements (stargazers_count, forks_count) and the search API for open PRs (is:pr is:open repo:babelize/babelize-elements).
• Fetch on the server, cached. Unauthenticated GitHub API calls are capped at 60/hour per IP, so never fetch from the client. Fetch in a server component or route with time-based revalidation (e.g. every hour). Read the caching guide in node_modules/next/dist/docs/ first — this Next.js version differs from older ones.
• Public, unauthenticated API only. No token, no GitHub App, no secrets — contributors and the deployment won't be given repo access or credentials. All the data needed (stars, forks, open PRs) is public, so the unauthenticated endpoints are enough; server-side caching keeps us well under the 60 req/hour limit.
• Fallback: if the request fails, render the pill with no count (logo + icon only). Never show 0 or an error.
• Accessibility: aria-label="Star babelize-elements on GitHub (500+ stars)"; mark the icons aria-hidden.

Placement

• Desktop navbar: the stars pill replaces the round GitHub icon
• Mobile navbar: compact stars pill (it may hide the count below sm)
• Mobile menu: replace the "Star on GitHub" text link with the pill
• Optional: show stars, forks and PRs together in the landing "Community" / "Contribute" section

Acceptance

• Reusable GitHubCounter component in src/components/landing/ with a metric: "stars" | "forks" | "prs" prop
• Unit test for the count formatter (0, 9, 10, 150, 999, 1000, 1234, 12500)
• No extra client-side network requests (confirm in the Network tab)
• Works in light and dark mode on the docs site if reused there
• bun run lint, typecheck, test and build pass