Add per-repo language breakdown badges in TopRepos

[Akshat-Neeraj]

Summary

Added language breakdown badges for repositories in TopRepos.

Features

• Fetches repo language data from GitHub API
• Displays top 3 languages with percentages
• Added language color indicators
• Graceful fallback for failed/empty responses
• Responsive badge layout

Files Changed

• src/components/TopRepos.tsx
• src/app/api/metrics/repos/route.ts

[vercel]

@Akshat-Neeraj is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

[Priyanshu-byte-coder]

The language breakdown badges in TopRepos look good, but there's an unintentional import causing the dependency audit to fail:

// src/app/api/metrics/repos/route.ts
import { url } from 'inspector'; // ← Remove this line

inspector is a Node.js debug module — this import is not needed and was likely added accidentally (IDE autocomplete). Remove it and CI should pass.

[Priyanshu-byte-coder]

Hi @Akshat-Neeraj — this PR has a merge conflict in TopRepos.tsx (sort and link features have been merged since your branch was created). Please rebase:

git fetch upstream
git rebase upstream/main
# resolve conflicts, keeping your language breakdown badge changes alongside the existing sort/link code
git push --force-with-lease

Once rebased, we'll review and merge.

[Akshat-Neeraj]

Hi @Priyanshu-byte-coder, thanks for the update. I currently don’t have access to my laptop, so I’ll resolve the rebase conflict and push the updated branch as soon as I get access to it.

…

On Tue, 19 May 2026, 12:39 Priyanshu Doshi, ***@***.***> wrote: *Priyanshu-byte-coder* left a comment (Priyanshu-byte-coder/devtrack#294) <#294 (comment)> Hi @Akshat-Neeraj <https://github.com/Akshat-Neeraj> — this PR has a merge conflict in TopRepos.tsx (sort and link features have been merged since your branch was created). Please rebase: git fetch upstream git rebase upstream/main# resolve conflicts, keeping your language breakdown badge changes alongside the existing sort/link code git push --force-with-lease Once rebased, we'll review and merge. — Reply to this email directly, view it on GitHub <#294 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BHX4WJ2QAWG23M6DVFNDCUT43QCCNAVCNFSM6AAAAACZBS375SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DIOBVGI3TCNBUGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Priyanshu-byte-coder]

Three issues:

1. Frontend fetches GitHub API without auth token (rate limit)
fetchRepoLanguages in TopRepos.tsx calls https://api.github.com/repos/${repo.name}/languages with no Authorization header. Unauthenticated GitHub API: 60 req/hr limit. With 6 repos × N accounts it depletes quickly.

You already fetch languages server-side in repos/route.ts and return them in the RepoSummary. Remove fetchRepoLanguages from the client entirely — just read repo.languages from the data returned by /api/metrics/repos.

2. Missing cache: "no-store" on new fetch calls
The two new fetches in repos/route.ts (/repos/${name} and /repos/${name}/languages) don't have cache: "no-store". Add it to both, consistent with the rest of the route.

3. mergeRepoCommits loses URL and language data
The merge function now returns { name, commits, url: "" } — the url is always empty string and languages is dropped. Multi-account users will get repos with missing URLs. Fix: when merging, preserve the url and languages from whichever entry has them:

map.set(repo.name, {
  commits: (map.get(repo.name)?.commits ?? 0) + repo.commits,
  url: repo.url || map.get(repo.name)?.url || "",
  languages: repo.languages || map.get(repo.name)?.languages || [],
});

[Priyanshu-byte-coder]

1. Double-fetching languages — API route fetches /repos/{name}/languages server-side AND TopRepos.tsx fires client-side unauthenticated GitHub API calls. The client-side fetch has no auth header (60 req/hr cap). Remove the client-side fetch and use repo.languages from the API response instead. 2. Sort lost in mergeRepoCommits — the .sort() by commits was removed, multi-account users now get unsorted results. Restore it. 3. Indentation — new code blocks inside fetchReposForAccount start at column 0 instead of inside the function body.

[Priyanshu-byte-coder]

Two issues:

1. Inconsistent indentation — the language badges block in TopRepos.tsx has inconsistent indentation (mix of 15 and 2-space indents inside the list). Please align with the surrounding JSX formatting.

2. Fallback color — '#888' is used as a fallback color for languages. Replace with 'var(--muted-foreground)' to respect the theme.

[Akshat-Neeraj]

Addressed the requested review changes:

• removed frontend GitHub API fetching
• added cache handling for GitHub fetches
• fixed repository merge logic preservation
• cleaned unused imports
  Build is now passing successfully.
  Thank you for the review.