Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Website: GitHub stars / forks / PRs counter in navbar

オープン
  • 何か問題がありますか？
#36 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
62/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
nextjs, react, tailwindcss, typescript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
TypeScript
スター
39
フォーク
16
平均マージ
2日 12時間
マージ済み PR（30日）
10

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

babelize/babelize-elements のほかの issue

babelize/babelize-elements の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。