Skip to content

Commit 1c86d66

Browse files
Pranav-IIITMPranav-IIITM
committed
fix(svg): pulse today's tile even when commit count is zero
1 parent 4538996 commit 1c86d66

4 files changed

Lines changed: 86 additions & 16 deletions

File tree

‎lib/svg/generator.test.ts‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -633,8 +633,8 @@ describe('generateSVG', () => {
633633
expect(svg).toContain('attributeName="opacity" values="1;0.4;1"');
634634
});
635635

636-
it('does not pulse when todayDate has no commits even if another day does', () => {
637-
// todayDate = '2024-06-13' (0 commits) — no pulse
636+
it('pulses even when todayDate has no commits', () => {
637+
// todayDate = '2024-06-13' (0 commits) — should pulse under new design requirements
638638
const stats: StreakStats = {
639639
currentStreak: 0,
640640
longestStreak: 2,
@@ -644,7 +644,26 @@ describe('generateSVG', () => {
644644

645645
const svg = generateSVG(stats, { user: 'avi' } as unknown as BadgeParams, calendar);
646646

647-
expect(svg).not.toContain('attributeName="opacity" values="1;0.4;1"');
647+
expect(svg).toContain('attributeName="opacity" values="1;0.4;1"');
648+
});
649+
650+
it("applies a prominent top-face accent stroke highlight to today's zero-commit tile", () => {
651+
const stats: StreakStats = {
652+
currentStreak: 0,
653+
longestStreak: 2,
654+
totalContributions: 10,
655+
todayDate: '2024-06-13',
656+
};
657+
658+
const svg = generateSVG(
659+
stats,
660+
{ user: 'avi', accent: '00ffaa' } as unknown as BadgeParams,
661+
calendar
662+
);
663+
664+
// Verify today's zero-commit tile has the correct top-face stroke highlight
665+
// For static theme, todayStrokeColor is resolved to accentColorHex ('#00ffaa')
666+
expect(svg).toContain('stroke="#00ffaa" stroke-opacity="0.8" stroke-width="1.2"');
648667
});
649668
it('includes accessible title and description metadata', () => {
650669
const svg = generateSVG(

‎lib/svg/generator.ts‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -291,16 +291,30 @@ function renderTowers(
291291
const strokeAttr = isGhost
292292
? `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`
293293
: '';
294+
295+
let leftStrokeAttr = strokeAttr;
296+
let rightStrokeAttr = strokeAttr;
297+
let topStrokeAttr = strokeAttr;
298+
299+
if (t.isToday && t.contributionCount === 0) {
300+
const todayStrokeColor = isAutoTheme ? 'var(--cp-accent)' : strokeColor;
301+
leftStrokeAttr = isGhost
302+
? `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`
303+
: '';
304+
rightStrokeAttr = leftStrokeAttr;
305+
topStrokeAttr = `stroke="${todayStrokeColor}" stroke-opacity="0.8" stroke-width="${1.2 * sf}"`;
306+
}
307+
294308
const delay = ((t.row + t.col) * 0.015).toFixed(3);
295309

296310
towers += `
297311
<g transform="translate(${t.x}, ${t.y})">
298312
<g class="cp-tower" style="animation-delay: ${delay}s;">
299-
${t.isTodayWithCommits ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
313+
${t.isToday ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
300314
<title>${escapeXML(t.tooltip)}</title>
301-
<path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" ${leftFillAttr} fill-opacity="${leftFaceOpacity}" ${strokeAttr} />
302-
<path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" ${rightFillAttr} fill-opacity="${rightFaceOpacity}" ${strokeAttr} />
303-
<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" ${finalTopFillAttr} fill-opacity="${topFaceOpacity}" ${strokeAttr} />
315+
<path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" ${leftFillAttr} fill-opacity="${leftFaceOpacity}" ${leftStrokeAttr} />
316+
<path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" ${rightFillAttr} fill-opacity="${rightFaceOpacity}" ${rightStrokeAttr} />
317+
<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" ${finalTopFillAttr} fill-opacity="${topFaceOpacity}" ${topStrokeAttr} />
304318
${t.contributionCount > 5 ? `<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" fill="white" fill-opacity="0.2" />` : ''}
305319
</g>
306320
</g>`;
@@ -1101,14 +1115,27 @@ function generateAutoThemeVersusSVG(
11011115
const fillClass = t.isGhost ? 'cp-text-fill' : 'cp-accent-fill';
11021116
const strokeColor = t.isGhost ? 'var(--cp-text)' : 'var(--cp-accent)';
11031117
const delay = ((t.row + t.col) * 0.015).toFixed(3);
1118+
1119+
let leftStrokeAttr = `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`;
1120+
let rightStrokeAttr = leftStrokeAttr;
1121+
let topStrokeAttr = leftStrokeAttr;
1122+
1123+
if (t.isToday && t.contributionCount === 0) {
1124+
leftStrokeAttr = t.isGhost
1125+
? `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`
1126+
: '';
1127+
rightStrokeAttr = leftStrokeAttr;
1128+
topStrokeAttr = `stroke="var(--cp-accent)" stroke-opacity="0.8" stroke-width="${1.2 * sf}"`;
1129+
}
1130+
11041131
towers1 += `
11051132
<g transform="translate(${t.x}, ${t.y})">
11061133
<g class="cp-tower" style="animation-delay: ${delay}s;">
1107-
${t.isTodayWithCommits ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
1134+
${t.isToday ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
11081135
<title>${escapeXML(t.tooltip)}</title>
1109-
<path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.left}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
1110-
<path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.right}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
1111-
<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.top}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
1136+
<path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.left}" ${leftStrokeAttr} />
1137+
<path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.right}" ${rightStrokeAttr} />
1138+
<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.top}" ${topStrokeAttr} />
11121139
${t.contributionCount > 5 ? `<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" fill="white" fill-opacity="0.2" />` : ''}
11131140
</g>
11141141
</g>`;
@@ -1121,14 +1148,27 @@ function generateAutoThemeVersusSVG(
11211148
const fillClass = t.isGhost ? 'cp-text-fill' : 'cp-accent-fill';
11221149
const strokeColor = t.isGhost ? 'var(--cp-text)' : 'var(--cp-accent)';
11231150
const delay = ((t.row + t.col) * 0.015).toFixed(3);
1151+
1152+
let leftStrokeAttr = `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`;
1153+
let rightStrokeAttr = leftStrokeAttr;
1154+
let topStrokeAttr = leftStrokeAttr;
1155+
1156+
if (t.isToday && t.contributionCount === 0) {
1157+
leftStrokeAttr = t.isGhost
1158+
? `stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}"`
1159+
: '';
1160+
rightStrokeAttr = leftStrokeAttr;
1161+
topStrokeAttr = `stroke="var(--cp-accent)" stroke-opacity="0.8" stroke-width="${1.2 * sf}"`;
1162+
}
1163+
11241164
towers2 += `
11251165
<g transform="translate(${t.x}, ${t.y})">
11261166
<g class="cp-tower" style="animation-delay: ${delay}s;">
1127-
${t.isTodayWithCommits ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
1167+
${t.isToday ? '<animate attributeName="opacity" values="1;0.4;1" dur="1.5s" repeatCount="indefinite" />' : ''}
11281168
<title>${escapeXML(t.tooltip)}</title>
1129-
<path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.left}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
1130-
<path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.right}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
1131-
<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.top}" stroke="${strokeColor}" stroke-opacity="${t.strokeOpacity}" stroke-width="${t.strokeWidth}" />
1169+
<path d="M0 ${10 - t.h} L0 10 L-16 0 L-16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.left}" ${leftStrokeAttr} />
1170+
<path d="M0 ${10 - t.h} L0 10 L16 0 L16 ${-t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.right}" ${rightStrokeAttr} />
1171+
<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" class="${fillClass}" fill-opacity="${t.faceOpacity.top}" ${topStrokeAttr} />
11321172
${t.contributionCount > 5 ? `<path d="M0 ${-t.h} L16 ${10 - t.h} L0 ${20 - t.h} L-16 ${10 - t.h} Z" fill="white" fill-opacity="0.2" />` : ''}
11331173
</g>
11341174
</g>`;

‎lib/svg/layout.test.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ describe('computeTowers edge cases', () => {
2020
expect(towers[0].isTodayWithCommits).toBe(true);
2121
});
2222

23+
it('adds TODAY prefix for today tower without commits', () => {
24+
const calendar = {
25+
totalContributions: 0,
26+
weeks: [{ contributionDays: [{ contributionCount: 0, date: '2024-06-12' }] }],
27+
} as unknown as ContributionCalendar;
28+
const towers = computeTowers(calendar, 'linear', '2024-06-12');
29+
expect(towers[0].tooltip).toContain('TODAY:');
30+
expect(towers[0].isToday).toBe(true);
31+
expect(towers[0].isTodayWithCommits).toBe(false);
32+
});
33+
2334
it('does not add TODAY prefix for non-today tower', () => {
2435
const calendar = {
2536
totalContributions: 0,

‎lib/svg/layout.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export function computeTowers(
118118
const isTodayWithCommits = isToday && hasCommits;
119119

120120
const unit = mode === 'loc' ? 'lines of code' : 'contributions';
121-
const tooltip = isTodayWithCommits
121+
const tooltip = isToday
122122
? `TODAY: ${day.date}: ${count} ${unit}`
123123
: `${day.date}: ${count} ${unit}`;
124124

0 commit comments

Comments
 (0)