feat: implement dynamic google font support via URL parameter by Animesh-86 · Pull Request #96 · JhaSourav07/commitpulse

Animesh-86 · 2026-05-15T06:03:13Z

Description

Fixes #81

I have implemented support for dynamic Google Fonts. This allows users to pass any Google Font name via the font URL parameter, which is then dynamically imported into the SVG's style block. It includes proper URL encoding for font names with spaces and a fallback mechanism to maintain existing font support.

Pillar

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

Visual Preview

Cormorant	Caveat	Merriweather

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 started 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).

vercel · 2026-05-15T06:03:17Z

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

A member of the Team first needs to authorize it.

Copilot

Pull request overview

This PR adds support for selecting a Google Font dynamically via the font URL parameter, injecting a corresponding @import into the generated SVG’s <style> and applying the requested font-family.

Changes:

Extend SVG generation to support non-predefined font values by generating a Google Fonts @import and using the font name in font-family.
Update unit tests to cover dynamic font import generation and space-to-+ conversion in font family URLs.
Document the new font URL parameter and add a README example.

Reviewed changes

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

File	Description
README.md	Documents the new `font` parameter and adds an example usage link.
lib/svg/generator.ts	Implements dynamic Google Fonts `@import` and updates font selection logic.
lib/svg/generator.test.ts	Adds test cases for dynamic Google Fonts import behavior.

Comments suppressed due to low confidence (3)

lib/svg/generator.ts:67

params.font is interpolated directly into CSS (font-family: "${params.font}"...) without escaping/validation. A crafted font value containing quotes, semicolons, or </style> can break the style block and potentially inject markup/script into the generated SVG. Please sanitize the font name to an allowed character set (e.g., letters/numbers/spaces/hyphens) and/or escape it before embedding (e.g., build the CSS string literal safely).

  const selectedFont = isPredefinedFont
    ? FONT_MAP[params.font!.toLowerCase()]
    : params.font
      ? `"${params.font}", sans-serif`
      : null;

lib/svg/generator.ts:138

The dynamic Google Fonts @import builds the URL from params.font by only replacing whitespace with +. This doesn’t URL-encode other characters and also doesn’t guard against quote/newline injection into the url('...') token. Please trim() and URL-encode the family value (e.g., via encodeURIComponent and then converting %20 to + if desired), and reject/strip disallowed characters so invalid/malicious font names fall back to the default theme fonts instead of being embedded verbatim.

  const googleFontsImport =
    params.font && !isPredefinedFont
      ? `@import url('https://fonts.googleapis.com/css2?family=${params.font.replace(
          /\s+/g,
          '+'
        )}&amp;display=swap');`
      : '';

lib/svg/generator.ts:67

This change removes the previous “unknown font => default font stack” behavior: any unrecognized font value now becomes a font-family and triggers a Google Fonts import. That doesn’t implement the stated “fallback mechanism” for invalid/unavailable fonts and can change rendering unexpectedly. Consider validating the font name format (and/or keeping a default fallback when the name is invalid) so genuinely invalid inputs don’t alter the SVG’s typography/imports.

  const isPredefinedFont = params.font && FONT_MAP[params.font.toLowerCase()];
  const selectedFont = isPredefinedFont
    ? FONT_MAP[params.font!.toLowerCase()]
    : params.font
      ? `"${params.font}", sans-serif`
      : null;

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

+  const isPredefinedFont = params.font && FONT_MAP[params.font.toLowerCase()];
+  const selectedFont = isPredefinedFont
+    ? FONT_MAP[params.font!.toLowerCase()]


+  it('supports dynamic Google Fonts for non-predefined fonts', () => {
    const svg = generateSVG(
      mockStats,
-      { user: 'avi', font: 'invalidfont' } as unknown as BadgeParams,
+      { user: 'avi', font: 'Inter' } as unknown as BadgeParams,
      mockCalendar
    );
-    expect(svg).toContain('JetBrains Mono');
+
+    expect(svg).toContain('@import url(\'https://fonts.googleapis.com/css2?family=Inter&amp;display=swap\');');
+    expect(svg).toContain('font-family: "Inter", sans-serif;');
+  });


 | `speed`   | `string`  | No         | `8s`          | Radar scan animation duration (e.g. `4s`, `12s`)      |
 | `scale`   | `string`  | No         | `linear`      | Tower height scaling: `linear` or `log` (logarithmic) |
+| `font`    | `string`  | No         | Theme default | Any **Google Font** name (e.g., `Orbitron`, `Inter`)  |
 | `refresh` | `boolean` | No         | `false`       | Bypass cache for real-time data                       |


JhaSourav07 · 2026-05-15T09:07:26Z

@harxhe

Can you review this PR?

harxhe · 2026-05-15T15:02:05Z

+  const sanitizeFont = (name: string) => name.replace(/[^a-zA-Z0-9\s-]/g, '').trim();
+  const sanitizedFont = params.font ? sanitizeFont(params.font) : null;
+
+  const isPredefinedFont = sanitizedFont && FONT_MAP[sanitizedFont.toLowerCase()];


Consider splitting isPredefinedFont into

const predefinedFont = ...; const isPredefinedFont = Boolean(predefinedFont);

for clarity.
Use predefinedFont when building selectedFont.

harxhe · 2026-05-15T15:04:13Z

 | `radius`  | `number`  | No         | `8`           | Border corner radius in pixels                        |
 | `speed`   | `string`  | No         | `8s`          | Radar scan animation duration (e.g. `4s`, `12s`)      |
 | `scale`   | `string`  | No         | `linear`      | Tower height scaling: `linear` or `log` (logarithmic) |
+| `font`    | `string`  | No         | Theme default | Any **Google Font** name (e.g., `Orbitron`, `Inter`)  |


The default should reflect “CommitPulse default typography” rather than “Theme default”, as themes do not set fonts and the actual fallback is hardcoded.

harxhe · 2026-05-15T15:06:10Z

@Animesh-86

Good job adding sanitization! For better safety and clarity, kindly

Ensure truly invalid or empty font names fall back to the default font (not imported or set, just as before).
Clarify the logic by distinguishing between predefinedFont (string or undefined) and isPredefinedFont (boolean).

Also, consider adding a test that confirms malicious font names don’t inject CSS/imports and always use the fallback stack.

I have added some comments in the files, rest all looks good

Animesh-86 · 2026-05-15T15:14:38Z

Hi @harxhe, thank you for the detailed review and the positive feedback on the sanitization!

Those are great suggestions. I will refactor the font detection logic for better clarity, update the README wording to 'CommitPulse default typography', and add a specific test case to verify that invalid/malicious inputs correctly fall back to the default stack without extra imports.

I'll push the updates shortly. Thanks again!

…ated documentation

Animesh-86 · 2026-05-15T16:53:44Z

@Animesh-86

Good job adding sanitization! For better safety and clarity, kindly

Ensure truly invalid or empty font names fall back to the default font (not imported or set, just as before).

Clarify the logic by distinguishing between predefinedFont (string or undefined) and isPredefinedFont (boolean).

Also, consider adding a test that confirms malicious font names don’t inject CSS/imports and always use the fallback stack.

I have added some comments in the files, rest all looks good

Hi @harxhe, I've updated the PR based on your feedback:

Code Logic: Refactored the font detection to separate predefinedFont (lookup) and isPredefinedFont (boolean check) for better clarity.
Robustness: Added a check to ensure that empty or invalid strings (after sanitization) fall back to the default typography without generating extra imports.
Documentation: Updated the README to reflect 'CommitPulse default typography' instead of 'Theme default'.
Testing: Added a new test case in generator.test.ts to verify the fallback behavior for invalid font names and ensure no unsafe @import tags are emitted.

All tests are passing. Thanks for the guidance!

JhaSourav07 · 2026-05-16T01:04:11Z

@Animesh-86

Hey can you fix the merge conflict nicely so I can merge it?

Animesh-86 · 2026-05-16T03:28:26Z

@JhaSourav07 Fixed the merge conflicts and synced everything cleanly with upstream/main. It should be ready to merge now.

harxhe

good to merge

JhaSourav07 · 2026-05-16T08:01:36Z

@Animesh-86

Thanks for the contribution

@harxhe
Thanks for reviewing the PR.

JhaSourav07 · 2026-05-16T21:08:47Z

Thanks for contributing to CommitPulse 🚀

To make collaboration, PR reviews, issue coordination, and future contributions smoother, we highly recommend joining the CommitPulse Discord community:

https://discord.gg/Cb73bS79j

Inside the server you can:
⚡ discuss implementations with contributors
🛠️ get faster support for setup/issues
🔍 request PR reviews easily
🧠 get guidance and mentorship from assigned mentors
🚀 stay updated with active development discussions

Most contributor coordination happens there, so joining will make the contribution experience much smoother 💜

…injection The escapeXML function escaped ampersand, angle brackets, double quotes, and single quotes, but not backticks. Backticks can break out of SVG attributes when interpolated into template literals, enabling layout injection attacks. Add backtick -> &JhaSourav07#96; escaping to close this gap. Fixes JhaSourav07#5264

## What does this PR do? Adds a `CHANGELOG.md` file at the project root to track CommitPulse's feature history and ongoing development milestones. ## Checklist - [x] I have read CONTRIBUTING.md - [x] npm run lint passes - [x] npm run format passes - [x] npm run test passes (22 pre-existing test file failures confirmed present on clean main branch before any changes — all failures are in PNG route worker timeout tests unrelated to this docs-only PR. Verified by running `git stash` + `npm run test` on upstream main.) - [x] No source files modified — docs-only PR (CHANGELOG.md + README.md) ## Files changed - `CHANGELOG.md` — new file following keepachangelog.com/en/1.1.0 format - `README.md` — added changelog badge to the existing badge row ## Evidence for changelog entries All entries are sourced from verifiable repository artifacts: - Ghost City mode, ?grace=, UTC sync — README.md - 20 theme presets — THEMES.md - ?year= — PR #94 - ?font= — PR #96, Issue #81 - ?theme=auto — PR #102, Issue #75 - MongoDB /api/track-user — README architecture table - .env.local.example — repo file tree - No dates or version numbers were invented ## Related issue Closes #5702

…injection The escapeXML function escaped ampersand, angle brackets, double quotes, and single quotes, but not backticks. Backticks can break out of SVG attributes when interpolated into template literals, enabling layout injection attacks. Add backtick -> ` escaping to close this gap. Fixes #5264

…nt SVG injection (#5795) ## Summary The \escapeXML\ function escaped ampersand, angle brackets, double quotes, and single quotes, but not backticks. Backticks can break out of SVG attributes when interpolated into template literals, enabling layout injection attacks. ## Changes - **\lib/svg/generator.ts\**: Added backtick -> \`\ escaping to \escapeXML\. ## Testing - Existing escapeXML tests pass ## Issue Fixes #5264

…rav07#96) feat: support dynamic google fonts with security sanitization and updated documentation

…ourav07#5865) ## What does this PR do? Adds a `CHANGELOG.md` file at the project root to track CommitPulse's feature history and ongoing development milestones. ## Checklist - [x] I have read CONTRIBUTING.md - [x] npm run lint passes - [x] npm run format passes - [x] npm run test passes (22 pre-existing test file failures confirmed present on clean main branch before any changes — all failures are in PNG route worker timeout tests unrelated to this docs-only PR. Verified by running `git stash` + `npm run test` on upstream main.) - [x] No source files modified — docs-only PR (CHANGELOG.md + README.md) ## Files changed - `CHANGELOG.md` — new file following keepachangelog.com/en/1.1.0 format - `README.md` — added changelog badge to the existing badge row ## Evidence for changelog entries All entries are sourced from verifiable repository artifacts: - Ghost City mode, ?grace=, UTC sync — README.md - 20 theme presets — THEMES.md - ?year= — PR JhaSourav07#94 - ?font= — PR JhaSourav07#96, Issue JhaSourav07#81 - ?theme=auto — PR JhaSourav07#102, Issue JhaSourav07#75 - MongoDB /api/track-user — README architecture table - .env.local.example — repo file tree - No dates or version numbers were invented ## Related issue Closes JhaSourav07#5702

…injection The escapeXML function escaped ampersand, angle brackets, double quotes, and single quotes, but not backticks. Backticks can break out of SVG attributes when interpolated into template literals, enabling layout injection attacks. Add backtick -> &JhaSourav07#96; escaping to close this gap. Fixes JhaSourav07#5264

…nt SVG injection (JhaSourav07#5795) ## Summary The \escapeXML\ function escaped ampersand, angle brackets, double quotes, and single quotes, but not backticks. Backticks can break out of SVG attributes when interpolated into template literals, enabling layout injection attacks. ## Changes - **\lib/svg/generator.ts\**: Added backtick -> \&JhaSourav07#96;\ escaping to \escapeXML\. ## Testing - Existing escapeXML tests pass ## Issue Fixes JhaSourav07#5264

Copilot AI review requested due to automatic review settings May 15, 2026 06:03

Copilot started reviewing on behalf of Animesh-86 May 15, 2026 06:03 View session

Copilot AI reviewed May 15, 2026

View reviewed changes

Animesh-86 force-pushed the feature/dynamic-fonts branch from f429275 to b2e00e2 Compare May 15, 2026 06:17

Animesh-86 mentioned this pull request May 15, 2026

[FEATURE] "Ghost City" Mode for Zero Contributions #97

Closed

1 task

JhaSourav07 added GSSoC 2026 level:intermediate Moderate complexity tasks mentor:harxhe labels May 15, 2026

harxhe reviewed May 15, 2026

View reviewed changes

Animesh-86 force-pushed the feature/dynamic-fonts branch from b2e00e2 to 91b8173 Compare May 15, 2026 16:45

feat: support dynamic google fonts with security sanitization and upd…

3351ce6

…ated documentation

Animesh-86 force-pushed the feature/dynamic-fonts branch from 91b8173 to 3351ce6 Compare May 15, 2026 16:45

chore: resolve merge conflicts with upstream/main

87646c0

Animesh-86 force-pushed the feature/dynamic-fonts branch from c36136c to 87646c0 Compare May 16, 2026 03:25

harxhe approved these changes May 16, 2026

View reviewed changes

JhaSourav07 merged commit 4223186 into JhaSourav07:main May 16, 2026
2 of 3 checks passed

JhaSourav07 added the gssoc:approved PR has been reviewed and accepted for valid contribution points label May 16, 2026

JhaSourav07 added this to the GSSoC 2026 milestone May 17, 2026

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

MasterJi27 mentioned this pull request Jun 15, 2026

fix(security): escape backtick character in escapeXML to prevent SVG injection #5795

Merged

PadmakarBagade mentioned this pull request Jun 16, 2026

docs: add CHANGELOG.md following Keep a Changelog format #5865

Merged

5 tasks

JhaSourav07 added gssoc:approved PR has been reviewed and accepted for valid contribution points and removed gssoc:approved PR has been reviewed and accepted for valid contribution points labels Jun 17, 2026

MasterJi27 pushed a commit to MasterJi27/commitpulse that referenced this pull request Jul 4, 2026

feat: implement dynamic google font support via URL parameter (JhaSou…

10ceb6c

…rav07#96) feat: support dynamic google fonts with security sanitization and updated documentation

Conversation

Animesh-86 commented May 15, 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 15, 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 15, 2026

Uh oh!

harxhe May 15, 2026

Choose a reason for hiding this comment

Uh oh!

harxhe May 15, 2026

Choose a reason for hiding this comment

Uh oh!

harxhe commented May 15, 2026

Uh oh!

Animesh-86 commented May 15, 2026

Uh oh!

Animesh-86 commented May 15, 2026

Uh oh!

JhaSourav07 commented May 16, 2026

Uh oh!

Animesh-86 commented May 16, 2026

Uh oh!

harxhe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JhaSourav07 commented May 16, 2026

Uh oh!

JhaSourav07 commented May 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Animesh-86 commented May 15, 2026 •

edited

Loading