From f5a466a3ed18acda3813524d7d6441e2d9e86d52 Mon Sep 17 00:00:00 2001
From: Oliver Rose <hello@olivermrose.com>
Date: Mon, 23 Feb 2026 11:34:19 -0500
Subject: [PATCH] add more playground providers

---
 app/components/Package/Playgrounds.vue |  8 ++++++++
 server/utils/readme.ts                 | 25 ++++++++++++++++++++++---
 uno.config.ts                          |  4 ++++
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/Playgrounds.vue b/app/components/Package/Playgrounds.vue
index 6a38f6b1e7..e498d7433b 100644
--- a/app/components/Package/Playgrounds.vue
+++ b/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 {
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index d7c296117c..592a47f9d8 100644
--- a/server/utils/readme.ts
+++ b/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
         }
diff --git a/uno.config.ts b/uno.config.ts
index 45348b92f6..d0821dc7fd 100644
--- a/uno.config.ts
+++ b/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: {