feat: add 2D GitHub-style heatmap view

Author: code-with-abhi-i5

README.md

@@ -176,7 +176,7 @@ URL Parameter > Theme Default > System Fallback
 | `hide_stats`      | `boolean` | No         | `false`                        | Hides the bottom row displaying Current Streak, Annual Sync Total, and Peak Streak stats when set to `true` or `1`.                                                       |
 | `tz`              | `string`  | No         | Omitted = UTC                  | IANA timezone (e.g. `Asia/Kolkata`, `America/New_York`) — aligns "today" with the user local midnight. Note: `?tz=UTC` is valid but cached separately from omitting `tz`. |
 | `lang`            | `string`  | No         | `en`                           | Language code for labels (`en`, `es`, `hi`, `fr`, `pt`, `ko`, `ja`, `de`, `zh`)                                                                                           |
-| `view`            | `string`  | No         | `default`                      | Rendering mode: `default` (3D Monolith) or `monthly` (Compact monthly stats)                                                                                              |
+| `view`            | `string`  | No         | `default`                      | Rendering mode: `default` (3D Monolith), `monthly` (Compact monthly stats), or `heatmap` (flat 2D contribution heatmap)                                                   |
 | `delta_format`    | `string`  | No         | `percent`                      | Format for month-over-month delta in monthly view: `percent` (e.g. +12%), `absolute` (e.g. +15 commits), or `both`                                                        |
 | `width`           | `number`  | No         | `300`                          | Custom width for the SVG canvas (currently only applies to `view=monthly`)                                                                                                |
 | `height`          | `number`  | No         | `120`                          | Custom height for the SVG canvas (currently only applies to `view=monthly`)                                                                                               |
@@ -319,6 +319,14 @@ Explore some of the built-in CommitPulse themes and quickly copy the style you l
 <!-- Gradient + shading for extra depth -->
 
 ![](https://commitpulse.vercel.app/api/streak?user=jhasourav07&gradient=true&shading=true)
+
+<!-- GitHub-style Heatmap View -->
+
+![](https://commitpulse.vercel.app/api/streak?user=jhasourav07&view=heatmap)
+
+<!-- Heatmap with Neon theme -->
+
+![](https://commitpulse.vercel.app/api/streak?user=jhasourav07&view=heatmap&theme=neon)
 ```
 
 ---

app/api/streak/route.ts

@@ -9,6 +9,7 @@ import {
   generateSVG,
   generateMonthlySVG,
   generateVersusSVG,
+  generateHeatmapSVG,
 } from '@/lib/svg/generator';
 import { getSecondsUntilUTCMidnight, getSecondsUntilMidnightInTimezone } from '@/utils/time';
 import type { BadgeParams } from '@/types';
@@ -197,6 +198,9 @@ export async function GET(request: Request) {
         getMonthlyReferenceDate(year, timezone)
       );
       svg = generateMonthlySVG(stats, params);
+    } else if (view === 'heatmap') {
+      const stats = calculateStreak(calendar, timezone, undefined, grace);
+      svg = generateHeatmapSVG(stats, params, calendar);
     } else if (versus && versusCalendar) {
       const stats1 = calculateStreak(calendar, timezone, undefined, grace);
       const stats2 = calculateStreak(versusCalendar, timezone, undefined, grace);

app/components/HeroSection.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
 import { describe, expect, it, vi } from 'vitest';
 import { HeroSection } from './HeroSection';
 
@@ -12,40 +13,52 @@ vi.mock('framer-motion', () => ({
 }));
 
 describe('HeroSection', () => {
-  it('renders the h1 heading', () => {
+  it('renders the hero heading and content', () => {
     render(<HeroSection />);
 
-    const heading = screen.getByRole('heading', {
-      level: 1,
-    });
-
-    expect(heading).toBeDefined();
-  });
-
-  it("heading contains 'Elevate Your'", () => {
-    render(<HeroSection />);
-
-    expect(screen.getByText(/Elevate Your/i)).toBeDefined();
-  });
-
-  it("heading contains 'Contribution Story'", () => {
-    render(<HeroSection />);
-
-    expect(screen.getByText(/Contribution Story/i)).toBeDefined();
+    expect(
+      screen.getByRole('heading', {
+        level: 1,
+        name: /elevate your contribution story/i,
+      })
+    ).toBeInTheDocument();
+    expect(screen.getByText(/isometric/i).textContent).toMatch(/isometric/i);
   });
+});
 
-  it('renders the descriptive paragraph', () => {
-    render(<HeroSection />);
+describe('HeroSection responsive breakpoints', () => {
+  const renderAtViewport = (width: number) => {
+    window.innerWidth = width;
+    window.dispatchEvent(new Event('resize'));
 
-    const paragraph = screen.getByText(/isometric/i);
+    return render(<HeroSection />);
+  };
 
-    expect(paragraph).toBeDefined();
-  });
+  it.each([
+    { width: 375, label: 'mobile' },
+    { width: 768, label: 'tablet' },
+    { width: 1280, label: 'desktop' },
+  ])('renders full typography and high contrast background values at $label width', ({ width }) => {
+    const { container } = renderAtViewport(width);
 
-  it("paragraph mentions 'isometric'", () => {
-    render(<HeroSection />);
+    const hero = container.firstElementChild;
+    const heading = screen.getByRole('heading', {
+      level: 1,
+      name: /elevate your contribution story/i,
+    });
 
-    expect(screen.getByText(/isometric/i).textContent).toMatch(/isometric/i);
+    expect(hero?.className).toContain('bg-[radial-gradient');
+    expect(heading.tagName).toBe('H1');
+    expect(heading.className).toContain('text-5xl');
+    expect(heading.className).toContain('md:text-8xl');
+    expect(heading.className).toContain('from-green-500');
+    expect(heading.className).toContain('to-purple-600');
+    expect(screen.getByText(/generate high-fidelity, 3d isometric monoliths/i).className).toContain(
+      'text-gray-600'
+    );
+    expect(screen.getByPlaceholderText(/enter github username/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /watch dashboard/i })).toBeInTheDocument();
   });
 });
 

lib/calculate.test.ts

@@ -160,6 +160,31 @@ describe('calculateStreak', () => {
     expect(result.totalContributions).toBe(13);
   });
 
+  it('counts weekday-only commits from Monday through Friday without spanning weekend gaps', () => {
+    // 2024-01-01 is a Monday. Commits happen only on weekdays across two work weeks.
+    const calendar = buildCalendar([
+      1,
+      1,
+      1,
+      1,
+      1,
+      0,
+      0, // Mon-Fri active, Sat-Sun inactive
+      1,
+      1,
+      1,
+      1,
+      1, // Mon-Fri active again, ending on Friday
+    ]);
+
+    const result = calculateStreak(calendar, 'UTC', new Date('2024-01-12T12:00:00Z'));
+
+    expect(result.currentStreak).toBe(5);
+    expect(result.longestStreak).toBe(5);
+    expect(result.totalContributions).toBe(10);
+    expect(result.todayDate).toBe('2024-01-12');
+  });
+
   it('keeps the streak alive via the grace period when only yesterday has contributions', () => {
     // Today is 0, but yesterday is 1 — the grace period treats the streak as still active.
     const calendar = buildCalendar([

lib/svg/generator.test.ts

@@ -965,7 +965,6 @@ describe('generateMonthlySVG', () => {
     expect(svg).toContain('width="400"');
     expect(svg).toContain('height="200"');
   });
-
   it('includes prefers-reduced-motion media query in static monthly SVG output', () => {
     const svg = generateMonthlySVG(mockMonthlyStats, {
       user: 'octocat',
@@ -987,6 +986,17 @@ describe('generateMonthlySVG', () => {
     expect(svg).toContain('transition: none !important');
   });
 
+  it('includes CSS variables in auto-theme monthly SVG', () => {
+    const svg = generateMonthlySVG(mockMonthlyStats, {
+      user: 'octocat',
+      autoTheme: true,
+    } as unknown as BadgeParams);
+
+    expect(svg).toContain('--cp-bg');
+    expect(svg).toContain('--cp-accent');
+    expect(svg).toContain('prefers-color-scheme: dark');
+  });
+
   it('supports dynamic Google Fonts for non-predefined fonts in monthly auto-theme mode', () => {
     const svg = generateMonthlySVG(mockMonthlyStats, {
       user: 'octocat',