feat: add more playground providers (#1607)

Author: olivermrose

app/components/Package/Playgrounds.vue

@@ -16,6 +16,10 @@ const providerIcons: Record<string, string> = {
   'nuxt-new': 'i-simple-icons:nuxtdotjs',
   'vite-new': 'i-simple-icons:vite',
   'jsfiddle': 'i-lucide:code',
+  'typescript-playground': 'i-simple-icons:typescript',
+  'solid-playground': 'i-simple-icons:solid',
+  'svelte-playground': 'i-simple-icons:svelte',
+  'tailwind-playground': 'i-simple-icons:tailwindcss',
 }
 
 // Map provider id to color class
@@ -29,6 +33,10 @@ const providerColors: Record<string, string> = {
   'nuxt-new': 'text-provider-nuxt',
   'vite-new': 'text-provider-vite',
   'jsfiddle': 'text-provider-jsfiddle',
+  'typescript-playground': 'text-provider-typescript',
+  'solid-playground': 'text-provider-solid',
+  'svelte-playground': 'text-provider-svelte',
+  'tailwind-playground': 'text-provider-tailwind',
 }
 
 function getIcon(provider: string): string {

server/utils/readme.ts

@@ -15,7 +15,7 @@ interface PlaygroundProvider {
   id: string // Provider identifier
   name: string
   domains: string[] // Associated domains
-  path?: string
+  paths?: string[]
   icon?: string // Provider icon name
 }
 
@@ -81,9 +81,28 @@ const PLAYGROUND_PROVIDERS: PlaygroundProvider[] = [
     id: 'typescript-playground',
     name: 'TypeScript Playground',
     domains: ['typescriptlang.org'],
-    path: '/play',
+    paths: ['/play'],
     icon: 'typescript',
   },
+  {
+    id: 'solid-playground',
+    name: 'Solid Playground',
+    domains: ['playground.solidjs.com'],
+    icon: 'solid',
+  },
+  {
+    id: 'svelte-playground',
+    name: 'Svelte Playground',
+    domains: ['svelte.dev'],
+    paths: ['/repl', '/playground'],
+    icon: 'svelte',
+  },
+  {
+    id: 'tailwind-playground',
+    name: 'Tailwind Play',
+    domains: ['play.tailwindcss.com'],
+    icon: 'tailwindcss',
+  },
 ]
 
 /**
@@ -98,7 +117,7 @@ function matchPlaygroundProvider(url: string): PlaygroundProvider | null {
       for (const domain of provider.domains) {
         if (
           (hostname === domain || hostname.endsWith(`.${domain}`)) &&
-          (!provider.path || parsed.pathname.startsWith(provider.path))
+          (!provider.paths || provider.paths.some(path => parsed.pathname.startsWith(path)))
         ) {
           return provider
         }

uno.config.ts

@@ -100,6 +100,10 @@ export default defineConfig({
         nuxt: '#00DC82',
         vite: '#646CFF',
         jsfiddle: '#0084FF',
+        typescript: '#3178C6',
+        solid: '#2C4F7C',
+        svelte: '#FF3E00',
+        tailwind: '#06B6D4',
       },
     },
     animation: {