Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Website: GitHub stars / forks / PRs counter in navbar

Ouverte
  • Quelque chose ne va pas ?
#36 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@TanmayNileshShinde y travaille déjà.

Depuis le 15/10/2026.

  • #48 par @TanmayNileshShinde — ouverte

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
62/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
nextjs, react, tailwindcss, typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
TypeScript
Étoiles
39
Forks
16
Merge moyen
2 j 12 h
PR mergées (30 j)
10

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de babelize/babelize-elements

Toutes les issues de babelize/babelize-elements

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.