feat: add new font options (mono, elegant, minimal, retro) - closes #4

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+
+ -Raw) -replace

THEMES.md

@@ -4,7 +4,7 @@ This gallery showcases all available themes for the CommitPulse streak card.
 
 ---
 
-## 🌑 Neon
+## 🌌 Neon
 
 ![Neon](assets/themes/neon.png)
 
@@ -28,7 +28,7 @@ Usage: `/api/streak?user=yourusername&theme=dark`
 
 ---
 
-## 🤍 Light
+## 🌕 Light
 
 ![Light](assets/themes/light.png)
 
@@ -68,7 +68,7 @@ Usage: `/api/streak?user=yourusername&theme=forest`
 
 ---
 
-## 🌹 Rose
+## 🌸 Rose
 
 ![Rose](assets/themes/rose.png)
 
@@ -81,3 +81,4 @@ Usage: `/api/streak?user=yourusername&theme=rose`
 ![Nord](assets/themes/nord.png)
 
 Usage: `/api/streak?user=yourusername&theme=nord`
+'@

app/customize/page.tsx

@@ -1,11 +1,13 @@
-'use client';
+'use client';
 
 import { useState, useCallback } from 'react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { themes } from '../../lib/svg/themes';
+import { FONT_OPTIONS } from '../../lib/svg/generator';
+const FONT_KEYS = Object.keys(FONT_OPTIONS);
 
-// ─── Types ────────────────────────────────────────────────────────────────────
+// ─── Types ────────────────────────────────────────────────────────────────────
 
 type Scale = 'linear' | 'log';
 
@@ -19,13 +21,13 @@ const SPEEDS = [
   { value: '20s', label: 'Ultra-slow (20s)' },
 ] as const;
 
-// ─── Helpers ──────────────────────────────────────────────────────────────────
+// ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function stripHash(val: string) {
   return val.replace(/^#/, '');
 }
 
-// ─── Sub-components ───────────────────────────────────────────────────────────
+// ─── Sub-components ───────────────────────────────────────────────────────────
 
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
@@ -89,7 +91,7 @@ function HexInput({
     <div className="flex flex-col gap-1.5">
       <SectionLabel>{label}</SectionLabel>
       <div className="relative flex items-center gap-2">
-        {/* ── Color picker trigger ── */}
+        {/* ── Color picker trigger ── */}
         <label
           htmlFor={`${id}-picker`}
           title="Open color picker"
@@ -116,7 +118,7 @@ function HexInput({
           />
         </label>
 
-        {/* ── Text input ── */}
+        {/* ── Text input ── */}
         <div className="relative flex-1 flex items-center">
           <span className="absolute left-3 text-white/30 text-sm select-none pointer-events-none">
             #
@@ -136,7 +138,7 @@ function HexInput({
   );
 }
 
-// ─── Main Page ────────────────────────────────────────────────────────────────
+// ─── Main Page ────────────────────────────────────────────────────────────────
 
 export default function CustomizePage() {
   const [username, setUsername] = useState('jhasourav07');
@@ -146,9 +148,10 @@ export default function CustomizePage() {
   const [textHex, setTextHex] = useState('');
   const [scale, setScale] = useState<Scale>('linear');
   const [speed, setSpeed] = useState('8s');
+  const [font, setFont] = useState('default');
   const [copied, setCopied] = useState(false);
 
-  // ── buildQueryParams ──────────────────────────────────────────────────────
+  // ── buildQueryParams ──────────────────────────────────────────────────────
 
   const buildQueryParams = useCallback(() => {
     const params = new URLSearchParams();
@@ -167,9 +170,10 @@ export default function CustomizePage() {
 
     if (scale !== 'linear') params.set('scale', scale);
     if (speed !== '8s') params.set('speed', speed);
+    if (font !== 'default') params.set('font', font);
 
     return params.toString();
-  }, [username, theme, bgHex, accentHex, textHex, scale, speed]);
+  }, [username, theme, bgHex, accentHex, textHex, scale, speed, font]);
 
   const queryString = buildQueryParams();
   const previewSrc = `/api/streak?${queryString}`;
@@ -191,7 +195,7 @@ export default function CustomizePage() {
       </div>
 
       <div className="relative z-10 max-w-[1400px] mx-auto px-6 py-8">
-        {/* ── Top Bar ───────────────────────────────────────────────────────── */}
+        {/* ── Top Bar ───────────────────────────────────────────────────────── */}
         <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
@@ -228,7 +232,7 @@ export default function CustomizePage() {
           </div>
         </motion.div>
 
-        {/* ── Page heading ─────────────────────────────────────────────────── */}
+        {/* ── Page heading ─────────────────────────────────────────────────── */}
         <motion.div
           initial={{ opacity: 0, y: 16 }}
           animate={{ opacity: 1, y: 0 }}
@@ -240,13 +244,13 @@ export default function CustomizePage() {
           </h1>
           <p className="text-gray-500 text-sm max-w-xl">
             Every change below updates the preview in real-time. Copy the Markdown snippet when
-            you&apos;re done — no extra steps required.
+            you&apos;re done — no extra steps required.
           </p>
         </motion.div>
 
-        {/* ── Split layout ─────────────────────────────────────────────────── */}
+        {/* ── Split layout ─────────────────────────────────────────────────── */}
         <div className="grid lg:grid-cols-[380px_1fr] gap-6 items-start">
-          {/* ════ LEFT: Control Panel ════════════════════════════════════════ */}
+          {/* ════ LEFT: Control Panel ════════════════════════════════════════ */}
           <motion.aside
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
@@ -284,7 +288,7 @@ export default function CustomizePage() {
                         </option>
                       ))}
                     </StyledSelect>
-                    {/* Theme color swatches — driven from the imported themes object */}
+                    {/* Theme color swatches — driven from the imported themes object */}
                     <div className="mt-2 flex gap-1.5">
                       {(['bg', 'accent', 'text'] as const).map((prop) => {
                         const color = themes[theme]?.[prop];
@@ -298,7 +302,7 @@ export default function CustomizePage() {
                         ) : null;
                       })}
                       <span className="text-[11px] text-white/25 ml-1 self-center">
-                        bg · accent · text
+                        bg · accent · text
                       </span>
                     </div>
                   </div>
@@ -347,7 +351,7 @@ export default function CustomizePage() {
                       }}
                       className="mt-3 text-[11px] text-red-400/60 hover:text-red-400 transition-colors"
                     >
-                      ✕ Clear overrides
+                      ✕ Clear overrides
                     </button>
                   )}
                 </div>
@@ -375,10 +379,25 @@ export default function CustomizePage() {
                   </div>
                   <p className="text-[11px] text-white/25 mt-1.5 leading-relaxed">
                     {scale === 'log'
-                      ? 'Log mode compresses extreme outliers — great for power committers.'
+                      ? 'Log mode compresses extreme outliers — great for power committers.'
                       : 'Linear mode shows raw commit counts as tower heights.'}
                   </p>
                 </ControlRow>
+                {/* Font Style */}
+                <ControlRow label="Font Style">
+                  <div className="relative">
+                    <StyledSelect id="font-select" value={font} onChange={setFont}>
+                      {FONT_KEYS.map((k) => (
+                        <option key={k} value={k}>
+                          {FONT_OPTIONS[k].title}
+                        </option>
+                      ))}
+                    </StyledSelect>
+                  </div>
+                </ControlRow>
+
+                {/* Divider */}
+                <div className="h-px bg-white/5" />
 
                 {/* Scan speed */}
                 <ControlRow label="Radar Scan Speed">
@@ -396,7 +415,7 @@ export default function CustomizePage() {
             </div>
           </motion.aside>
 
-          {/* ════ RIGHT: Preview + Export ════════════════════════════════════ */}
+          {/* ════ RIGHT: Preview + Export ════════════════════════════════════ */}
           <motion.div
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
@@ -430,7 +449,7 @@ export default function CustomizePage() {
               </div>
 
               <p className="mt-3 text-[11px] text-white/20 text-center">
-                Preview updates on every change · Hosted badge is cached at UTC midnight
+                Preview updates on every change · Hosted badge is cached at UTC midnight
               </p>
             </div>
 
@@ -496,8 +515,8 @@ export default function CustomizePage() {
 
               <p className="mt-4 text-[11px] text-white/20 leading-relaxed">
                 Paste this into your GitHub profile&apos;s{' '}
-                <code className="text-white/35">README.md</code> — the badge renders server-side, no
-                script required.
+                <code className="text-white/35">README.md</code> — the badge renders server-side,
+                no script required.
               </p>
             </div>