Skip to content

Commit 758dc7f

Browse files
authored
feat(svg): add 2D GitHub-style heatmap view (JhaSourav07#1915)
## Description Introduces a new `view=heatmap` URL parameter that renders a premium, flat 2D GitHub-style contribution heatmap as an SVG badge. This provides a cleaner, traditional alternative to the default 3D isometric monolith while maintaining CommitPulse's high aesthetic standards. **Key Features Included:** - 14-week contribution grid with 5 color intensity levels based on contribution quartiles. - Smooth scan-line sweep animation and a pulsing border for "today's" cell. - Glow effects on peak contribution days (intensity level 4). - Full compatibility with existing parameters (themes, `auto` theme, `size`, `hide_background`, `hide_stats`, `lang`). - Updated `README.md` documentation and copy examples for the new view. - Added `'heatmap'` to the Zod validation schema and `BadgeParams.view` types. Fixes JhaSourav07#1914 ## Pillar - [x] 🎨 Pillar 1 — New Theme Design - [x] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [ ] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview <img width="1869" height="919" alt="image" src="https://github.com/user-attachments/assets/7da63c67-63d9-49ee-a52f-3bd67dee3d94" /> ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [x] My commits follow the Conventional Commits format (e.g., `feat(themes): ...`, `fix(calculate): ...`). - [x] I have updated `README.md` if I added a new theme or URL parameter. - [x] I have starred the repo. - [x] I have made sure that i have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [x] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents 0e31500 + d0d9790 commit 758dc7f

5 files changed

Lines changed: 442 additions & 4 deletions

File tree

README.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ URL Parameter > Theme Default > System Fallback
176176
| `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`. |
177177
| `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`. |
178178
| `lang` | `string` | No | `en` | Language code for labels (`en`, `es`, `hi`, `fr`, `pt`, `ko`, `ja`, `de`, `zh`) |
179-
| `view` | `string` | No | `default` | Rendering mode: `default` (3D Monolith) or `monthly` (Compact monthly stats) |
179+
| `view` | `string` | No | `default` | Rendering mode: `default` (3D Monolith), `monthly` (Compact monthly stats), or `heatmap` (flat 2D contribution heatmap) |
180180
| `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` |
181181
| `width` | `number` | No | `300` | Custom width for the SVG canvas (currently only applies to `view=monthly`) |
182182
| `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
319319
<!-- Gradient + shading for extra depth -->
320320

321321
![](https://commitpulse.vercel.app/api/streak?user=jhasourav07&gradient=true&shading=true)
322+
323+
<!-- GitHub-style Heatmap View -->
324+
325+
![](https://commitpulse.vercel.app/api/streak?user=jhasourav07&view=heatmap)
326+
327+
<!-- Heatmap with Neon theme -->
328+
329+
![](https://commitpulse.vercel.app/api/streak?user=jhasourav07&view=heatmap&theme=neon)
322330
```
323331

324332
---

app/api/streak/route.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
generateSVG,
1010
generateMonthlySVG,
1111
generateVersusSVG,
12+
generateHeatmapSVG,
1213
} from '@/lib/svg/generator';
1314
import { getSecondsUntilUTCMidnight, getSecondsUntilMidnightInTimezone } from '@/utils/time';
1415
import type { BadgeParams } from '@/types';
@@ -197,6 +198,9 @@ export async function GET(request: Request) {
197198
getMonthlyReferenceDate(year, timezone)
198199
);
199200
svg = generateMonthlySVG(stats, params);
201+
} else if (view === 'heatmap') {
202+
const stats = calculateStreak(calendar, timezone, undefined, grace);
203+
svg = generateHeatmapSVG(stats, params, calendar);
200204
} else if (versus && versusCalendar) {
201205
const stats1 = calculateStreak(calendar, timezone, undefined, grace);
202206
const stats2 = calculateStreak(versusCalendar, timezone, undefined, grace);

0 commit comments

Comments
 (0)