Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Website: GitHub stars / forks / PRs counter in navbar

Abierto
  • ¿Algo no está bien?
#36 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
62/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
nextjs, react, tailwindcss, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
39
Forks
16
Merge medio
2 d 12 h
PR fusionados (30 d)
10

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de babelize/babelize-elements

Todos los issues de babelize/babelize-elements

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.