Merge branch 'v3' into pr/3628

Author: benjamincanac

Diff for: docs/app/app.vue

@@ -23,7 +23,7 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
     { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
   ],
   style: [
@@ -40,6 +40,8 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+useFaviconFromTheme()
+
 const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 

Diff for: docs/app/composables/useFaviconFromTheme.ts

@@ -0,0 +1,55 @@
+import { useColorMode } from '@vueuse/core'
+import { onMounted, watch } from 'vue'
+import FaviconSvg from 'public/icon.svg?raw'
+
+export function useFaviconFromTheme() {
+  const colorMode = useColorMode()
+
+  function generateFaviconSvg(color: string) {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(FaviconSvg, 'image/svg+xml')
+    const svg = doc.documentElement
+
+    svg.querySelectorAll('path').forEach((path) => {
+      path.setAttribute('fill', color)
+    })
+
+    return new XMLSerializer().serializeToString(svg)
+  }
+
+  function updateFavicon() {
+    const root = document.documentElement
+    const color = getComputedStyle(root).getPropertyValue('--ui-primary').trim() || '#00DC82'
+
+    const svg = generateFaviconSvg(color)
+    const encoded = `data:image/svg+xml,${encodeURIComponent(svg)}`
+
+    useFavicon(encoded)
+  }
+
+  function setupMutationObserver() {
+    const styleTag = document.getElementById('nuxt-ui-colors')
+    if (!styleTag) return
+
+    const observer = new MutationObserver(() => {
+      updateFavicon()
+    })
+
+    observer.observe(styleTag, {
+      characterData: true,
+      subtree: true,
+      childList: true
+    })
+  }
+
+  onMounted(() => {
+    watch(colorMode, () => {
+      updateFavicon()
+    }, {
+      immediate: true,
+      flush: 'post'
+    })
+
+    setupMutationObserver()
+  })
+}

Diff for: docs/app/error.vue

@@ -26,7 +26,7 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+    // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   style: [
     { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
@@ -47,6 +47,8 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+useFaviconFromTheme()
+
 const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 

Diff for: docs/app/pages/pro/.content/templates.yml

@@ -16,8 +16,34 @@ links:
     variant: outline
     trailingIcon: i-lucide-arrow-right
 templates:
+  - title: 'Chat'
+    description: "An AI chatbot template designed to help you build your own chatbot with Nuxt UI Pro components and deployed on [NuxtHub](https://hub.nuxt.com)."
+    icon: i-lucide-message-circle
+    thumbnail:
+      dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2NoYXQtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3NDI4NDY2ODB9.n4YCsoNz8xatox7UMoYZFNo7iS1mC_DT0h0A9cKRoTw.jpg?theme=dark
+      light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2NoYXQtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3NDI4NDY2ODB9.n4YCsoNz8xatox7UMoYZFNo7iS1mC_DT0h0A9cKRoTw.jpg?theme=light
+    features:
+      - title: Powered by Cloudflare AI models
+        icon: i-simple-icons-cloudflare
+      - title: GitHub OAuth authentication
+        icon: i-lucide-lock
+      - title: Saved chats and messages
+        icon: i-lucide-database
+    links:
+      - label: Preview
+        to: https://chat-template.nuxt.dev
+        target: _blank
+        leadingIcon: i-logos-nuxt-icon
+        trailingIcon: i-lucide-arrow-up-right
+        color: neutral
+      - label: Nuxt Template
+        to: https://github.com/nuxt-ui-pro/chat
+        target: _blank
+        icon: i-simple-icons-github
+        color: neutral
+        variant: outline
   - title: 'Dashboard'
-    description: "A template to illustrate how to build your own dashboard with the 15+ latest Nuxt UI Pro components, designed specifically to create a consistent look and feel."
+    description: "A template to illustrate how to build your own dashboard with 15+ Nuxt UI Pro components, designed specifically to create a consistent look and feel."
     icon: i-lucide-bar-chart-big
     thumbnail:
       dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2Rhc2hib2FyZC10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTczOTQ2MzU2N30._VElt4uvLjvAMdnTLytCInOajMElzWDKbmvOaMZhZUI.jpg?theme=dark

Diff for: docs/package.json

@@ -8,7 +8,7 @@
     "@iconify-json/lucide": "^1.2.36",
     "@iconify-json/simple-icons": "^1.2.32",
     "@iconify-json/vscode-icons": "^1.2.19",
-    "@nuxt/content": "^3.4.0",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@754e480",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "latest",
     "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@3cc20d8",