Merge branch 'main' into test-wrapped-date-range

Author: Vishvadharman

.gitignore

@@ -33,7 +33,7 @@ yarn-error.log*
 # env files — ignore all local secrets but commit the example template
 .env*
 !.env.local.example
-
+.env.local
 # vercel
 .vercel
 

README.md

@@ -451,7 +451,14 @@ Yes — if private contributions visibility is enabled in your GitHub settings.
 
 ### Are there GitHub API rate limits?
 
-Yes, but CommitPulse minimizes API usage using caching and optimized GraphQL queries.
+Yes. CommitPulse minimizes API usage via caching and optimized GraphQL queries, but if you hit the GitHub API rate limit (typically 5,000 requests per hour for authenticated users), you might see errors or missing data.
+
+#### Troubleshooting Rate Limit Errors
+
+1. **Wait it out:** Rate limits automatically reset every hour.
+2. **Provide your own PAT:** If self-hosting, ensure you've provided a valid `GITHUB_TOKEN` in `.env.local` to get the authenticated rate limit.
+3. **Avoid aggressive bypassing:** Avoid repeatedly using the `&refresh=true` parameter, which bypasses the cache and consumes API quota on every load.
+4. **Check GitHub API Status:** Occasionally, GitHub's GraphQL API itself experiences degradation. Check [githubstatus.com](https://www.githubstatus.com/).
 
 ---
 

app/(root)/dashboard/[username]/page.test.tsx

@@ -103,17 +103,33 @@ describe('DashboardPage', () => {
   });
 
   describe('generateMetadata', () => {
-    it('generates correct metadata for a given user', async () => {
+    it('generates correct metadata for a given user and forwards valid searchParams', async () => {
       const username = 'octocat';
       const metadata = await generateMetadata({
         params: Promise.resolve({ username }),
+        searchParams: Promise.resolve({
+          theme: 'neon',
+          bg: '000000',
+          text: '00ff00',
+          accent: 'ff00ff',
+          ignoredArray: ['a', 'b'],
+          ignoredUndefined: undefined,
+        }),
       });
 
       const openGraphImage = (metadata.openGraph?.images as any[])?.[0];
 
       expect(metadata.title).toBe("octocat's Commit Pulse");
       expect(metadata.description).toContain("octocat's GitHub contribution pulse");
-      expect(openGraphImage.url).toContain('api/og?user=octocat');
+      const url = openGraphImage.url;
+      expect(url).toContain('api/og?');
+      expect(url).toContain('user=octocat');
+      expect(url).toContain('theme=neon');
+      expect(url).toContain('bg=000000');
+      expect(url).toContain('text=00ff00');
+      expect(url).toContain('accent=ff00ff');
+      expect(url).not.toContain('ignoredArray');
+      expect(url).not.toContain('ignoredUndefined');
       expect(openGraphImage.width).toBe(1200);
       expect(openGraphImage.height).toBe(630);
       expect(openGraphImage.alt).toContain(username);

app/(root)/dashboard/[username]/page.tsx

@@ -13,11 +13,24 @@ const BASE_URL =
 
 export async function generateMetadata({
   params,
+  searchParams,
 }: {
   params: Promise<{ username: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }): Promise<Metadata> {
   const { username } = await params;
-  const ogImage = `${BASE_URL}/api/og?user=${username}`;
+  const resolvedSearchParams = await searchParams;
+
+  const queryParams = new URLSearchParams({ user: username });
+  if (typeof resolvedSearchParams?.theme === 'string')
+    queryParams.set('theme', resolvedSearchParams.theme);
+  if (typeof resolvedSearchParams?.bg === 'string') queryParams.set('bg', resolvedSearchParams.bg);
+  if (typeof resolvedSearchParams?.text === 'string')
+    queryParams.set('text', resolvedSearchParams.text);
+  if (typeof resolvedSearchParams?.accent === 'string')
+    queryParams.set('accent', resolvedSearchParams.accent);
+
+  const ogImage = `${BASE_URL}/api/og?${queryParams.toString()}`;
   const title = `${username}'s Commit Pulse`;
   const description = `Check out ${username}'s GitHub contribution pulse — streaks, insights, and more on CommitPulse.`;
 

app/api/og/route.test.ts

@@ -52,4 +52,42 @@ describe('OG Route', () => {
 
     expect(res.status).toBe(200);
   });
+
+  it('handles custom themes and valid custom colors without crashing', async () => {
+    vi.mocked(fetchGitHubContributions).mockResolvedValue({} as never);
+    vi.mocked(calculateStreak).mockReturnValue({
+      totalContributions: 120,
+      longestStreak: 20,
+      currentStreak: 5,
+      todayDate: '2026-05-27',
+    });
+
+    // Uses 4-digit hex shorthand for bg to ensure getLuminance handles it
+    const req = new NextRequest(
+      'http://localhost:3000/api/og?user=testuser&theme=dracula&bg=000&text=ffffff&accent=ff0000'
+    );
+    const res = await GET(req as never);
+
+    expect(res).toBeDefined();
+    expect(res.status).toBe(200);
+  });
+
+  it('handles invalid custom themes and invalid colors gracefully with fallbacks', async () => {
+    vi.mocked(fetchGitHubContributions).mockResolvedValue({} as never);
+    vi.mocked(calculateStreak).mockReturnValue({
+      totalContributions: 120,
+      longestStreak: 20,
+      currentStreak: 5,
+      todayDate: '2026-05-27',
+    });
+
+    // Invalid theme and invalid hexes
+    const req = new NextRequest(
+      'http://localhost:3000/api/og?user=testuser&theme=non_existent_theme_xyz&bg=not-hex&text=xyz&accent=12'
+    );
+    const res = await GET(req as never);
+
+    expect(res).toBeDefined();
+    expect(res.status).toBe(200);
+  });
 });

app/api/og/route.tsx

@@ -3,12 +3,43 @@
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
 import { ogParamsSchema } from '@/lib/validations';
+import { themes } from '@/lib/svg/themes';
 import { fetchGitHubContributions } from '@/lib/github';
 import { calculateStreak } from '@/lib/calculate';
 
+function getLuminance(hex: string) {
+  let normalizedHex = hex.trim();
+  // Normalize short hex (e.g., #fff or #ffff) to #rrggbb (alpha is ignored for luminance)
+  if (normalizedHex.length === 4 || normalizedHex.length === 5) {
+    normalizedHex = `#${normalizedHex[1]}${normalizedHex[1]}${normalizedHex[2]}${normalizedHex[2]}${normalizedHex[3]}${normalizedHex[3]}`;
+  }
+  const r = parseInt(normalizedHex.slice(1, 3), 16) / 255 || 0;
+  const g = parseInt(normalizedHex.slice(3, 5), 16) / 255 || 0;
+  const b = parseInt(normalizedHex.slice(5, 7), 16) / 255 || 0;
+
+  const [R, G, B] = [r, g, b].map((c) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  );
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url);
-  const { user } = ogParamsSchema.parse(Object.fromEntries(searchParams.entries()));
+
+  const { user, theme, bg, text, accent } = ogParamsSchema.parse(
+    Object.fromEntries(searchParams.entries())
+  );
+
+  const selectedTheme = themes[theme] || themes.dark;
+  const resolvedBg = `#${bg || selectedTheme.bg}`;
+  const resolvedText = `#${text || selectedTheme.text}`;
+  const resolvedAccent = `#${accent || selectedTheme.accent}`;
+
+  const luminance = getLuminance(resolvedBg);
+  const isLight = luminance > 0.5;
+  const cardBg = isLight ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.08)';
+  const cardBorder = isLight ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.1)';
+  const subText = isLight ? '#666666' : '#8b949e';
 
   let totalCommits = 0;
   let longestStreak = 0;
@@ -31,7 +62,7 @@ export async function GET(req: NextRequest) {
       style={{
         width: '1200px',
         height: '630px',
-        background: '#0d1117',
+        background: resolvedBg,
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
@@ -45,7 +76,7 @@ export async function GET(req: NextRequest) {
           position: 'absolute',
           width: '600px',
           height: '300px',
-          background: 'radial-gradient(ellipse, #58a6ff22 0%, transparent 70%)',
+          background: `radial-gradient(ellipse, ${resolvedAccent}33 0%, transparent 70%)`,
           top: '50px',
           left: '300px',
           display: 'flex',
@@ -55,21 +86,14 @@ export async function GET(req: NextRequest) {
         style={{
           display: 'flex',
           fontSize: '48px',
-          color: '#58a6ff',
+          color: resolvedAccent,
           fontWeight: 'bold',
           marginBottom: '24px',
         }}
       >
         {'⚡ CommitPulse'}
       </div>
-      <div
-        style={{
-          display: 'flex',
-          fontSize: '32px',
-          color: '#c9d1d9',
-          marginBottom: '48px',
-        }}
-      >
+      <div style={{ display: 'flex', fontSize: '32px', color: resolvedText, marginBottom: '48px' }}>
         {`@${user}`}
       </div>
       <div style={{ display: 'flex', gap: '48px' }}>
@@ -79,16 +103,18 @@ export async function GET(req: NextRequest) {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            background: '#161b22',
-            border: '1px solid #30363d',
+            background: cardBg,
+            border: `1px solid ${cardBorder}`,
             borderRadius: '16px',
             padding: '32px 48px',
           }}
         >
-          <div style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: '#58a6ff' }}>
+          <div
+            style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: resolvedAccent }}
+          >
             {String(totalCommits)}
           </div>
-          <div style={{ display: 'flex', fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
+          <div style={{ display: 'flex', fontSize: '18px', color: subText, marginTop: '8px' }}>
             Total Commits
           </div>
         </div>
@@ -98,16 +124,18 @@ export async function GET(req: NextRequest) {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            background: '#161b22',
-            border: '1px solid #30363d',
+            background: cardBg,
+            border: `1px solid ${cardBorder}`,
             borderRadius: '16px',
             padding: '32px 48px',
           }}
         >
-          <div style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: '#f78166' }}>
+          <div
+            style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: resolvedAccent }}
+          >
             {String(longestStreak)}
           </div>
-          <div style={{ display: 'flex', fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
+          <div style={{ display: 'flex', fontSize: '18px', color: subText, marginTop: '8px' }}>
             {'Longest Streak 🔥'}
           </div>
         </div>
@@ -117,16 +145,18 @@ export async function GET(req: NextRequest) {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
-            background: '#161b22',
-            border: '1px solid #30363d',
+            background: cardBg,
+            border: `1px solid ${cardBorder}`,
             borderRadius: '16px',
             padding: '32px 48px',
           }}
         >
-          <div style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: '#3fb950' }}>
+          <div
+            style={{ display: 'flex', fontSize: '56px', fontWeight: 'bold', color: resolvedAccent }}
+          >
             {String(currentStreak)}
           </div>
-          <div style={{ display: 'flex', fontSize: '18px', color: '#8b949e', marginTop: '8px' }}>
+          <div style={{ display: 'flex', fontSize: '18px', color: subText, marginTop: '8px' }}>
             {'Current Streak ⚡'}
           </div>
         </div>
@@ -137,7 +167,7 @@ export async function GET(req: NextRequest) {
           position: 'absolute',
           bottom: '32px',
           fontSize: '16px',
-          color: '#484f58',
+          color: subText,
         }}
       >
         commitpulse.vercel.app

app/api/streak/route.test.ts

@@ -69,8 +69,12 @@ describe('GET /api/streak', () => {
       const response = await GET(makeRequest());
 
       expect(response.status).toBe(400);
-      const body = await response.text();
-      expect(body).toContain('Missing');
+      const body = await response.json();
+      expect(response.status).toBe(400);
+      expect(body.error).toBe('Invalid parameters');
+      expect(body.details).not.toBeNull();
+      expect(typeof body.details).toBe('object');
+      expect(Array.isArray(body.details)).toBe(false);
     });
 
     it('does not hit the GitHub API at all when user is missing', async () => {
@@ -90,6 +94,20 @@ describe('GET /api/streak', () => {
 
       expect(fetchGitHubContributions).not.toHaveBeenCalled();
     });
+    it('returns 400 when user contains spaces', async () => {
+      const response = await GET(makeRequest({ user: 'john doe' }));
+      const body = await response.json();
+
+      expect(response.status).toBe(400);
+      expect(body.details.fieldErrors.user[0]).toContain('Invalid GitHub username');
+    });
+
+    it('returns 400 when user exceeds 39 characters', async () => {
+      const response = await GET(makeRequest({ user: 'a'.repeat(40) }));
+      expect(response.status).toBe(400);
+      const body = await response.json();
+      expect(JSON.stringify(body)).toContain('cannot exceed 39 characters');
+    });
 
     it('returns 400 for invalid monthly badge dimensions', async () => {
       const invalidDimensionParams: Array<Record<string, string>> = [
@@ -109,6 +127,17 @@ describe('GET /api/streak', () => {
 
       expect(fetchGitHubContributions).not.toHaveBeenCalled();
     });
+
+    it('should return 200 OK and valid SVG when the optional repo query parameter is provided', async () => {
+      // 1. Make request with both parameters present
+      const response = await GET(makeRequest({ user: 'octocat', repo: 'commitpulse' }));
+
+      // 2. Assert definitions of done
+      expect(response.status).toBe(200);
+
+      const textOutput = await response.text();
+      expect(textOutput).toContain('<svg');
+    });
   });
 
   describe('successful response', () => {
@@ -140,6 +169,14 @@ describe('GET /api/streak', () => {
       // The generator puts params.user.toUpperCase() in the SVG as the badge title.
       expect(body).toContain('OCTOCAT');
     });
+
+    it('should contain a <title> element with accessible label in the SVG response', async () => {
+      const response = await GET(makeRequest({ user: 'octocat' }));
+      const body = await response.text();
+
+      expect(body).toContain('<title>');
+      expect(body).toContain('Stats for');
+    });
   });
 
   describe('cache-control header', () => {
@@ -484,7 +521,7 @@ describe('GET /api/streak', () => {
     it('does not crash when an invalid text color is provided', async () => {
       const response = await GET(makeRequest({ user: 'octocat', text: 'notacolor' }));
 
-      expect(response.status).toBe(200);
+      expect(response.status).toBe(400);
     });
   });
 
@@ -672,7 +709,7 @@ describe('GET /api/streak', () => {
     it('returns no-cache header when ?theme=random is given', async () => {
       const response = await GET(makeRequest({ user: 'octocat', theme: 'random' }));
 
-      expect(response.headers.get('Cache-Control')).toBe('no-cache, no-store, must-revalidate');
+      expect(response.headers.get('Cache-Control')).toMatch(/public, s-maxage=/);
     });
   });