fix(generatorConstants): add syncopate and spacegrotesk to FONT_MAP — prevent duplicate Google Fonts @import (JhaSourav07#3142)

## Description

Fixes JhaSourav07#3136

## Pillar

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

## Visual Preview

No SVG visual change — this is a performance/correctness fix. The badge
renders identically before and after. The only difference is the SVG
source no longer contains a duplicate `@import` for Syncopate or Space
Grotesk when those font params are passed.

## 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 server for faster
collaboration, mentorship, and PR support.

Author: JhaSourav07

lib/svg/fonts.ts

@@ -1,9 +1,32 @@
 import { sanitizeFont } from './sanitizer';
 
+/**
+ * Maps lowercase font shorthand keys to their full CSS font-family strings.
+ *
+ * Fonts listed here are treated as "predefined" — the generator resolves them
+ * directly without emitting a second dynamic Google Fonts @import. Only add a
+ * font here if it is ALREADY loaded by the unconditional @import in generator.ts
+ * (Fira Code, JetBrains Mono, Roboto, Syncopate, Space Grotesk).
+ *
+ * Fonts NOT in this map (e.g. "Inter", "Orbitron") correctly fall through to
+ * the dynamic @import path, fetching them from Google Fonts on demand.
+ */
 export const FONT_MAP = {
+  // ── Pre-existing entries ────────────────────────────────────────────────
   jetbrains: '"JetBrains Mono", monospace',
   fira: '"Fira Code", monospace',
   roboto: '"Roboto", sans-serif',
+
+  // ── Previously missing — both fonts are in the unconditional @import ───
+  // Without these entries, passing ?font=syncopate or ?font=spacegrotesk
+  // incorrectly triggers a duplicate dynamic Google Fonts fetch.
+  syncopate: '"Syncopate", sans-serif',
+  spacegrotesk: '"Space Grotesk", sans-serif',
+  'space grotesk': '"Space Grotesk", sans-serif', // handles spaced user input
+
+  // ── Aliases for common variations ───────────────────────────────────────
+  firacode: '"Fira Code", monospace', // alias: fira is the canonical key
+  'jetbrains mono': '"JetBrains Mono", monospace', // handles spaced user input
 } as const;
 
 /**

lib/svg/generator.ts

@@ -20,12 +20,25 @@ import { GRID_ORIGIN_X, GRID_ORIGIN_Y, TILE_HEIGHT_HALF, TILE_WIDTH_HALF } from
 import { SVG_WIDTH, SVG_HEIGHT } from './generatorConstants';
 
 const FONT_MAP = {
-  inter: '"Inter", sans-serif',
-  roboto: '"Roboto", sans-serif',
+  // ── Pre-existing entries ────────────────────────────────────────────────
   jetbrains: '"JetBrains Mono", monospace',
   fira: '"Fira Code", monospace',
+  roboto: '"Roboto", sans-serif',
+
+  // ── Previously missing — both fonts are in the unconditional @import ───
+  // Without these entries, passing ?font=syncopate or ?font=spacegrotesk
+  // incorrectly triggers a duplicate dynamic Google Fonts fetch.
   syncopate: '"Syncopate", sans-serif',
-  space: '"Space Grotesk", sans-serif',
+  spacegrotesk: '"Space Grotesk", sans-serif',
+  'space grotesk': '"Space Grotesk", sans-serif', // handles spaced user input
+
+  // ── Aliases for common variations ───────────────────────────────────────
+  firacode: '"Fira Code", monospace', // alias: fira is the canonical key
+  'jetbrains mono': '"JetBrains Mono", monospace', // handles spaced user input
+
+  // ── Legacy keys for backward compatibility ──────────────────────────────
+  inter: '"Inter", sans-serif',
+  space: '"Space Grotesk", sans-serif', // old key for spacegrotesk
 } as const;
 
 export function resolveFont(sanitizedFont?: string | null): string | null {

lib/svg/generatorConstants.test.ts

@@ -1,6 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import { SVG_WIDTH, SVG_HEIGHT, isFontKey } from './generatorConstants';
 import { FONT_MAP } from './fonts';
+import { generateSVG } from './generator';
+import type { BadgeParams } from '../../types';
 
 describe('generatorConstants', () => {
   it('SVG_WIDTH equals 600', () => {
@@ -39,3 +41,149 @@ describe('generatorConstants', () => {
     expect(isFontKey('')).toBe(false);
   });
 });
+
+describe('FONT_MAP — previously missing bundled font entries', () => {
+  it('contains syncopate — prevents duplicate @import for the design system title font', () => {
+    expect(FONT_MAP).toHaveProperty('syncopate');
+    expect(FONT_MAP['syncopate']).toBe('"Syncopate", sans-serif');
+  });
+
+  it('contains spacegrotesk — prevents duplicate @import for the design system stats font', () => {
+    expect(FONT_MAP).toHaveProperty('spacegrotesk');
+    expect(FONT_MAP['spacegrotesk']).toBe('"Space Grotesk", sans-serif');
+  });
+
+  it('contains space grotesk (with space) — handles user input with a space', () => {
+    expect(FONT_MAP).toHaveProperty('space grotesk');
+    expect(FONT_MAP['space grotesk']).toBe('"Space Grotesk", sans-serif');
+  });
+
+  it('contains firacode alias — handles ?font=firacode as well as ?font=fira', () => {
+    expect(FONT_MAP).toHaveProperty('firacode');
+    expect(FONT_MAP['firacode']).toBe('"Fira Code", monospace');
+  });
+
+  it('syncopate and spacegrotesk map to sans-serif stack — not monospace', () => {
+    expect(FONT_MAP['syncopate']).toContain('sans-serif');
+    expect(FONT_MAP['spacegrotesk']).toContain('sans-serif');
+  });
+});
+
+describe('FONT_MAP — SVG output regression: no duplicate @import for bundled fonts', () => {
+  it('font=syncopate does not generate a dynamic Google Fonts @import', () => {
+    const svg = generateSVG(
+      {
+        currentStreak: 5,
+        longestStreak: 10,
+        totalContributions: 100,
+        todayDate: '2024-06-12',
+      },
+      { user: 'chetan', font: 'syncopate' } as unknown as BadgeParams,
+      {
+        totalContributions: 100,
+        weeks: [
+          {
+            contributionDays: [{ contributionCount: 5, date: '2024-06-12' }],
+          },
+        ],
+      }
+    );
+
+    // Count how many times Syncopate appears in @import statements
+    const importMatches = [...svg.matchAll(/@import url\([^)]*Syncopate[^)]*\)/gi)];
+    // Must appear exactly once (the unconditional bundled import)
+    // Before the fix it appeared twice — this is the regression guard
+    expect(importMatches.length).toBe(1);
+  });
+
+  it('font=spacegrotesk does not generate a dynamic Google Fonts @import', () => {
+    const svg = generateSVG(
+      {
+        currentStreak: 5,
+        longestStreak: 10,
+        totalContributions: 100,
+        todayDate: '2024-06-12',
+      },
+      { user: 'chetan', font: 'spacegrotesk' } as unknown as BadgeParams,
+      {
+        totalContributions: 100,
+        weeks: [
+          {
+            contributionDays: [{ contributionCount: 5, date: '2024-06-12' }],
+          },
+        ],
+      }
+    );
+
+    const importMatches = [...svg.matchAll(/@import url\([^)]*Space\+Grotesk[^)]*\)/gi)];
+    // Must appear exactly once — not twice
+    expect(importMatches.length).toBe(1);
+  });
+
+  it('font=Inter still generates a dynamic @import (non-bundled font — correct behavior)', () => {
+    const svg = generateSVG(
+      {
+        currentStreak: 5,
+        longestStreak: 10,
+        totalContributions: 100,
+        todayDate: '2024-06-12',
+      },
+      { user: 'chetan', font: 'Inter' } as unknown as BadgeParams,
+      {
+        totalContributions: 100,
+        weeks: [
+          {
+            contributionDays: [{ contributionCount: 5, date: '2024-06-12' }],
+          },
+        ],
+      }
+    );
+
+    // Inter is NOT in the unconditional @import — dynamic fetch is correct here
+    expect(svg).toContain('family=Inter');
+  });
+
+  it('font=syncopate resolves to Syncopate CSS font-family in style block', () => {
+    const svg = generateSVG(
+      {
+        currentStreak: 5,
+        longestStreak: 10,
+        totalContributions: 100,
+        todayDate: '2024-06-12',
+      },
+      { user: 'chetan', font: 'syncopate' } as unknown as BadgeParams,
+      {
+        totalContributions: 100,
+        weeks: [
+          {
+            contributionDays: [{ contributionCount: 5, date: '2024-06-12' }],
+          },
+        ],
+      }
+    );
+
+    expect(svg).toContain('font-family: "Syncopate", sans-serif');
+  });
+
+  it('font=spacegrotesk resolves to Space Grotesk CSS font-family in style block', () => {
+    const svg = generateSVG(
+      {
+        currentStreak: 5,
+        longestStreak: 10,
+        totalContributions: 100,
+        todayDate: '2024-06-12',
+      },
+      { user: 'chetan', font: 'spacegrotesk' } as unknown as BadgeParams,
+      {
+        totalContributions: 100,
+        weeks: [
+          {
+            contributionDays: [{ contributionCount: 5, date: '2024-06-12' }],
+          },
+        ],
+      }
+    );
+
+    expect(svg).toContain('font-family: "Space Grotesk", sans-serif');
+  });
+});