feat: on-site GitHub link with live star count#14
Merged
Conversation
Add a "Star on GitHub" control to the header (compact) and footer (labelled), so the open-source repo is one click from every page. - components/shared/GitHubStars.tsx: an async server component that fetches the repo's star count from the GitHub API with revalidate 3600 (hit at most once an hour, well under the unauthenticated limit) plus a 3s timeout. Any failure degrades to just the link, so a GitHub outage never breaks a page, and the count never reaches the browser. - Inlined GitHub mark SVG (lucide's brand icon is deprecated); amber Star icon. - lib/tools.ts: GITHUB_REPO / GITHUB_REPO_URL constants. The aria-label mirrors the visible abbreviated count and pluralizes; formatStars is consistent across the 1k/10k boundaries.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a "Star on GitHub" control so the open-source repo is one click from every page: a compact pill in the header (GitHub mark + star count) and a labelled version in the footer ("Star on GitHub" + count).
How
components/shared/GitHubStars.tsx— one async server component used in both places:getStarCount()fetchesapi.github.com/repos/codercops/toolbeltwithnext: { revalidate: 3600 }, so GitHub is hit at most once an hour regardless of traffic (well under the 60/hr unauthenticated limit), and aAbortSignal.timeout(3000)bounds the one cache-miss request per hour.null, so the button still renders as a plain link. A GitHub outage never breaks a page.Githubicon (a deprecated brand icon in this lucide version); amber filledStarfor the count.lib/tools.ts—GITHUB_REPO/GITHUB_REPO_URLconstants (single source).Verification
target="_blank" rel="noopener noreferrer", live count rendered (currently 1).formatStarschecked across boundaries (999 → "999", 1000 → "1.0k", 9999 → "10k", 10500 → "11k") — no "10.0k" artifact.npm run build,npm run lint,npm run test(27/27) pass.Third PR in the SEO plan. Next and last: the README + repo-presentation overhaul (badges, star-history, live tool links, reusing the per-page OG images as visuals).