feat: add optional 3D isometric month headers and weekday labels by Sahitya3105 · Pull Request #800 · JhaSourav07/commitpulse

Sahitya3105 · 2026-05-27T19:13:00Z

Description

Fixes #792

This PR implements optional 3D isometric month headers and day-of-week labels (Mon, Wed, Fri) flat on the isometric grid floor.

Key changes:

Added labels (boolean) and labelColor (hex) to the validation schema and BadgeParams types.
Designed a volumetric 3D offset projection to map month transitions dynamically inside the visible 14-week window.
Placed weekday labels flat along the far-left coordinate bounds (i = -1.2) to ensure zero visual obstruction.
Aligned month names along the front-left baseline bounds (j = 7.2) to keep text fully visible.
Supported seamless static colors and prefers-color-scheme auto-theme variable injections (var(--cp-text)).
Included comprehensive test coverage under lib/svg/generator.test.ts.

Pillar

🎨 Pillar 1 — New Theme Design
📐 Pillar 2 — Geometric SVG Improvement
⚙️ Pillar 3 — Timezone Logic Optimization
🛠️ Other (Bug fix, refactoring, docs)

Visual Preview

(Rendered optional text labels below the front edge and Mon/Wed/Fri tags flat along the left edge when labels=true is requested)

Checklist before requesting a review:

I have read the CONTRIBUTING.md file.
I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
I have updated README.md if I added a new theme or URL parameter.
I have starred the repo.
I have made sure that I have only one commit to merge in this PR.
The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts).
(Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

vercel · 2026-05-27T19:13:05Z

@Sahitya3105 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-05-27T19:13:10Z

👋 Hey @Sahitya3105, welcome to CommitPulse! 🎉

Thanks for opening your first pull request — this is a big deal and we appreciate the effort!

While you wait for a review, please double-check:

✅ You've read the CONTRIBUTING.md checklist
✅ npm run lint, npm run format, and npm run test all pass locally
✅ Your PR has a visual preview if it touches any SVG output
💬 You've joined our Discord for faster PR feedback

A maintainer will review your PR shortly. Hang tight! 🚀

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds optional month/weekday “isometric” labels to the streak SVG, with an API/query parameter to enable them and a customizable label color.

Changes:

Extend BadgeParams with labels and labelColor
Parse/validate labels + labelColor for the streak API route
Render SVG labels (static + auto-theme) and add generator tests

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
types/index.ts	Adds new badge parameters for enabling labels and customizing label color
lib/validations.ts	Parses `labels` and sanitizes `labelColor` from query params
lib/svg/generator.ts	Implements label rendering and hooks it into both SVG modes
lib/svg/generator.test.ts	Adds tests for label rendering + color behavior
app/api/streak/route.ts	Wires parsed params into the SVG generation request flow

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    const tx = s(300 + (label.col - 7.2) * 16 + 8);
+    const ty = s(120 + (label.col + 7.2) * 9 + 20) + Math.round(20 * sf);


+    const tx = s(300 + (-1.2 - day.row) * 16);
+    const ty = s(120 + (-1.2 + day.row) * 9 + 20) + Math.round(20 * sf);


+    const tx = s(300 + (label.col - 7.2) * 16 + 8);
+    const ty = s(120 + (label.col + 7.2) * 9 + 20) + Math.round(20 * sf);
+    elements += `
+    <text x="${tx}" y="${ty}" text-anchor="middle" fill="${labelColorHex}" fill-opacity="0.6" font-family="&quot;Roboto&quot;, sans-serif" font-size="${Math.round(10 * sf)}px" font-weight="400" letter-spacing="1px">${label.text}</text>`;


+    const tx = s(300 + (-1.2 - day.row) * 16);
+    const ty = s(120 + (-1.2 + day.row) * 9 + 20) + Math.round(20 * sf);
+    elements += `
+    <text x="${tx}" y="${ty}" text-anchor="end" fill="${labelColorHex}" fill-opacity="0.6" font-family="&quot;Roboto&quot;, sans-serif" font-size="${Math.round(10 * sf)}px" font-weight="400" letter-spacing="1px">${day.text}</text>`;


+    it('does not render labels when labels parameter is absent or false', () => {
+      const svg = generateSVG(
+        mockStats,
+        { user: 'avi', labels: false } as unknown as BadgeParams,
+        mockCalendar
+      );
+      expect(svg).not.toContain('class="isometric-labels"');
+    });


JhaSourav07 · 2026-05-27T19:59:46Z

@Sahitya3105

Attach visual preview
video or screenshot for review

Sahitya3105 · 2026-05-27T20:29:15Z

@Sahitya3105

Attach visual preview video or screenshot for review

This is a backend SVG generation feature — the output is an API response. To preview it locally, run npm run dev and visit:

localhost:3000/api/streak?user=YOUR_USERNAME&labels=true for Issue #792
I was unable to attach a screenshot as I don't have a live GitHub token configured locally to fetch real contribution data for the SVG render. Happy to add one if you can share a test token or suggest a mock approach.

JhaSourav07 · 2026-05-27T20:38:41Z

@Sahitya3105

you can generate you own token from developer setting ?

github-actions · 2026-05-28T04:04:57Z

⚠️ Hey @Sahitya3105, this PR has merge conflicts with the main branch.

Please pull the latest changes and resolve the conflicts so we can review it!

git fetch origin
git rebase origin/main
# resolve any conflicts, then:
git push --force-with-lease

Once resolved, the needs-rebase label will be removed automatically on the next check. 🙌

github-actions · 2026-05-28T05:49:55Z

⚠️ Hey @Sahitya3105, this PR has merge conflicts with the main branch.

Please pull the latest changes and resolve the conflicts so we can review it!

git fetch origin
git rebase origin/main
# resolve any conflicts, then:
git push --force-with-lease

Once resolved, the needs-rebase label will be removed automatically on the next check. 🙌

Sahitya3105 · 2026-05-28T08:33:27Z

@JhaSourav07 conflicts removes and preview images added

feat: add optional 3D isometric month headers and weekday labels

54bd96d

Copilot AI review requested due to automatic review settings May 27, 2026 19:13

Copilot AI reviewed May 27, 2026

View reviewed changes

refactor: address Copilot PR review suggestions for layout and styling

1633811

github-actions Bot added the type:feature New features, additions, or enhancements label May 27, 2026

github-actions Bot added the needs-rebase This PR has merge conflicts and needs a rebase. label May 28, 2026

chore: merge upstream/main and resolve types/index.ts conflict

33d14b1

github-actions Bot removed the needs-rebase This PR has merge conflicts and needs a rebase. label May 28, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add optional 3D isometric month headers and weekday labels#800

feat: add optional 3D isometric month headers and weekday labels#800
Sahitya3105 wants to merge 3 commits into
JhaSourav07:mainfrom
Sahitya3105:main

Sahitya3105 commented May 27, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 27, 2026

Uh oh!

github-actions Bot commented May 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

JhaSourav07 commented May 27, 2026

Uh oh!

Sahitya3105 commented May 27, 2026

Uh oh!

JhaSourav07 commented May 27, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

Sahitya3105 commented May 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const tx = s(300 + (label.col - 7.2) * 16 + 8);
		const ty = s(120 + (label.col + 7.2) * 9 + 20) + Math.round(20 * sf);

		const tx = s(300 + (-1.2 - day.row) * 16);
		const ty = s(120 + (-1.2 + day.row) * 9 + 20) + Math.round(20 * sf);

Conversation

Sahitya3105 commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Pillar

Visual Preview

Checklist before requesting a review:

Uh oh!

vercel Bot commented May 27, 2026

Uh oh!

github-actions Bot commented May 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

JhaSourav07 commented May 27, 2026

Uh oh!

Sahitya3105 commented May 27, 2026

Uh oh!

JhaSourav07 commented May 27, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

Sahitya3105 commented May 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Sahitya3105 commented May 27, 2026 •

edited

Loading