docs(ecosystem): use upstream logos and screenshots for community devtools

Author: antfubot

docs/app/components/global/EcosystemList.vue

@@ -15,6 +15,8 @@ interface EcosystemPackage {
   url?: string
   official?: boolean
   icon?: string
+  /** Upstream logo under `public/`; wins over `icon`. */
+  image?: string
   /** Tints the icon and its hover glow. Omitted entries get a neutral tile. */
   color?: string
 }
@@ -179,8 +181,16 @@ function monogram(name: string) {
           class="eco-tile flex size-9 shrink-0 items-center justify-center rounded-lg border border-default bg-muted"
           :style="pkg.color ? { color: pkg.color } : undefined"
         >
+          <img
+            v-if="pkg.image"
+            :src="pkg.image"
+            alt=""
+            width="20"
+            height="20"
+            class="size-5"
+          >
           <UIcon
-            v-if="pkg.icon"
+            v-else-if="pkg.icon"
             :name="pkg.icon"
             class="size-5"
             :class="!pkg.color && 'text-toned'"

docs/content/4.ecosystem.md

@@ -17,21 +17,21 @@ packages:
     author: eslint
     repo: eslint/config-inspector
     category: Devframes
-    icon: i-logos-eslint
+    image: /images/ecosystem/logos/eslint-config-inspector.svg
     color: "#4b32c3"
   - name: node-modules-inspector
     description: Visualizes the node_modules dependency graph
     author: antfu
     repo: antfu/node-modules-inspector
     category: Devframes
-    icon: i-lucide-boxes
-    color: "#0ea5e9"
+    image: /images/ecosystem/logos/node-modules-inspector.svg
+    color: "#3f8f4a"
   - name: vite-plugin-inspect
     description: Inspects the intermediate state of Vite plugins
     author: antfu-collective
     repo: antfu-collective/vite-plugin-inspect
     category: Devframes
-    icon: i-logos-vitejs
+    icon: i-carbon-search-advanced
     color: "#646cff"
   - name: medula
     description: Lets AI agents inspect and mutate live app state over MCP
@@ -45,27 +45,27 @@ packages:
     author: posva
     url: https://github.com/posva/pinia-colada/tree/main/devtools
     category: Devframes
-    icon: i-logos-pinia
+    image: /images/ecosystem/logos/pinia-colada.svg
     color: "#e0b000"
   - name: UnoCSS Inspector
     description: Inspects generated utility classes and matched rules
     author: unocss
     url: https://github.com/unocss/unocss/tree/main/packages-integrations/inspector
     category: Devframes
-    icon: i-logos-unocss
+    image: /images/ecosystem/logos/unocss-inspector.svg
   - name: Vite DevTools
     description: Hosts many devframes in one dock for any Vite app
     author: vitejs
     url: https://devtools.vite.dev
     category: Hosts
-    icon: i-logos-vitejs
-    color: "#646cff"
+    image: /images/ecosystem/logos/vite-devtools.svg
+    color: "#8b5cf6"
   - name: Nuxt DevTools
     description: Nuxt DevTools v4, built on Devframe and Vite DevTools
     author: nuxt
     url: https://devtools.nuxt.com
     category: Hosts
-    icon: i-logos-nuxt-icon
+    image: /images/ecosystem/logos/nuxt-devtools.svg
     color: "#00dc82"
   - name: "@devframes/plugin-data-inspector"
     description: Queries live server objects with jora
@@ -189,22 +189,42 @@ packages:
 addUrl: https://github.com/devframes/devframe/edit/main/docs/content/4.ecosystem.md
 sites:
   - name: Vite DevTools
-    description: The Vite DevTools dock hosts the Rolldown bundle analyzer, Vitest UI, Oxc tooling and any devframe you mount.
+    description: One dock for any Vite app, with Rolldown bundle analysis, Vitest UI, Oxc tooling and the devframes you mount.
     author: vitejs
     url: https://devtools.vite.dev
-    screenshot: /images/devframe/vite-devtools-rolldown.png
+    screenshot: /images/ecosystem/vite-devtools.webp
   - name: Nuxt DevTools
     description: Nuxt DevTools v4 builds on Devframe and Vite DevTools and adds Nuxt-specific panels.
     author: nuxt
     url: https://devtools.nuxt.com
-    screenshot: /images/devframe/nuxt-devtools-v4.png
+    screenshot: /images/ecosystem/nuxt-devtools.webp
+  - name: ESLint Config Inspector
+    description: Visualizes ESLint flat configs, the rules each file gets and where they come from.
+    author: eslint
+    url: https://github.com/eslint/config-inspector
+    screenshot: /images/ecosystem/eslint-config-inspector.webp
+  - name: node-modules-inspector
+    description: Interactive dependency graph of node_modules with versions, duplicates and module types.
+    author: antfu
+    url: https://github.com/antfu/node-modules-inspector
+    screenshot: /images/ecosystem/node-modules-inspector.webp
+  - name: vite-plugin-inspect
+    description: Shows how each Vite plugin transforms a module, step by step.
+    author: antfu-collective
+    url: https://github.com/antfu-collective/vite-plugin-inspect
+    screenshot: /images/ecosystem/vite-plugin-inspect.webp
+  - name: Pinia Colada devtools
+    description: Inspects Pinia Colada queries and mutations, with refetch, invalidate and simulated errors.
+    author: posva
+    url: https://github.com/posva/pinia-colada/tree/main/devtools
+    screenshot: /images/ecosystem/pinia-colada-devtools.webp
 ---
 
 #title
 Built with Devframe
 
 #description
-Products that run Devframe in production
+Devtools that run Devframe in production
 ::
 
 ::ecosystem-cta