feat: enhance user avatar handling in comparison table and update GitHub user data fetching

Author: lazzyms

components/comparison-table.tsx

@@ -12,13 +12,13 @@ export function ComparisonTable({ user1, user2 }: ComparisonTableProps) {
   return (
     <div className="grid md:grid-cols-2 gap-6">
       {[user1, user2].map((user, idx) => (
-        <Card key={user.username} className="overflow-hidden transition-all hover:shadow-lg">
+        <Card key={`${user.username}-${idx}`} className="overflow-hidden transition-all hover:shadow-lg">
           <CardHeader className={`pb-4 ${user.isWinner ? "border-b-2 border-primary/30" : "border-b-2 border-muted"}`}>
             <CardTitle className="flex items-center justify-between">
               <div className="flex items-center gap-3">
                 <Image
                   src={user.avatarUrl}
-                  alt={user.username}
+                  alt={`${user.name || user.username}'s avatar`}
                   width={40}
                   height={40}
                   className="rounded-full ring-2 ring-border"

lib/github.ts

@@ -1,4 +1,5 @@
 import { ContributionTotals, GitHubUserData, PullRequestNode, RepoNode } from "@/types/github";
+import { graphql } from "@octokit/graphql";
 
 type GitHubRawUser = {
   name: string | null;
@@ -7,7 +8,6 @@ type GitHubRawUser = {
   pullRequests: { nodes: PullRequestNode[] };
   contributionsCollection: ContributionTotals;
 };
-import { graphql } from "@octokit/graphql";
 
 if (!process.env.GITHUB_TOKEN) {
   throw new Error("Missing GITHUB_TOKEN");
@@ -24,7 +24,7 @@ const QUERY = /* GraphQL */ `
   query FetchUserData($login: String!, $repoCount: Int = 100, $prCount: Int = 100) {
     user(login: $login) {
       name
-      avatarUrl
+      avatarUrl(size: 80)
       repositories(
         first: $repoCount
         privacy: PUBLIC
@@ -77,10 +77,10 @@ export async function fetchGitHubUserData(
   }
 
   return {
-    name: user.name as string | null,
-    avatarUrl: user.avatarUrl as string,
-    repos: user.repositories.nodes as RepoNode[],
-    pullRequests: user.pullRequests.nodes as PullRequestNode[],
-    contributions: user.contributionsCollection as ContributionTotals,
+    name: user.name,
+    avatarUrl: user.avatarUrl,
+    repos: user.repositories.nodes,
+    pullRequests: user.pullRequests.nodes,
+    contributions: user.contributionsCollection,
   };
 }