Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Website: GitHub stars / forks / PRs counter in navbar

Đang mở
  • Có gì không ổn?
#36 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@TanmayNileshShinde đang làm issue này rồi.

Từ ngày 15/10/2026.

  • #48 của @TanmayNileshShinde — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
62/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, react, tailwindcss, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
39
Fork
16
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
10

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của babelize/babelize-elements

Tất cả issue của babelize/babelize-elements

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.