refactor(ui): unify shared work cards, integrate GitHub language palette, and optimize profile layout - #214
Merged
Merged
Conversation
…umentation - Reorganized codebase under `src/` following a Feature-Driven Scalable Next.js Architecture: - `src/features/` (domain modules: comparison, developer, leaderboard, scoring with colocated components, services, tests, types, and barrel exports) - `src/lib/` (infrastructure adapters: cache, db, geo, github, i18n, logger, seo) - `src/components/` (shared domain-agnostic UI: ui, layout, providers, seo) - `src/app/` (thin routing controllers, layouts, and API routes) - `src/locales/`, `src/data/`, `src/types/`, `src/utils/` - Updated path aliases in `tsconfig.json`, `tailwind.config.ts`, and `vitest.config.ts` (`@/features/*`, `@/lib/*`, `@/components/*`, etc.). - Updated script paths in `scripts/calculate-next-country.ts`, `scripts/init-db.ts`, and `scripts/validate-locales.js`. - Created comprehensive `ARCHITECTURE.md` documentation detailing system design, sequence flows, encapsulation rules, and step-by-step contributor cookbooks. - Updated `README.md`, `CONTRIBUTING.md`, and `algorithm.md` to align with the new architecture. - Replaced hardcoded machine/absolute paths in markdown files with relative paths.
…ize responsive layout - Move and unify shared work cards (RepoCardItem, PullRequestCardItem, CommunityCardItem, ScoreCard) under global src/components/cards/ - Fix client/server barrel boundary separation in feature index exports to avoid leaking server-only dependencies (pg, redis, dns) into client bundles - Restructure Profile Top Work section into a responsive 1-column (mobile) and max 2-column (desktop) grid with balanced community card spanning - Enable text wrapping with break-words leading-snug for repository and PR titles to prevent awkward truncation - Add GitHub Linguist language color palette supporting 150+ programming languages with alias normalization and deterministic HSL fallback - Update LanguageBreakdown and SelectedLanguageRow components to render official GitHub color bars and indicators - Add comprehensive unit test suite for language colors (15 suites / 117 tests passing)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Owner
Author
|
✨ Thank you, @O2sa! Another great contribution merged! 🚀 You've been a fantastic contributor! We truly appreciate your continued support. |
This branch was successfully deployed
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.
Summary
This PR unifies the repository, pull request, and community contribution cards across both the Developer Profile (
/user/[username]) and Comparison (/) pages. It also introduces canonical GitHub Linguist language color support, optimizes responsive layout for top work cards, and enforces strict client/server bundle boundary separation.🛠️ Key Changes
1. Unified Shared Cards (
src/components/cards/)RepoCardItem: Star, fork, watcher stats, multi-language progress bar, selected language highlights, score badge.PullRequestCardItem: Target repository, additions/deletions diff pill, language breakdown, score badge.CommunityCardItem: Issue/discussion badge, comment count, stars, and score badge.ScoreCard: Unified score metric cards with tooltips and normalization meters.user-profile-client.tsx,top-list.tsx, andresult-dashboard.tsxto consume these global cards.2. Profile Top Work Responsive Layout
grid-cols-1).md:grid-cols-2), with the 3rd card (Community Contributions) spanning across both columns (md:col-span-2) for a clean, balanced layout.user-profile-skeleton.tsxloading skeleton to match.3. Title & Repository Wrapping
break-words leading-snug, allowing users to read long pull request titles, issue summaries, and repository names in full.items-startwithmt-0.5.4. Canonical GitHub Language Colors (
src/lib/languages/)src/lib/languages/github-colors.tswith 150+ canonical colors from GitHub Linguist (TypeScript, Python, JavaScript, Rust, Go, Swift, Kotlin, C++, Solidity, Zig, Gleam, Mojo, etc.).ts,js,py,golang,rs,cpp,csharp,sh).LanguageBreakdownprogress bar segments, legend dots, andSelectedLanguageRowpills to display authentic GitHub colors.5. Architectural Server Boundary Separation
src/features/*/index.ts) export strictly types and client components.@/lib/dbor@/lib/cacheare imported via explicit@/features/<feature>/servicespaths, preventing Next.js / Turbopack client SSR bundling errors (Can't resolve 'dns').🧪 Verification & Testing
npx tsc --noEmitpassed with 0 errors.npx vitest runpassed all 15 test suites and 117 tests.📸 Component Impact
Developer Profile (/user/[username])-> Unified cards, wrapped titles, 2-column top work, GitHub language colors.Comparison Page (/)-> Shared cards with identical styling, tooltips, and language pills.