Merge branch 'main' into feat/7794-visual-regression-testing

Author: sureshsuriya

README.md

@@ -139,11 +139,27 @@ Transform your GitHub contribution history into a cinematic 3D monolith.
 | `monokai`          | Classic vibrant dark         | `272822` | `a6e22e` | `f8f8f2` |
 | `midnight_ocean`   | Deep navy bioluminescent     | `020c1b` | `0af5ff` | `ccd6f6` |
 | `india`            | Saffron & India green        | `0a0a0a` | `FF9933` | `ffffff` |
+| `ocean`            | Deep sea teal & navy         | `0a192f` | `64ffda` | `ccd6f6` |
+| `sunset`           | Warm dusk orange             | `1a0a0a` | `ff6b35` | `ffd6c0` |
+| `forest`           | Emerald woodland green       | `0d1f0d` | `39d353` | `c8f0c8` |
+| `rose`             | Blush pink romance           | `1f0d14` | `ff6b9d` | `f0c8d4` |
+| `nord`             | Arctic frost blue            | `2e3440` | `88c0d0` | `d8dee9` |
+| `synthwave`        | 80s retro pink glow          | `0d0221` | `ff2d78` | `f8f8f2` |
+| `aurora_cyberpunk` | Aurora violet neon           | `090B13` | `9D5CFF` | `EAF2FF` |
+| `catppuccin_latte` | Pastel latte light           | `eff1f5` | `1e66f5` | `4c4f69` |
+| `solarized_light`  | Warm solarized light         | `fdf6e3` | `268bd2` | `586e75` |
+| `gruvbox_light`    | Retro warm light             | `fbf1c7` | `d65d0e` | `3c3836` |
+| `nord_light`       | Arctic frost light           | `eceff4` | `5e81ac` | `2e3440` |
+| `cyberpunk`        | Neon yellow cyberpunk        | `fce22a` | `ff003c` | `111111` |
+| `cyberpunk_neon`   | Electric cyan neon           | `0d0d14` | `ff0055` | `00f3ff` |
+| `enterprise`       | Professional indigo dark     | `1a1a2e` | `6366f1` | `e2e8f0` |
 
 > **`auto` uses CSS `@media (prefers-color-scheme)`** inside the SVG so the badge switches between the `light` and `dark` palettes based on the viewer's OS setting — no JavaScript required. This is ideal for GitHub profile READMEs where visitors may use either mode.
 
 For all URL parameters and configuration possibilities (including grace periods, custom fonts, timezone overrides, versus comparison mode, heatmap view, LOC mode, and layout dimensions), check out the **[🎨 Customization Guide & Parameters](docs/customization.md)**.
 
+For advanced usage examples including custom gradient backgrounds, multi-user comparisons, organization dashboards, and custom date ranges, see the **[🚀 Advanced Usage Examples](docs/customization.md#-advanced-usage-examples)** section in the customization guide.
+
 ---
 
 ## ✨ Features

THEMES.md

@@ -41,6 +41,7 @@ https://commitpulse.vercel.app/api/streak?user=YOUR_USERNAME&theme=<slug>
 | monokai          | `#272822`  | `#f8f8f2` | `#a6e22e` |
 | retro-terminal   | `#000000`  | `#00ff41` | `#00ff41` |
 | midnight_ocean   | `#020c1b`  | `#ccd6f6` | `#0af5ff` |
+| ayu_mirage       | `#212733`  | `#D9D7CE` | `#FFCC66` |
 
 ---
 
@@ -394,6 +395,16 @@ https://commitpulse.vercel.app/api/streak?user=YOUR_USERNAME&theme=<slug>
 
 ---
 
+### Ayu Mirage
+
+![ayu_mirage](https://commitpulse.vercel.app/api/streak?user=jhasourav07&theme=ayu_mirage)
+
+| Parameter | Value  |
+| --------- | ------ |
+| `bg`      | 212733 |
+| `text`    | D9D7CE |
+| `accent`  | FFCC66 |
+
 ## Custom Theme
 
 Not finding what you want? Build your own using raw color parameters - all values are hex codes **without** the `#` prefix:

app/(root)/dashboard/layout.error-resilience.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import React, { Component, ReactNode, ErrorInfo } from 'react';
+import DashboardLayout from './layout';
+
+vi.mock('sonner', () => ({
+  Toaster: () => <div data-testid="toaster" />,
+}));
+
+class TestErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
+  constructor(props: { children: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // catch silently for tests
+  }
+  render() {
+    if (this.state.hasError) {
+      return <div>Test Fallback UI</div>;
+    }
+    return this.props.children;
+  }
+}
+
+const ThrowError = () => {
+  throw new Error('Hydration error simulated');
+};
+
+describe('DashboardLayout - Error Resilience', () => {
+  it('prevents layout structural crash when child components throw errors', () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <TestErrorBoundary>
+        <DashboardLayout>
+          <ThrowError />
+        </DashboardLayout>
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByText('Test Fallback UI')).toBeInTheDocument();
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('renders gracefully with fallback UI placeholders during hydration', () => {
+    render(
+      <DashboardLayout>
+        <div data-testid="hydration-fallback">Loading layout skeleton...</div>
+      </DashboardLayout>
+    );
+
+    expect(screen.getByTestId('hydration-fallback')).toBeInTheDocument();
+    expect(screen.getByTestId('toaster')).toBeInTheDocument();
+  });
+});

app/(root)/dashboard/layout.mock-integrations.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import DashboardLayout from './layout';
+import React from 'react';
+
+vi.mock('sonner', () => ({
+  Toaster: () => <div data-testid="toaster" />,
+}));
+
+describe('DashboardLayout - mock integrations', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+  });
+
+  it('renders children asynchronously resolving from a mocked service layer', async () => {
+    const MockAsyncChild = () => {
+      const [data, setData] = React.useState<string | null>(null);
+      React.useEffect(() => {
+        setTimeout(() => setData('Async Data Loaded'), 100);
+      }, []);
+      return <div data-testid="async-child">{data || 'Loading...'}</div>;
+    };
+
+    render(
+      <DashboardLayout>
+        <MockAsyncChild />
+      </DashboardLayout>
+    );
+
+    expect(screen.getByTestId('async-child')).toHaveTextContent('Loading...');
+
+    await act(async () => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(screen.getByTestId('async-child')).toHaveTextContent('Async Data Loaded');
+  });
+
+  it('renders correctly with a local cache stub', () => {
+    const cachedData = { user: 'Test User', cached: true };
+    render(
+      <DashboardLayout>
+        <div data-testid="cache-child">{cachedData.user}</div>
+      </DashboardLayout>
+    );
+    expect(screen.getByTestId('cache-child')).toHaveTextContent('Test User');
+    expect(screen.getByTestId('toaster')).toBeInTheDocument();
+  });
+});

app/(root)/dashboard/layout.timezone-boundaries.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import DashboardLayout from './layout';
+import { mockTimezone, restoreTimezone } from '@/test-utils/timezone-mock';
+
+vi.mock('sonner', () => ({
+  Toaster: () => <div data-testid="toaster" />,
+}));
+
+describe('DashboardLayout - Timezone Boundaries', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    restoreTimezone();
+  });
+
+  it('maintains structural integrity across varying timezones', () => {
+    const timezones = ['America/New_York', 'Asia/Kolkata', 'Asia/Tokyo'] as const;
+
+    for (const tz of timezones) {
+      mockTimezone(tz);
+
+      const { unmount } = render(
+        <DashboardLayout>
+          <div>Timezone Content: {tz}</div>
+        </DashboardLayout>
+      );
+
+      expect(screen.getByText(`Timezone Content: ${tz}`)).toBeInTheDocument();
+      expect(screen.getByRole('main')).toHaveClass('max-w-[1600px]', 'mx-auto', 'min-h-screen');
+
+      unmount();
+      restoreTimezone();
+    }
+  });
+
+  it('handles leap year boundaries correctly', () => {
+    vi.setSystemTime(new Date('2024-02-29T12:00:00Z'));
+
+    render(
+      <DashboardLayout>
+        <div>Leap Year Content</div>
+      </DashboardLayout>
+    );
+
+    expect(screen.getByText('Leap Year Content')).toBeInTheDocument();
+    expect(screen.getByTestId('toaster')).toBeInTheDocument();
+  });
+});

app/api/articles/route.ts

@@ -0,0 +1,68 @@
+import { NextResponse } from 'next/server';
+import { fetchLatestArticles } from '@/lib/rss';
+import { generateArticlesSVG } from '@/lib/svg/articles';
+import { getNormalizedThemeKey, themes } from '@/lib/svg/themes';
+import { sanitizeHexColor } from '@/lib/svg/sanitizer';
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const user = searchParams.get('user');
+    const platformParam = searchParams.get('platform');
+
+    if (!user) {
+      return new NextResponse('Missing user parameter', { status: 400 });
+    }
+
+    const platform = platformParam === 'hashnode' ? 'hashnode' : 'devto';
+
+    // Fetch RSS articles
+    const articles = await fetchLatestArticles(platform, user);
+
+    // Apply theme
+    const themeKey = getNormalizedThemeKey(searchParams.get('theme') || 'default');
+    const theme = themes[themeKey] || themes.default;
+
+    // Allow custom colors
+    const bg = searchParams.get('bg')
+      ? sanitizeHexColor(searchParams.get('bg')!, theme.bg)
+      : theme.bg;
+    const text = searchParams.get('text')
+      ? sanitizeHexColor(searchParams.get('text')!, theme.text)
+      : theme.text;
+    let accent = theme.accent;
+    const accentParam = searchParams.get('accent');
+    if (accentParam) {
+      // support comma separated list, just take the first
+      const accents = accentParam.split(',').map((c) => sanitizeHexColor(c.trim(), theme.accent));
+      if (accents.length > 0 && accents[0]) {
+        accent = accents[0];
+      }
+    }
+
+    const radius = searchParams.get('radius') || '4';
+    const size = searchParams.get('size') || '1';
+
+    const params = {
+      user,
+      platform,
+      bg,
+      text,
+      accent,
+      radius,
+      size,
+    };
+
+    const svg = generateArticlesSVG(articles, params);
+
+    return new NextResponse(svg, {
+      headers: {
+        'Content-Type': 'image/svg+xml',
+        'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
+      },
+    });
+  } catch (error) {
+    console.error('Error generating articles SVG:', error);
+    return new NextResponse('Internal Server Error', { status: 500 });
+  }
+}

app/api/compare/route.empty-fallback.test.ts

@@ -66,7 +66,7 @@ describe('GET /api/compare - Empty & Missing Input Fallbacks', () => {
     const res = await GET(makeRequest('user1=alice&user2=bob'));
     expect(res.status).toBe(200);
     expect(res.headers.get('ETag')).toBeTruthy();
-    expect(res.headers.get('Cache-Control')).toBe('public, s-maxage=3600');
+    expect(res.headers.get('Cache-Control')).toBe('public, s-maxage=1');
   });
 
   it('returns 200 when If-None-Match is an empty string instead of crashing', async () => {

app/api/compare/route.test.ts

@@ -181,7 +181,7 @@ describe('GET /api/compare', () => {
     const res = await GET(makeRequest('user1=alice&user2=bob'));
     expect(res.status).toBe(200);
     expect(res.headers.get('ETag')).toBeTruthy();
-    expect(res.headers.get('Cache-Control')).toBe('public, s-maxage=3600');
+    expect(res.headers.get('Cache-Control')).toBe('public, s-maxage=1');
   });
 
   it('returns 304 Not Modified when If-None-Match matches weak ETag', async () => {
@@ -199,7 +199,7 @@ describe('GET /api/compare', () => {
     expect(res2.status).toBe(304);
     expect(res2.body).toBeNull();
     expect(res2.headers.get('ETag')).toBe(etag);
-    expect(res2.headers.get('Cache-Control')).toBe('public, s-maxage=3600');
+    expect(res2.headers.get('Cache-Control')).toBe('public, s-maxage=1');
   });
 
   it('returns 304 Not Modified when If-None-Match matches strong ETag', async () => {

app/api/compare/route.ts

@@ -103,7 +103,7 @@ export async function GET(request: Request) {
     const etag = crypto.createHash('sha1').update(jsonPayload).digest('hex');
     const weakEtag = `W/"${etag}"`;
     const ifNoneMatch = request.headers.get('if-none-match');
-    const cacheControl = 'public, s-maxage=3600';
+    const cacheControl = 'public, s-maxage=1';
 
     if (ifNoneMatch) {
       const etags = ifNoneMatch.split(',').map((e) => e.trim());

app/api/github/route.test.ts

@@ -245,4 +245,14 @@ describe('Standard route behavior', () => {
     expect(response.status).toBe(500);
     expect(body.error).toBe('Circular cause root');
   });
+
+  it('parses valid org parameter and passes it to getFullDashboardData', async () => {
+    const response = await GET(makeRequest({ username: 'octocat', org: 'github' }));
+    expect(response.status).toBe(200);
+    expect(getFullDashboardData).toHaveBeenCalledWith('octocat', {
+      bypassCache: false,
+      org: 'github',
+      signal: expect.any(AbortSignal),
+    });
+  });
 });