docs(app): framework select global (#2719)

Co-authored-by: harlan <harlan@harlanzw.com>

docs/app/components/FrameworkSelect.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { framework, frameworks } = useSharedData()
+</script>
+
+<template>
+  <UDropdownMenu
+    v-slot="{ open }"
+    :modal="false"
+    :items="frameworks"
+    :ui="{ content: 'w-(--radix-dropdown-menu-trigger-width)' }"
+  >
+    <UButton
+      color="neutral"
+      variant="outline"
+      v-bind="frameworks.find(f => f.value === framework)"
+      block
+      trailing-icon="i-lucide-chevron-down"
+      :class="[open && 'bg-[var(--ui-bg-elevated)]']"
+      :ui="{
+        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
+      }"
+      class="-mx-2 w-[calc(100%+1rem)]"
+    />
+  </UDropdownMenu>
+</template>

docs/app/components/Header.vue

@@ -55,6 +55,8 @@ defineShortcuts({
 
       <USeparator type="dashed" class="my-4" />
 
+      <FrameworkSelect class="mb-4" />
+
       <UContentNavigation :navigation="navigation" highlight />
     </template>
   </UHeader>

docs/app/components/content/ComponentCode.vue

@@ -272,9 +272,9 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
       <div v-if="component" class="flex justify-center border border-b-0 border-[var(--ui-border-muted)] relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class]">
         <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-            <slot :name="slot">
+            <MDCSlot :name="slot" unwrap="p">
               {{ slots?.[slot] }}
-            </slot>
+            </MDCSlot>
           </template>
         </component>
       </div>

docs/app/components/content/ComponentTheme.vue

@@ -4,14 +4,19 @@ import { camelCase } from 'scule'
 import * as theme from '#build/ui'
 
 const route = useRoute()
+const { framework } = useSharedData()
 
 const name = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 
 const strippedCompoundVariants = ref(false)
 
-function stripCompoundVariants(component?: any) {
-  if (component?.compoundVariants) {
-    component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
+const strippedTheme = computed(() => {
+  const strippedTheme = {
+    ...(theme as any)[name]
+  }
+
+  if (strippedTheme?.compoundVariants) {
+    strippedTheme.compoundVariants = strippedTheme.compoundVariants.filter((compoundVariant: any) => {
       if (compoundVariant.color) {
         if (!['primary', 'neutral'].includes(compoundVariant.color)) {
           strippedCompoundVariants.value = true
@@ -40,24 +45,43 @@ function stripCompoundVariants(component?: any) {
     })
   }
 
-  return component
-}
+  return strippedTheme
+})
 
 const component = computed(() => {
   return {
     ui: {
-      [name]: stripCompoundVariants((theme as any)[name])
+      [name]: strippedTheme.value
     }
   }
 })
 
-const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
+const { data: ast } = await useAsyncData(`component-theme-${name}-${framework.value}`, async () => {
   const md = `
 ::code-collapse
+${framework.value === 'nuxt'
+  ? `
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
+`
+  : `
+\`\`\`ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
 
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui(${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
+      .split('\n')
+      .map((line, i) => i === 0 ? line : `    ${line}`)
+      .join('\n')})
+  ]
+})
+\`\`\`
+`}
 ::
 
 ${strippedCompoundVariants.value
@@ -69,7 +93,7 @@ Some colors in \`compoundVariants\` are omitted for readability. Check out the s
 `
 
   return parseMarkdown(md)
-})
+}, { watch: [framework] })
 </script>
 
 <template>

docs/app/components/content/FrameworkOnly.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { framework } = useSharedData()
+</script>
+
+<template>
+  <slot :name="framework" />
+</template>

docs/app/components/content/IconsTheme.vue

@@ -2,8 +2,13 @@
 import json5 from 'json5'
 import icons from '../../../../src/theme/icons'
 
-const { data: ast } = await useAsyncData(`icons-theme`, async () => {
+const { framework } = useSharedData()
+
+const { data: ast } = await useAsyncData(`icons-theme-${framework.value}`, async () => {
   const md = `
+::code-collapse
+${framework.value === 'nuxt'
+  ? `
 \`\`\`ts [app.config.ts]
 export default defineAppConfig(${json5.stringify({
   ui: {
@@ -11,10 +16,33 @@ export default defineAppConfig(${json5.stringify({
   }
 }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
+`
+  : `
+\`\`\`ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui(${json5.stringify({
+      ui: {
+        icons
+      }
+    }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')
+      .split('\n')
+      .map((line, i) => i === 0 ? line : `    ${line}`)
+      .join('\n')})
+  ]
+})
+\`\`\`
+`}
+::
 `
 
   return parseMarkdown(md)
-})
+}, { watch: [framework] })
 </script>
 
 <template>

docs/app/components/og-image/OgImageDocs.vue

@@ -56,7 +56,7 @@ defineProps({
       <h1 class="m-0 text-[75px] font-semibold mb-2 text-white flex items-center">
         <span>{{ title }}</span>
       </h1>
-      <p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight">
+      <p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight text-balance">
         {{ description.slice(0, 200) }}
       </p>
     </div>