Feature: Custom Color Palette Picker for SVGs

app/api/leetcode/route.test.ts

@@ -0,0 +1,85 @@
+import { GET } from './route';
+import * as api from '@/services/leetcode/api';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+vi.mock('@/services/leetcode/api', () => ({
+  getLeetCodeStats: vi.fn(),
+}));
+
+describe('GET /api/leetcode', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns 400 for missing username parameter', async () => {
+    const req = new Request('http://localhost/api/leetcode');
+    const res = await GET(req);
+
+    expect(res.status).toBe(400);
+    expect(res.headers.get('Content-Type')).toContain('image/svg+xml');
+
+    const text = await res.text();
+    expect(text).toContain('Username is required');
+  });
+
+  it('returns 400 for invalid bg color parameter', async () => {
+    const req = new Request('http://localhost/api/leetcode?username=user&bg=invalid');
+    const res = await GET(req);
+
+    expect(res.status).toBe(400);
+    expect(res.headers.get('Content-Type')).toContain('image/svg+xml');
+
+    const text = await res.text();
+    expect(text).toContain('bg must be a valid hex color');
+  });
+
+  it('returns 200 SVG with valid user stats', async () => {
+    vi.mocked(api.getLeetCodeStats).mockResolvedValue({
+      username: 'leetcode_dev',
+      totalSolved: 300,
+      easySolved: 100,
+      mediumSolved: 150,
+      hardSolved: 50,
+      ranking: 5000,
+    });
+
+    const req = new Request('http://localhost/api/leetcode?username=leetcode_dev&theme=dark');
+    const res = await GET(req);
+
+    expect(res.status).toBe(200);
+    expect(res.headers.get('Content-Type')).toBe('image/svg+xml; charset=utf-8');
+
+    const text = await res.text();
+    expect(text).toContain("leetcode_dev's LeetCode Stats");
+    expect(text).toContain('Rank #5,000');
+    expect(text).toContain('300');
+  });
+
+  it('returns 304 if ETag matches', async () => {
+    vi.mocked(api.getLeetCodeStats).mockResolvedValue({
+      username: 'leetcode_dev',
+      totalSolved: 300,
+      easySolved: 100,
+      mediumSolved: 150,
+      hardSolved: 50,
+      ranking: 5000,
+    });
+
+    const req1 = new Request('http://localhost/api/leetcode?username=leetcode_dev');
+    const res1 = await GET(req1);
+    const etag = res1.headers.get('ETag');
+    expect(etag).toBeTruthy();
+
+    const req2 = new Request('http://localhost/api/leetcode?username=leetcode_dev', {
+      headers: {
+        'If-None-Match': etag as string,
+      },
+    });
+    const res2 = await GET(req2);
+    expect(res2.status).toBe(304);
+  });
+});

app/api/leetcode/route.ts

@@ -0,0 +1,83 @@
+import { NextResponse } from 'next/server';
+import { getLeetCodeStats } from '@/services/leetcode/api';
+import { generateLeetCodeSVG } from '@/lib/svg/leetcode';
+import { buildInlineErrorSVG } from '@/lib/svg/generator';
+import { resolveErrorTheme } from '@/lib/svg/themes';
+import { leetcodeParamsSchema, coerceQueryParams } from '@/lib/validations';
+import { optimizeSVG } from '@/lib/svg/optimizer';
+import crypto from 'crypto';
+
+const SVG_CSP_HEADER =
+  "default-src 'none'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; connect-src https://fonts.gstatic.com; img-src data:;";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const parseResult = leetcodeParamsSchema.safeParse(coerceQueryParams(searchParams));
+
+  if (!parseResult.success) {
+    const fieldErrors = parseResult.error.flatten();
+    const firstError =
+      Object.values(fieldErrors.fieldErrors).flat()[0] ??
+      fieldErrors.formErrors[0] ??
+      'Invalid parameters';
+
+    const errTheme = resolveErrorTheme(searchParams);
+    const errorSvg = buildInlineErrorSVG(firstError, {
+      bg: errTheme.bg,
+      accent: errTheme.accent,
+      text: errTheme.text,
+      radius: errTheme.radius,
+    });
+
+    return new NextResponse(errorSvg, {
+      status: 400,
+      headers: {
+        'Content-Type': 'image/svg+xml',
+        'Cache-Control': 'no-store',
+        'Content-Security-Policy': SVG_CSP_HEADER,
+      },
+    });
+  }
+
+  const params = parseResult.data;
+
+  const stats = await getLeetCodeStats(params.username);
+
+  let svg = generateLeetCodeSVG(stats, params);
+
+  if (params.minify) {
+    svg = optimizeSVG(svg);
+  }
+
+  const isRefreshRequested = params.refresh || params.bypassCache;
+  const cacheControl = isRefreshRequested
+    ? 'no-cache, no-store, must-revalidate'
+    : 'public, max-age=30, s-maxage=30, stale-while-revalidate=30';
+
+  const etag = crypto.createHash('sha256').update(svg).digest('hex');
+  const weakEtag = `W/"${etag}"`;
+  const ifNoneMatch = request.headers.get('if-none-match');
+
+  if (ifNoneMatch) {
+    const etags = ifNoneMatch.split(',').map((e) => e.trim());
+    if (etags.includes(weakEtag) || etags.includes(`"${etag}"`)) {
+      return new NextResponse(null, {
+        status: 304,
+        headers: {
+          'Cache-Control': cacheControl,
+          ETag: weakEtag,
+        },
+      });
+    }
+  }
+
+  return new NextResponse(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml; charset=utf-8',
+      'Cache-Control': cacheControl,
+      'Content-Security-Policy': SVG_CSP_HEADER,
+      ETag: weakEtag,
+    },
+  });
+}

app/contact/page.test.tsx

@@ -10,7 +10,6 @@ import ContactPage from './page';
 vi.mock('framer-motion', () => ({
   AnimatePresence: ({ children }: { children: ReactNode }) => <>{children}</>,
   motion: {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     div: ({
       children,
       initial,
@@ -24,7 +23,7 @@ vi.mock('framer-motion', () => ({
     }: React.HTMLAttributes<HTMLDivElement> & Record<string, unknown>) => (
       <div {...props}>{children}</div>
     ),
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     form: ({
       children,
       onSubmit,
@@ -38,7 +37,7 @@ vi.mock('framer-motion', () => ({
         {children}
       </form>
     ),
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     p: ({
       children,
       initial,
@@ -49,7 +48,7 @@ vi.mock('framer-motion', () => ({
     }: React.HTMLAttributes<HTMLParagraphElement> & Record<string, unknown>) => (
       <p {...props}>{children}</p>
     ),
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     button: ({
       children,
       whileTap,

app/generator/GeneratorClient.tsx

@@ -32,6 +32,10 @@ const INITIAL_STATE: GeneratorState = {
   showArticles: false,
   articlesPlatform: 'devto',
   articlesUsername: '',
+  themeBg: '',
+  themeText: '',
+  themeBorder: '',
+  themeIcon: '',
   showHeroImage: false,
   heroImageUrl: '',
   heroImageWidth: '450',
@@ -136,6 +140,10 @@ export function GeneratorClient() {
           onShowArticlesChange={(v) => setState((s) => ({ ...s, showArticles: v }))}
           onArticlesPlatformChange={(v) => setState((s) => ({ ...s, articlesPlatform: v }))}
           onArticlesUsernameChange={(v) => setState((s) => ({ ...s, articlesUsername: v }))}
+          onThemeBgChange={(v) => setState((s) => ({ ...s, themeBg: v }))}
+          onThemeTextChange={(v) => setState((s) => ({ ...s, themeText: v }))}
+          onThemeBorderChange={(v) => setState((s) => ({ ...s, themeBorder: v }))}
+          onThemeIconChange={(v) => setState((s) => ({ ...s, themeIcon: v }))}
           onApplyImport={handleApplyImport}
           onApplyPreset={handleApplyPreset}
         />

app/generator/components/EditorPanel.tsx

@@ -11,6 +11,7 @@ import { CommitPulseSection } from './sections/CommitPulseSection';
 import { RepoSpotlightSection } from './sections/RepoSpotlightSection';
 import { ContributionGraphSection } from './sections/ContributionGraphSection';
 import { ArticlesSection } from './sections/ArticlesSection';
+import { ThemeSection } from './sections/ThemeSection';
 import { GitHubImportModal } from './GitHubImportModal';
 import { FaGithub } from 'react-icons/fa';
 import { PROFILE_PRESETS } from '../data/presets';
@@ -48,6 +49,10 @@ export interface EditorPanelProps {
   onShowArticlesChange?: (v: boolean) => void;
   onArticlesPlatformChange?: (v: 'devto' | 'hashnode') => void;
   onArticlesUsernameChange?: (v: string) => void;
+  onThemeBgChange?: (v: string) => void;
+  onThemeTextChange?: (v: string) => void;
+  onThemeBorderChange?: (v: string) => void;
+  onThemeIconChange?: (v: string) => void;
   onApplyImport: (data: ImportedData) => void;
   onApplyPreset?: (presetState: Partial<GeneratorState>) => void;
 }
@@ -78,6 +83,10 @@ export function EditorPanel({
   onShowArticlesChange = () => {},
   onArticlesPlatformChange = () => {},
   onArticlesUsernameChange = () => {},
+  onThemeBgChange = () => {},
+  onThemeTextChange = () => {},
+  onThemeBorderChange = () => {},
+  onThemeIconChange = () => {},
   onApplyImport,
   onApplyPreset,
 }: EditorPanelProps) {
@@ -242,6 +251,22 @@ export function EditorPanel({
           onArticlesUsernameChange('');
         }}
       />
+      <ThemeSection
+        themeBg={state.themeBg}
+        themeText={state.themeText}
+        themeBorder={state.themeBorder}
+        themeIcon={state.themeIcon}
+        onThemeBgChange={onThemeBgChange}
+        onThemeTextChange={onThemeTextChange}
+        onThemeBorderChange={onThemeBorderChange}
+        onThemeIconChange={onThemeIconChange}
+        onReset={() => {
+          onThemeBgChange('');
+          onThemeTextChange('');
+          onThemeBorderChange('');
+          onThemeIconChange('');
+        }}
+      />
     </form>
   );
 }

app/generator/components/EditorPanel.type-compiler.test.tsx

@@ -25,6 +25,10 @@ describe('EditorPanel Type Compiler Validation', () => {
       showArticles?: boolean;
       articlesPlatform?: 'devto' | 'hashnode';
       articlesUsername?: string;
+      themeBg?: string;
+      themeText?: string;
+      themeBorder?: string;
+      themeIcon?: string;
       showHeroImage?: boolean;
       heroImageUrl?: string;
       heroImageWidth?: string;

app/generator/components/sections/ThemeSection.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { SectionCard, FieldLabel } from '../SectionCard';
+
+export interface ThemeSectionProps {
+  themeBg?: string;
+  themeText?: string;
+  themeBorder?: string;
+  themeIcon?: string;
+  onThemeBgChange: (v: string) => void;
+  onThemeTextChange: (v: string) => void;
+  onThemeBorderChange: (v: string) => void;
+  onThemeIconChange: (v: string) => void;
+  onReset?: () => void;
+}
+
+export function ThemeSection({
+  themeBg = '',
+  themeText = '',
+  themeBorder = '',
+  themeIcon = '',
+  onThemeBgChange,
+  onThemeTextChange,
+  onThemeBorderChange,
+  onThemeIconChange,
+  onReset,
+}: ThemeSectionProps) {
+  const renderColorInput = (
+    id: string,
+    label: string,
+    value: string,
+    onChange: (v: string) => void
+  ) => {
+    const isValid = value === '' || /^[0-9a-fA-F]{6}$/.test(value);
+
+    return (
+      <div key={id}>
+        <FieldLabel htmlFor={id}>{label}</FieldLabel>
+        <div className="flex items-center gap-3">
+          <div className="relative flex items-center">
+            <span className="absolute left-3 text-xs text-gray-400 dark:text-white/30 select-none">
+              #
+            </span>
+            <input
+              id={id}
+              type="text"
+              value={value}
+              onChange={(e) => onChange(e.target.value.replace(/^#/, ''))}
+              placeholder="10b981"
+              maxLength={6}
+              spellCheck={false}
+              className="w-32 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 pl-7 pr-3 py-2.5 text-sm font-mono text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-white/25 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500/40 transition-colors"
+            />
+          </div>
+          <div
+            className="w-8 h-8 rounded-lg border border-gray-200 dark:border-white/10 flex-shrink-0 transition-colors"
+            style={{
+              background: isValid && value ? `#${value}` : 'transparent',
+            }}
+          />
+          {value && !isValid && <p className="text-[11px] text-amber-500">Invalid hex</p>}
+          {value && isValid && (
+            <button
+              type="button"
+              onClick={() => onChange('')}
+              className="text-[11px] text-gray-400 dark:text-white/30 hover:text-gray-700 dark:hover:text-white/60 transition-colors"
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const activeCount = [themeBg, themeText, themeBorder, themeIcon].filter(Boolean).length;
+
+  return (
+    <SectionCard
+      title="Custom Color Palette Picker"
+      description="Customize the colors of the generated SVGs"
+      defaultOpen={false}
+      badge={activeCount}
+      onReset={onReset}
+    >
+      <div className="flex flex-col gap-4">
+        {renderColorInput('theme-bg', 'Background Colour (bg)', themeBg, onThemeBgChange)}
+        {renderColorInput('theme-text', 'Text Colour (text)', themeText, onThemeTextChange)}
+        {renderColorInput(
+          'theme-icon',
+          'Icon/Accent Colour (accent)',
+          themeIcon,
+          onThemeIconChange
+        )}
+        {renderColorInput(
+          'theme-border',
+          'Border Colour (border)',
+          themeBorder,
+          onThemeBorderChange
+        )}
+      </div>
+    </SectionCard>
+  );
+}