Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Website: GitHub stars / forks / PRs counter in navbar

Offen
  • Stimmt etwas nicht?
#36 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@TanmayNileshShinde arbeitet bereits daran.

Seit 15.10.2026.

  • #48 von @TanmayNileshShinde — offen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
62/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
nextjs, react, tailwindcss, typescript
Bereich
frontend

Rechercherichtung

Start with src/components/landing/navbar.tsx to see the current desktop and mobile GitHub buttons, then create GitHubCounter in src/components/landing/. Read the caching guide in node_modules/next/dist/docs/ before writing the server-side fetch with hourly revalidation, and add a unit test for the count formatter with the listed values. Done when the stars pill replaces the round icon on desktop and mobile, no client-side GitHub requests appear, and bun run lint, typecheck, test and build pass.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

enhancement good first issue priority: low website

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
Vorherrschende Sprache
TypeScript
Sterne
39
Forks
16
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
10

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus babelize/babelize-elements

Alle Issues in babelize/babelize-elements

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.