feat: add github badge to header#266
Conversation
|
Hey @abhijeetnardele24-hash thank you so much for this! Can you show me your badge with a clip? |
There was a problem hiding this comment.
Pull request overview
This PR adds a GitHub badge to the desktop header controls area (next to the theme switcher) that links to the repository and rotates through a few short status/messages.
Changes:
- Adjust header layout CSS so the nav stays centered while the controls area can grow to fit the new badge.
- Add
GitHubHeaderBadgecomponent that fetches repo stats and rotates the badge label text. - Add new badge styling (light/dark variants) to match the header’s existing control styling.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| app/(core)/styles/index.css | Updates header/nav/controls layout and adds GitHub badge styles. |
| app/(core)/components/Header.jsx | Renders the new GitHub badge in the header controls. |
| app/(core)/components/GitHubHeaderBadge.jsx | Implements the badge link, GitHub API fetch, and rotating label behavior. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const REPO_API = "https://api.github.com/repos/physicshub/physicshub.github.io"; | ||
| const CONTRIBUTORS_API = `${REPO_API}/contributors?per_page=100`; | ||
|
|
There was a problem hiding this comment.
CONTRIBUTORS_API fetches only the first page (per_page=100) and then uses contributorsData.length, which undercounts once the repo has >100 contributors. Consider reusing the paging approach already used in ContributorsSection.jsx (fetch pages until empty) or switch to a contributor-count source that can be retrieved accurately in a single request.
| async function loadStats() { | ||
| try { | ||
| const [repoRes, contributorsRes] = await Promise.all([ | ||
| fetch(REPO_API), | ||
| fetch(CONTRIBUTORS_API), | ||
| ]); |
There was a problem hiding this comment.
This header badge triggers two GitHub API requests on every client mount of the header. For a public site this can quickly run into GitHub’s unauthenticated rate limits and adds latency to the critical navigation UI. Consider caching the fetched stats (e.g., in localStorage with a TTL) and/or moving the fetch to a server-side endpoint with revalidation so clients aren’t directly hitting the GitHub API on every visit.
| useEffect(() => { | ||
| const intervalId = window.setInterval(() => { | ||
| setMessageIndex((current) => (current + 1) % messages.length); | ||
| }, 2600); | ||
|
|
||
| return () => window.clearInterval(intervalId); | ||
| }, [messages.length]); |
There was a problem hiding this comment.
The badge text auto-rotates via setInterval, but it doesn’t respect prefers-reduced-motion. Consider disabling the rotation (or significantly slowing it) when the user has reduced motion enabled to avoid unnecessary motion in the main navigation.
|
|
||
| .github-header-badge:hover { | ||
| transform: translateY(-1px); | ||
| box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24); |
There was a problem hiding this comment.
Because this component is an <a>, it will also pick up the global a:hover glow (in dark mode) in addition to .github-header-badge:hover. If the intent is for the badge to match the theme switcher styling, consider explicitly overriding text-shadow (and any other link-hover effects) for .github-header-badge so its hover state is controlled only by its own styles.
| box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24); | |
| box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24); | |
| text-shadow: none; |
Okay dude !!!! ..... I’ll add a short clip here showing the badge in the header, including the rotating text and how it looks next to the theme switcher. |
Screen.Recording.2026-04-08.200151.mp4 |
|
Yea that's exactly how i was imagining. Thank you! |
This adds a GitHub badge to the desktop header next to the theme switcher so the repo is always visible from the main navigation.
Closes #261