Implement badge theming support across the application (#28)

* feat: Implement badge theming support across the application

- 🎨 Added BadgeThemeContext for managing badge themes globally.
- 🖌️ Introduced customizable badge styles and color schemes based on shield.io standards.
- 🔧 Updated MCP, Packages, and Settings components to utilize the new badge theming.
- 📦 Enhanced badge generation functions to accept theme parameters for consistent styling.
- 🖼️ Improved badge previews in the Settings page to reflect selected themes.

* feat: Enhance badge theme settings and styling

- 🎨 Updated badge theme settings to use dropdowns for style and color scheme selection
- 🖌️ Improved layout with grid adjustments for better responsiveness
- 🔍 Added live preview for badge customization options

* feat: Add badge theming support across profile and repository components

- 🎨 Integrate `useBadgeTheme` in Profile and Repository components
- 🛠️ Update badge generation functions to accept theme parameters
- 📄 Enhance badge styles for various platforms based on theme settings

* feat: Update badge styles for consistency

- 🎨 Change badge URLs to use 'flat-square' style for better aesthetics in extension badges
- 🔧 Modify profile badge test to use 'social' style for YouTube subscribers badge
- ✅ Ensure repository badge test includes 'flat-square' style for stars badge

Author: jamesmontemagno

src/BadgeThemeContext.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useState, useEffect } from 'react'
+import type { ReactNode } from 'react'
+import type { BadgeTheme } from './types/badgeTheme'
+import { DEFAULT_BADGE_THEMES } from './types/badgeTheme'
+
+interface BadgeThemeContextType {
+  badgeTheme: BadgeTheme
+  setBadgeTheme: (theme: BadgeTheme) => void
+  updateBadgeTheme: (updates: Partial<BadgeTheme>) => void
+}
+
+const BadgeThemeContext = createContext<BadgeThemeContextType | undefined>(undefined)
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useBadgeTheme() {
+  const context = useContext(BadgeThemeContext)
+  if (context === undefined) {
+    throw new Error('useBadgeTheme must be used within a BadgeThemeProvider')
+  }
+  return context
+}
+
+interface BadgeThemeProviderProps {
+  children: ReactNode
+}
+
+export function BadgeThemeProvider({ children }: BadgeThemeProviderProps) {
+  const [badgeTheme, setBadgeTheme] = useState<BadgeTheme>(() => {
+    const saved = localStorage.getItem('badge-theme-settings')
+    return saved ? JSON.parse(saved) : {
+      style: 'flat-square',
+      colorScheme: 'default',
+      customColors: DEFAULT_BADGE_THEMES.default.customColors,
+      logoColor: 'white',
+      showLogo: true
+    }
+  })
+
+  useEffect(() => {
+    localStorage.setItem('badge-theme-settings', JSON.stringify(badgeTheme))
+  }, [badgeTheme])
+
+  const updateBadgeTheme = (updates: Partial<BadgeTheme>) => {
+    setBadgeTheme(prev => ({ ...prev, ...updates }))
+  }
+
+  return (
+    <BadgeThemeContext.Provider value={{ badgeTheme, setBadgeTheme, updateBadgeTheme }}>
+      {children}
+    </BadgeThemeContext.Provider>
+  )
+}

src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { BadgeThemeProvider } from './BadgeThemeContext'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BadgeThemeProvider>
+      <App />
+    </BadgeThemeProvider>
   </StrictMode>,
 )

src/pages/Extensions.tsx

@@ -5,11 +5,14 @@ import { generateExtensionBadges, parseExtensionInput } from '../utils/extension
 import SearchDropdown from '../components/SearchDropdown'
 import type { SortBy } from '../utils/marketplaceApi'
 import RequestBadge from '../components/RequestBadge'
+import { useBadgeTheme } from '../BadgeThemeContext'
 
 type BadgeVariant = 'stable' | 'insiders' | 'install' | 'rating' | 'installs' | 'downloads' | 'version' | 'lastUpdated' | 'releaseDate' | 'about' | 'all'
 type InputMode = 'manual' | 'search'
 
 function Extensions() {
+  const { badgeTheme } = useBadgeTheme()
+  const [badgeText] = useState(() => localStorage.getItem('readme-default-badge-text') || 'Install in')
   const [inputValue, setInputValue] = useState('')
   const [inputMode, setInputMode] = useState<InputMode>('search')
   const [searchQuery, setSearchQuery] = useState('')
@@ -53,7 +56,7 @@ function Extensions() {
     const parsed = parseExtensionInput(extensionId)
     if (parsed.extensionId) {
       setError(null)
-      setBadgeData(generateExtensionBadges(parsed.extensionId))
+      setBadgeData(generateExtensionBadges(parsed.extensionId, badgeTheme, badgeText))
     }
   }
 
@@ -82,7 +85,7 @@ function Extensions() {
 
     setError(null)
     setInfo(parsed.message ?? null)
-    setBadgeData(generateExtensionBadges(parsed.extensionId))
+    setBadgeData(generateExtensionBadges(parsed.extensionId, badgeTheme, badgeText))
   }
 
   const handleCopy = async (variant: BadgeVariant) => {

src/pages/MCP.tsx

@@ -4,6 +4,14 @@ import MCPSearchDropdown from '../components/MCPSearchDropdown'
 import { parseRuntimeConfig } from '../utils/mcpRegistryApi'
 import type { MCPSearchResult } from '../utils/mcpRegistryApi'
 import RequestBadge from '../components/RequestBadge'
+import { useBadgeTheme } from '../BadgeThemeContext'
+import {
+  generateVSCodeBadge,
+  generateVSCodeInsidersBadge,
+  generateVisualStudioBadge,
+  generateCursorBadge,
+  type ConfigWithInputs
+} from '../utils/mcpBadgeGenerator'
 
 type ConfigType = 'http' | 'docker' | 'local' | 'npx' | 'uvx' | 'dnx';
 
@@ -52,6 +60,7 @@ interface StandaloneInput {
 }
 
 function MCP() {
+  const { badgeTheme } = useBadgeTheme()
   const [serverName, setServerName] = useState('')
   const [configType, setConfigType] = useState<ConfigType>('http')
   const [serverUrl, setServerUrl] = useState('')
@@ -897,62 +906,32 @@ function MCP() {
   const generateMarkdown = (): string => {
     if (!serverName) return '';
 
-    const configForBadge = getConfigForBadge();
-    const encodedConfig = encodeConfig(configForBadge);
-    const inputs = getInputsForBadge();
-    const encodedInputs = inputs.length > 0 ? encodeURIComponent(JSON.stringify(inputs)) : '';
+    const fullConfig = generateFullConfig();
+    const configForBadge: ConfigWithInputs = {
+      ...generateConfig(),
+      ...(fullConfig.inputs && fullConfig.inputs.length > 0 ? { inputs: fullConfig.inputs } : {})
+    };
     const badges: string[] = [];
 
-    const customBadgeText = badgeText.replace(/\s/g, '_');
-
     if (includeVSCode) {
-      let vscodeUrl = `https://vscode.dev/redirect/mcp/install?name=${encodeURIComponent(serverName)}`;
-      if (encodedInputs) {
-        vscodeUrl += `&inputs=${encodedInputs}`;
-      }
-      vscodeUrl += `&config=${encodedConfig}`;
-      vscodeUrl = escapeUrlForMarkdown(vscodeUrl);
-      badges.push(`[![Install in VS Code](https://img.shields.io/badge/${customBadgeText}-VS_Code-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](${vscodeUrl})`);
+      badges.push(generateVSCodeBadge(serverName, configForBadge, badgeText, badgeTheme));
     }
 
     if (includeVSCodeInsiders) {
-      let vscodeInsidersUrl = `https://insiders.vscode.dev/redirect/mcp/install?name=${encodeURIComponent(serverName)}`;
-      if (encodedInputs) {
-        vscodeInsidersUrl += `&inputs=${encodedInputs}`;
-      }
-      vscodeInsidersUrl += `&config=${encodedConfig}&quality=insiders`;
-      vscodeInsidersUrl = escapeUrlForMarkdown(vscodeInsidersUrl);
-      badges.push(`[![Install in VS Code Insiders](https://img.shields.io/badge/${customBadgeText}-VS_Code_Insiders-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](${vscodeInsidersUrl})`);
+      badges.push(generateVSCodeInsidersBadge(serverName, configForBadge, badgeText, badgeTheme));
     }
 
     if (includeVisualStudio) {
-      let vsUrl = `https://vs-open.link/mcp-install?${encodedConfig}`;
-      vsUrl = escapeUrlForMarkdown(vsUrl);
-      badges.push(`[![Install in Visual Studio](https://img.shields.io/badge/${customBadgeText}-Visual_Studio-C16FDE?style=flat-square&logo=visualstudio&logoColor=white)](${vsUrl})`);
+      badges.push(generateVisualStudioBadge(serverName, configForBadge, badgeText, badgeTheme));
     }
 
     if (includeCursor) {
-      // Use Cursor badge with same style as VS Code badges but black background
-      const fullConfig = generateFullConfig();
-      const configWithName = { 
-        name: serverName, 
-        ...generateConfig(),
-        ...(fullConfig.inputs && fullConfig.inputs.length > 0 ? { inputs: fullConfig.inputs } : {})
-      };
-      const base64Config = btoa(JSON.stringify(configWithName));
-      let cursorUrl = `https://cursor.com/en/install-mcp?name=${encodeURIComponent(serverName)}&config=${base64Config}`;
-      cursorUrl = escapeUrlForMarkdown(cursorUrl);
-      badges.push(`[![Install in Cursor](https://img.shields.io/badge/${customBadgeText}-Cursor-000000?style=flat-square&logoColor=white)](${cursorUrl})`);
+      badges.push(generateCursorBadge(serverName, configForBadge, badgeText, badgeTheme));
     }
 
     if (includeGoose) {
       // Use Goose's official badge format from Playwright repository
-      const fullConfig = generateFullConfig();
-      const configWithName = { 
-        name: serverName, 
-        ...generateConfig(),
-        ...(fullConfig.inputs && fullConfig.inputs.length > 0 ? { inputs: fullConfig.inputs } : {})
-      };
+      const configWithName = configForBadge;
       const args = configWithName.args ? configWithName.args.join('%20') : '';
       const cmd = configWithName.command || '';
       let gooseUrl = `https://block.github.io/goose/extension?cmd=${encodeURIComponent(cmd)}&arg=${encodeURIComponent(args)}&id=${encodeURIComponent(serverName)}&name=${encodeURIComponent(serverName)}&description=MCP%20Server%20for%20${encodeURIComponent(serverName)}`;
@@ -962,12 +941,7 @@ function MCP() {
 
     if (includeLMStudio) {
       // Use LM Studio's official badge format from Playwright repository
-      const fullConfig = generateFullConfig();
-      const configWithName = { 
-        name: serverName, 
-        ...generateConfig(),
-        ...(fullConfig.inputs && fullConfig.inputs.length > 0 ? { inputs: fullConfig.inputs } : {})
-      };
+      const configWithName = configForBadge;
       const base64Config = btoa(JSON.stringify(configWithName));
       let lmstudioUrl = `https://lmstudio.ai/install-mcp?name=${encodeURIComponent(serverName)}&config=${base64Config}`;
       lmstudioUrl = escapeUrlForMarkdown(lmstudioUrl);

src/pages/Packages.tsx

@@ -4,12 +4,14 @@ import styles from './Packages.module.css'
 import { parsePackageInput, generatePackageBadges, getInstallCommands, type PackageManager } from '../utils/packageBadge'
 import PackageSearchDropdown from '../components/PackageSearchDropdown'
 import RequestBadge from '../components/RequestBadge'
+import { useBadgeTheme } from '../BadgeThemeContext'
 
 type CopyTarget = 'version' | 'versionPrerelease' | 'downloads' | 'downloadsMonthly' | 'downloadsRecent' | 'combined' | 'commands' | `command-${number}`
 type InputMode = 'manual' | 'search'
 type Registry = 'npm' | 'pypi' | 'nuget' | 'rubygems' | 'crates' | 'maven'
 
 function Packages() {
+  const { badgeTheme } = useBadgeTheme()
   const [inputValue, setInputValue] = useState('')
   const [inputMode, setInputMode] = useState<InputMode>('search')
   const [searchQuery, setSearchQuery] = useState('')
@@ -87,7 +89,7 @@ function Packages() {
         setGroupId(parts[0])
         setArtifactId(parts[1])
         setManualManager('maven')
-        const badges = generatePackageBadges('maven', null, parts[0], parts[1])
+        const badges = generatePackageBadges('maven', null, parts[0], parts[1], badgeTheme)
         const cmds = getInstallCommands('maven', null, parts[0], parts[1])
         if (badges) {
           setError(null)
@@ -99,7 +101,7 @@ function Packages() {
     } else {
       // For other package managers, generate badges automatically
       setManualManager(manager)
-      const badges = generatePackageBadges(manager, packageName)
+      const badges = generatePackageBadges(manager, packageName, undefined, undefined, badgeTheme)
       const cmds = getInstallCommands(manager, packageName)
       if (badges) {
         setError(null)
@@ -144,7 +146,7 @@ function Packages() {
 
     // For Maven with manual input
     if (manualManager === 'maven' && groupId && artifactId) {
-      const badges = generatePackageBadges('maven', null, groupId, artifactId)
+      const badges = generatePackageBadges('maven', null, groupId, artifactId, badgeTheme)
       const cmds = getInstallCommands('maven', null, groupId, artifactId)
 
       if (badges) {
@@ -191,7 +193,8 @@ function Packages() {
       effectiveManager,
       parsed.packageId,
       parsed.groupId,
-      parsed.artifactId
+      parsed.artifactId,
+      badgeTheme
     )
     const cmds = getInstallCommands(
       effectiveManager,

src/pages/Profile.tsx

@@ -7,8 +7,10 @@ import {
   type BadgeConfig,
   type BadgeType,
 } from '../utils/profileBadge'
+import { useBadgeTheme } from '../BadgeThemeContext'
 
 function Profile() {
+  const { badgeTheme } = useBadgeTheme()
   const [defaultUsername, setDefaultUsername] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [copiedBadge, setCopiedBadge] = useState<string | null>(null)
@@ -190,7 +192,7 @@ function Profile() {
     setError(null)
   }
 
-  const allBadges = generateProfileBadges(badgeConfigs)
+  const allBadges = generateProfileBadges(badgeConfigs, badgeTheme)
 
   // Reordering: maintain order of enabled badges
   const [badgeOrder, setBadgeOrder] = useState<BadgeType[]>([])

src/pages/Repository.tsx

@@ -9,13 +9,15 @@ import {
   type BadgeConfig,
 } from '../utils/repositoryBadge'
 import RequestBadge from '../components/RequestBadge'
+import { useBadgeTheme } from '../BadgeThemeContext'
 
 type InputMode = 'manual' | 'search'
 type PreviewMode = 'grouped' | 'flat'
 
 const WORKFLOW_PRESETS = ['ci.yml', 'test.yml', 'build.yml', 'deploy.yml', 'release.yml', 'lint.yml']
 
 function Repository() {
+  const { badgeTheme } = useBadgeTheme()
   const [inputValue, setInputValue] = useState('')
   const [inputMode] = useState<InputMode>('manual') // Search not implemented yet
   const [error, setError] = useState<string | null>(null)
@@ -298,7 +300,7 @@ function Repository() {
 
   const repoInfo = parseRepositoryInput(inputValue)
   const allConfigs = [...badgeConfigs, ...workflowConfigs]
-  const badges = repoInfo ? generateRepositoryBadges(repoInfo, allConfigs, defaultBranch || 'main') : []
+  const badges = repoInfo ? generateRepositoryBadges(repoInfo, allConfigs, defaultBranch || 'main', badgeTheme) : []
 
   const essentialBadges = badges.filter(b => ['stars', 'license', 'contributors', 'release','coverage','openssf'].includes(b.type))
   const workflowBadges = badges.filter(b => b.type === 'workflow')