docs: integrate @nuxt/ui-pro (#739)

Co-authored-by: Pooya Parsa <pooya@pi0.io> Co-authored-by: Florent Delerue <florentdelerue@hotmail.com> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
2026-01-14 12:14:41 +01:00 · 2023-11-02 16:44:44 +01:00
parent ed4b5e0077
commit 844b3185e9
42 changed files with 610 additions and 501 deletions
--- a/.github/workflows/ci-dev.yml
+++ b/.github/workflows/ci-dev.yml
@@ -21,6 +21,9 @@ jobs:
        os: [ubuntu-latest] # macos-latest, windows-latest
        node: [18]

+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
    steps:
      - uses: actions/setup-node@v4
        with:
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,6 +14,9 @@ jobs:
        os: [ubuntu-latest] # macos-latest, windows-latest
        node: [18]

+    env:
+      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
    steps:
      - uses: actions/setup-node@v4
        with:
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "prettier.enable": false
+}
--- a/docs/.env.example
+++ b/docs/.env.example
@@ -1,6 +1,8 @@
-# To link Nuxt UI Pro in development
+# Specify the path of @nuxt/ui-pro locally
 NUXT_UI_PRO_PATH=
-# To use Nuxt UI Pro in production
-NUXT_UI_PRO_TOKEN=
+# Production token for @nuxt/ui-pro, purchase on https://ui.nuxt.com/pro/purchase
+NUXT_UI_PRO_LICENSE=
 # Used when pre-rendering the docs for dynamic OG images
 NUXT_PUBLIC_SITE_URL=
+# Used to fetch `nuxt/ui-pro` docs content
+NUXT_GITHUB_TOKEN=
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,16 +1,16 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
  <div>
-    <Header />
+    <Header v-if="!$route.path.startsWith('/examples')" :links="links" />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>

-    <Footer />
+    <Footer v-if="!$route.path.startsWith('/examples')" />

    <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
    </ClientOnly>

    <UNotifications>
@@ -42,10 +42,17 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { defa
 // Computed

 const navigation = computed(() => {
-  const main = nav.value.filter(item => item._path !== '/dev')
-  const dev = nav.value.find(item => item._path === '/dev')?.children
+  if (branch.value?.name === 'dev') {
+    const dev = nav.value.find(item => item._path === '/dev')?.children
+    const pro = nav.value.find(item => item._path === '/pro')

-  return branch.value?.name === 'dev' ? dev : main
+    return [
+      pro,
+      ...dev
+    ]
+  }
+
+  return nav.value.filter(item => item._path !== '/dev')
 })

 const groups = computed(() => {
@@ -58,6 +65,54 @@ const groups = computed(() => {

 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')

+const links = computed(() => {
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: '/playground'
+  }, {
+    label: 'Roadmap',
+    icon: 'i-heroicons-academic-cap',
+    to: '/roadmap'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    children: [{
+      label: 'Features',
+      to: '/pro#features',
+      exactHash: true,
+      icon: 'i-heroicons-beaker',
+      description: 'Discover all the features of Nuxt UI Pro.'
+    }, {
+      label: 'Pricing',
+      to: '/pro#pricing',
+      exactHash: true,
+      icon: 'i-heroicons-credit-card',
+      description: 'A simple pricing, for solo developers or teams.'
+    }, {
+      label: 'Guide',
+      to: '/pro/guide',
+      icon: 'i-heroicons-book-open',
+      description: 'Learn how to use Nuxt UI Pro in your app.'
+    }, {
+      label: 'Components',
+      to: '/pro/components',
+      icon: 'i-heroicons-cube-transparent',
+      description: 'Discover all the components available in Nuxt UI Pro.'
+    }]
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+})
+
 // Watch

 watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
--- a/docs/components/Footer.vue
+++ b/docs/components/Footer.vue
@@ -1,22 +1,16 @@
 <template>
-  <div v-if="$route.path !== '/playground'" class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
-    <div class="bg-white dark:bg-gray-900 px-4">
+  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
+    <div v-if="!['/playground', '/roadmap'].includes($route.path)" class="bg-white dark:bg-gray-900 px-4">
      <LogoOnly class="w-5 h-5" />
    </div>
  </div>

-  <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
+  <UFooter>
    <template #left>
-      <div class="text-sm text-gray-500 dark:text-gray-400">
-        Made by
-        <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
-          <LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
-        </NuxtLink>
-      </div>
-    </template>
-
-    <template #center>
-      <span class="text-sm text-gray-500 dark:text-gray-400">
+      <a v-if="$route.path.startsWith('/pro')" class="text-sm text-gray-500 dark:text-gray-400 hover:underline" href="https://ui.nuxt.com/pro/purchase" target="_blank">
+        Purchase Nuxt UI Pro
+      </a>
+      <span v-else class="text-sm text-gray-500 dark:text-gray-400">
        Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
          MIT License
        </NuxtLink>
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -31,42 +31,35 @@
    </template>

    <template #panel>
-      <BranchSelect />
+      <UAsideLinks :links="links" />

-      <UNavigationTree :links="mapContentNavigation(navigation)" />
+      <UDivider type="dashed" class="mt-4 mb-3" />
+
+      <BranchSelect v-if="!route.path.startsWith('/pro')" />
+
+      <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open />
    </template>
  </UHeader>
 </template>

 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { Link } from '#ui-pro/types'

+defineProps<{
+  links: Link[]
+}>()
+
+const route = useRoute()
 const { metaSymbol } = useShortcuts()

-const navigation = inject<Ref<NavItem[]>>('navigation')
+const nav = inject<Ref<NavItem[]>>('navigation')

-const links = computed(() => {
-  return [{
-    label: 'Documentation',
-    icon: 'i-heroicons-book-open-solid',
-    to: '/getting-started'
-  }, {
-    label: 'Examples',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/getting-started/examples'
-  }, {
-    label: 'Playground',
-    icon: 'i-simple-icons-stackblitz',
-    to: '/playground'
-  }, {
-    label: 'Pro',
-    icon: 'i-heroicons-square-3-stack-3d',
-    to: '/pro'
-  }, {
-    label: 'Releases',
-    icon: 'i-heroicons-rocket-launch-solid',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
-  }]
+const navigation = computed(() => {
+  if (route.path.startsWith('/pro')) {
+    return nav.value.find(item => item._path === '/pro')?.children
+  }
+
+  return nav.value.filter(item => !item._path.startsWith('/pro'))
 })
 </script>
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -36,8 +36,8 @@
      </div>
    </div>

-    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, overflowClass]">
-      <component :is="name" v-model="vModel" v-bind="fullProps">
+    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, extraClass]">
+      <component :is="name" v-model="vModel" v-bind="fullProps" :class="componentClass">
        <ContentSlot v-if="$slots.default" :use="$slots.default" />

        <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
@@ -99,13 +99,17 @@ const props = defineProps({
    type: String,
    default: 'bg-white dark:bg-gray-900'
  },
-  overflowClass: {
+  extraClass: {
    type: String,
    default: ''
  },
  previewOnly: {
    type: Boolean,
    default: false
+  },
+  componentClass: {
+    type: String,
+    default: ''
  }
 })

@@ -116,10 +120,16 @@ const componentProps = reactive({ ...props.props })
 const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+// TODO: Remove once merged on `main` branch
+if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
+  name = `U${name}`
+}
+if (['avatar-group', 'button-group', 'radio'].includes(name)) {
+  name = `U${upperFirst(camelCase(name))}`
+}

 const meta = await fetchComponentMeta(name)

--- a/docs/components/content/ComponentExample.vue
+++ b/docs/components/content/ComponentExample.vue
@@ -1,10 +1,14 @@
 <template>
  <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
    <div
-      class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
-      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
+      class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
+      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
    >
-      <component :is="camelName" v-if="component" v-bind="componentProps" />
+      <template v-if="component">
+        <iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
+        <component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
+      </template>
+
      <ContentSlot v-if="$slots.default" :use="$slots.default" />
    </div>
    <template v-if="hasCode">
@@ -43,18 +47,36 @@ const props = defineProps({
    type: Boolean,
    default: true
  },
+  prose: {
+    type: Boolean,
+    default: false
+  },
+  iframe: {
+    type: Boolean,
+    default: false
+  },
+  iframeProps: {
+    type: Object,
+    default: () => ({})
+  },
  backgroundClass: {
    type: String,
    default: 'bg-white dark:bg-gray-900'
  },
-  overflowClass: {
+  extraClass: {
    type: String,
    default: ''
  }
 })

+let component = props.component
+// TODO: Remove once merged on `main` branch
+if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical-navigation-theme-tailwind', 'pagination-theme-rounded'].includes(component)) {
+  component = component.replace('-theme', '-example-theme')
+}
+
 const instance = getCurrentInstance()
-const camelName = camelCase(props.component)
+const camelName = camelCase(component)
 const data = await fetchContentExampleCode(camelName)

 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
--- a/docs/components/content/ComponentProps.vue
+++ b/docs/components/content/ComponentProps.vue
@@ -17,10 +17,16 @@ const props = defineProps({
 })

 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+
+// TODO: Remove once merged on `main` branch
+if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
+  name = `U${name}`
+}
+if (['avatar-group', 'button-group', 'radio'].includes(name)) {
+  name = `U${upperFirst(camelCase(name))}`
+}

 const meta = await fetchComponentMeta(name)
 </script>
--- a/docs/components/content/ComponentPropsField.vue
+++ b/docs/components/content/ComponentPropsField.vue
@@ -1,21 +1,24 @@
 <template>
  <Field v-bind="prop">
    <code v-if="prop.default">{{ prop.default }}</code>
+    <p v-if="prop.description">
+      {{ prop.description }}
+    </p>

    <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
+      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
        <ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
      </FieldGroup>
    </Collapsible>
    <Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name" class="!mt-0">
+      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
        <template v-for="subSchema in schema.schema" :key="subSchema.name">
          <ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
        </template>
      </FieldGroup>
    </Collapsible>
    <Collapsible v-else-if="prop.schema?.kind === 'object' && prop.schema.type !== 'Function' && Object.values(prop.schema.schema)?.length">
-      <FieldGroup class="!mt-0">
+      <FieldGroup>
        <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
      </FieldGroup>
    </Collapsible>
--- a/docs/components/content/ComponentSlots.vue
+++ b/docs/components/content/ComponentSlots.vue
@@ -1,19 +1,8 @@
 <template>
  <div>
-    <table>
-      <thead>
-        <tr>
-          <th>Slot</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="slot in (meta.meta.slots as any[])" :key="slot.name">
-          <td class="whitespace-nowrap">
-            <code>{{ slot.name }}</code>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <FieldGroup>
+      <Field v-for="slot in meta?.meta.slots" :key="slot.name" v-bind="slot" />
+    </FieldGroup>
  </div>
 </template>

@@ -28,10 +17,8 @@ const props = defineProps({
 })

 const route = useRoute()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
+
+const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`

 const meta = await fetchComponentMeta(name)
 </script>
--- a/docs/components/content/Placeholder.vue
+++ b/docs/components/content/Placeholder.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75">
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
      <defs>
        <pattern
--- a/docs/components/content/VoltaEmbed.vue
+++ b/docs/components/content/VoltaEmbed.vue
@@ -1,17 +0,0 @@
-<template>
-  <iframe :src="src" class="w-full min-h-[calc(100vh/1.5)] border border-gray-200 dark:border-gray-800 rounded-md" />
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  token: {
-    type: String,
-    required: true
-  }
-})
-
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const src = computed(() => `https://volta.net/embed/${props.token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
-</script>
--- a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
+++ b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
--- a/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
+++ b/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
--- a/docs/components/content/examples/PaginationExampleThemeRounded.vue
+++ b/docs/components/content/examples/PaginationExampleThemeRounded.vue
--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ b/docs/components/content/examples/TableExampleAdvanced.vue
@@ -84,11 +84,11 @@ const pageFrom = computed(() => (page.value - 1) * pageCount.value + 1)
 const pageTo = computed(() => Math.min(page.value * pageCount.value, pageTotal.value))

 // Data
-const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
+const { data: todos, pending } = await useLazyAsyncData<{
  id: number
  title: string
  completed: string
-}[]>(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
+}[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
  query: {
    q: search.value,
    '_page': page.value,
--- a/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
+++ b/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -150,4 +150,13 @@ Update your `package.json` to the following:
 }
 ```

+```diff [package.json]
+{
+  "devDependencies": {
+-   "@nuxt/ui": "^2.9.0"
+   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+  }
+}
+```
+
 Then run `pnpm install`, `yarn install` or `npm install`.
--- a/docs/content/1.getting-started/5.examples.md
+++ b/docs/content/1.getting-started/5.examples.md
@@ -134,14 +134,14 @@ Here is some examples of what you can do with the [CommandPalette](/navigation/c
 ::component-example
 ---
 padding: false
-component: 'command-palette-theme-algolia'
+component: 'command-palette-example-theme-algolia'
 componentProps:
  class: 'max-h-[480px] rounded-md'
 hiddenCode: true
 ---
 ::

-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23" target="_blank"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
 Take a look at the component!
 ::

@@ -150,24 +150,24 @@ Take a look at the component!
 ::component-example
 ---
 padding: false
-component: 'command-palette-theme-raycast'
+component: 'command-palette-example-theme-raycast'
 componentProps:
  class: 'max-h-[480px] rounded-md'
 hiddenCode: true
 ---
 ::

-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30" target="_blank"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
 Take a look at the component!
 ::

 ### VerticalNavigation

-:component-example{component="vertical-navigation-theme-tailwind"}
+:component-example{component="vertical-navigation-example-theme-tailwind"}

 ### Pagination

-:component-example{component="pagination-theme-rounded"}
+:component-example{component="pagination-example-theme-rounded"}

 ## RTL Support

--- a/docs/content/1.getting-started/7.roadmap.md
+++ b/docs/content/1.getting-started/7.roadmap.md
@@ -1,7 +0,0 @@
---
-title: Roadmap
-description: Discover our Volta board for @nuxt/ui development status.
-toc: false
---
-
-:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9"}
--- a/docs/content/2.elements/11.meter.md
+++ b/docs/content/2.elements/11.meter.md
@@ -117,7 +117,7 @@ To group multiple meters into a group, adding all values, use the `MeterGroup` c
 - To show a label for each meter, use the `label` prop on each meter.
 - To change the icon for each meter, use the `icon` prop.

-::component-card{slug="MeterGroup"}
+::component-card{slug="UMeterGroup"}
 ---
 baseProps:
  icon: i-heroicons-minus
@@ -169,7 +169,7 @@ The `label` slot can be used to change how the label below the meter bar is show

 :u-divider{label="MeterGroup" type="dashed" class="my-12"}

-:component-props{slug="MeterGroup"}
+:component-props{slug="UMeterGroup"}

 ## Config

--- a/docs/content/2.elements/3.avatar.md
+++ b/docs/content/2.elements/3.avatar.md
@@ -90,7 +90,7 @@ To stack avatars as a group, use the `AvatarGroup` component.
 - To size all the avatars equally, pass the `size` prop
 - To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`

-::component-card{slug="AvatarGroup"}
+::component-card{slug="UAvatarGroup"}
 ---
 props:
  size: 'sm'
@@ -113,10 +113,10 @@ code: |

 :u-divider{label="AvatarGroup" type="dashed" class="my-12"}

-:component-props{slug="avatar-group"}
+:component-props{slug="UAvatarGroup"}

 ## Config

 :component-preset

-:component-preset{slug="avatar-group"}
+:component-preset{slug="AvatarGroup"}
--- a/docs/content/2.elements/5.button.md
+++ b/docs/content/2.elements/5.button.md
@@ -295,7 +295,7 @@ To stack buttons as a group, use the `ButtonGroup` component.
 - To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`

-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
  size: 'sm'
@@ -312,7 +312,7 @@ code: |

 This can also work with an [Input](/forms/input) component for example:

-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
  size: 'sm'
@@ -375,7 +375,7 @@ excludedProps:

 :u-divider{label="ButtonGroup" type="dashed" class="my-12"}

-:component-props{slug="ButtonGroup"}
+:component-props{slug="UButtonGroup"}

 ## Config

--- a/docs/content/3.forms/6.radio-group.md
+++ b/docs/content/3.forms/6.radio-group.md
@@ -75,7 +75,7 @@ This prop also work on the Radio component.

 Use the `label` prop to display a label on the right of the Radio.

-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
  label: 'Label'
@@ -86,7 +86,7 @@ props:

 Use the `required` prop to display a red star next to the label of the Radio.

-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
  label: 'Label'
@@ -98,7 +98,7 @@ props:

 Use the `help` prop to display some text under the Radio.

-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
  label: 'Label'
@@ -116,7 +116,7 @@ Use the `#label` slot to override the label of each option.

 Alternatively, you can do the same with individual Radio:

-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 slots:
  label: <span class="italic">Label</span>
@@ -149,10 +149,10 @@ slots:

 :u-divider{label="Radio" type="dashed" class="my-12"}

-:component-props{slug="radio"}
+:component-props{slug="URadio"}

 ## Config

 :component-preset

-:component-preset{slug="radio"}
+:component-preset{slug="Radio"}
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -13,7 +13,6 @@ Use the `rows` prop to set the data to display in the table. By default, the tab
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-basic'
 componentProps:
  class: 'flex-1'
@@ -33,7 +32,6 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns'
 componentProps:
  class: 'flex-1'
@@ -45,7 +43,6 @@ You can easily use the [SelectMenu](/forms/select-menu) component to change the
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns-selectable'
 componentProps:
  class: 'flex-1'
@@ -59,7 +56,6 @@ You can make the columns sortable by setting the `sortable` property to `true` i
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns-sortable'
 componentProps:
  class: 'flex-1'
@@ -82,7 +78,6 @@ Use the `sort-button` prop to customize the sort button in the header. You can p
 ::component-card{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
  class: 'w-full'
  columns:
@@ -187,7 +182,6 @@ The initial value of `sort` will be respected as the initial sort column and dir
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-reactive-sorting'
 componentProps:
  class: 'flex-1'
@@ -201,7 +195,6 @@ Use a `v-model` to make the table selectable. The `v-model` will be an array of
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-selectable'
 componentProps:
  class: 'flex-1'
@@ -219,7 +212,6 @@ You can use this to navigate to a page, open a modal or even to select the row m
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-clickable'
 componentProps:
  class: 'flex-1'
@@ -233,7 +225,6 @@ You can easily use the [Input](/forms/input) component to filter the rows.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-searchable'
 componentProps:
  class: 'flex-1'
@@ -247,7 +238,6 @@ You can easily use the [Pagination](/navigation/pagination) component to paginat
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-paginable'
 componentProps:
  class: 'flex-1'
@@ -265,7 +255,6 @@ You can also set it to `null` to hide the loading state.
 ::component-card
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
  class: 'w-full'
  columns:
@@ -314,7 +303,6 @@ You can also set it to `null` to hide the empty state.
 ::component-card
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
  class: 'w-full'
  columns:
@@ -380,7 +368,6 @@ You can for example create an extra column for actions with a [Dropdown](/elemen
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-slots'
 componentProps:
  class: 'flex-1'
@@ -394,7 +381,6 @@ Use the `#loading-state` slot to customize the loading state.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-loading-slot'
 componentProps:
  class: 'flex-1'
@@ -408,7 +394,6 @@ Use the `#empty-state` slot to customize the empty state.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-empty-slot'
 componentProps:
  class: 'flex-1'
--- a/docs/content/5.navigation/2.command-palette.md
+++ b/docs/content/5.navigation/2.command-palette.md
@@ -225,7 +225,6 @@ Use the `#empty-state` slot to customize the empty state.
 ::component-example
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'command-palette-example-empty-slot'
 componentProps:
  class: 'flex-1'
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -1,5 +1,5 @@
 navigation: false
-title: 'Nuxt UI: Fully styled and customizable components for Nuxt'
+title: 'Nuxt UI: A UI Library for Modern Web Apps'
 description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
 hero:
  title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'
--- a/docs/error.vue
+++ b/docs/error.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <Header />
+    <Header :links="links" />

    <UContainer>
      <UMain>
@@ -11,7 +11,7 @@
    </UContainer>

    <ClientOnly>
-      <LazyUDocsSearch :files="files" :navigation="navigation" />
+      <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
    </ClientOnly>

    <UNotifications />
@@ -45,6 +45,54 @@ const navigation = computed(() => {
  return branch.value?.name === 'dev' ? dev : main
 })

+const links = computed(() => {
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: '/playground'
+  }, {
+    label: 'Roadmap',
+    icon: 'i-heroicons-academic-cap',
+    to: '/roadmap'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    children: [{
+      label: 'Features',
+      to: '/pro#features',
+      exactHash: true,
+      icon: 'i-heroicons-beaker',
+      description: 'Discover all the features of Nuxt UI Pro.'
+    }, {
+      label: 'Pricing',
+      to: '/pro#pricing',
+      exactHash: true,
+      icon: 'i-heroicons-credit-card',
+      description: 'A simple pricing, for solo developers or teams.'
+    }, {
+      label: 'Guide',
+      to: '/pro/guide',
+      icon: 'i-heroicons-book-open',
+      description: 'Learn how to use Nuxt UI Pro in your app.'
+    }, {
+      label: 'Components',
+      to: '/pro/components',
+      icon: 'i-heroicons-cube-transparent',
+      description: 'Discover all the components available in Nuxt UI Pro.'
+    }]
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+})
+
 // Provide

 provide('navigation', navigation)
--- a/docs/layouts/docs.vue
+++ b/docs/layouts/docs.vue
@@ -19,5 +19,7 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'

-const navigation = inject<NavItem[]>('navigation')
+const nav = inject<Ref<NavItem[]>>('navigation')
+
+const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
 </script>
--- a/docs/modules/content-examples-code.ts
+++ b/docs/modules/content-examples-code.ts
@@ -74,11 +74,7 @@ export default defineNuxtModule({

    nuxt.hook('components:extend', async (_components) => {
      components = _components
-        .filter(
-          (v) =>
-            v.shortPath.startsWith('components/content/examples/') ||
-            v.shortPath.startsWith('components/content/themes/')
-        )
+        .filter((v) => v.shortPath.includes('components/content/examples/'))
        .reduce((acc, component) => {
          acc[component.pascalName] = component
          return acc
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -8,7 +8,13 @@ const { resolve } = createResolver(import.meta.url)

 export default defineNuxtConfig({
  // @ts-ignore
-  extends: process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro',
+  extends: process.env.NUXT_UI_PRO_PATH ? [
+    process.env.NUXT_UI_PRO_PATH,
+    resolve(process.env.NUXT_UI_PRO_PATH, '.docs')
+  ] : [
+    '@nuxt/ui-pro',
+    process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/.docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
+  ].filter(Boolean),
  modules: [
    '@nuxt/content',
    'nuxt-og-image',
@@ -30,7 +36,7 @@ export default defineNuxtConfig({
  },
  ui: {
    global: true,
-    icons: ['heroicons', 'simple-icons'],
+    icons: ['heroicons', 'logos', 'simple-icons'],
    safelistColors: excludeColors(colors)
  },
  content: {
@@ -46,7 +52,19 @@ export default defineNuxtConfig({
        repo: 'nuxt/ui',
        branch: 'main',
        dir: 'docs/content'
-      }
+      },
+      pro: process.env.NUXT_UI_PRO_PATH ? {
+        prefix: '/pro',
+        driver: 'fs',
+        base: resolve(process.env.NUXT_UI_PRO_PATH, '.docs/content/pro')
+      } : process.env.NUXT_GITHUB_TOKEN ? {
+        prefix: '/pro',
+        driver: 'github',
+        repo: 'nuxt/ui-pro',
+        branch: 'dev',
+        dir: '.docs/content/pro',
+        token: process.env.NUXT_GITHUB_TOKEN || ''
+      } : undefined
    }
  },
  fontMetrics: {
@@ -70,11 +88,20 @@ export default defineNuxtConfig({
    }
  },
  componentMeta: {
-    globalsOnly: true,
-    exclude: ['@nuxtjs/mdc', resolve('./components'), resolve('@nuxt/ui-pro/components')],
+    exclude: [
+      '@nuxt/content',
+      '@nuxt/ui-templates',
+      '@nuxtjs/color-mode',
+      '@nuxtjs/mdc',
+      'nuxt/dist',
+      'nuxt-og-image',
+      'nuxt-site-config',
+      resolve('./components'),
+      process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, '.docs', 'components') : '.c12'
+    ],
    metaFields: {
      props: true,
-      slots: false,
+      slots: true,
      events: false,
      exposed: false
    }
@@ -87,7 +114,9 @@ export default defineNuxtConfig({
    // Related to https://github.com/nuxt/nuxt/pull/22558
    'components:extend': (components) => {
      components.forEach((component) => {
-        if (component.global) {
+        if (component.shortPath.includes(process.env.NUXT_UI_PRO_PATH || '@nuxt/ui-pro')) {
+          component.global = true
+        } else if (component.global) {
          component.global = 'sync'
        }
      })
--- a/docs/package.json
+++ b/docs/package.json
@@ -6,22 +6,24 @@
  },
  "devDependencies": {
    "@iconify-json/heroicons": "^1.1.13",
+    "@iconify-json/logos": "^1.1.37",
    "@iconify-json/simple-icons": "^1.1.76",
-    "@nuxt/content": "^2.8.5",
+    "@nuxt/content": "^2.9.0",
    "@nuxt/devtools": "^1.0.0",
    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22",
-    "@nuxthq/studio": "^1.0.2",
+    "@nuxt/ui-pro": "^0.4.1",
+    "@nuxthq/studio": "^1.0.3",
    "@nuxtjs/fontaine": "^0.4.1",
    "@nuxtjs/google-fonts": "^3.0.2",
+    "@nuxtjs/mdc": "^0.2.6",
    "@nuxtjs/plausible": "^0.2.3",
    "@vueuse/nuxt": "^10.5.0",
    "eslint": "^8.52.0",
    "joi": "^17.11.0",
    "nuxt": "^3.8.0",
    "nuxt-cloudflare-analytics": "^1.0.8",
-    "nuxt-component-meta": "^0.5.4",
-    "nuxt-og-image": "^2.1.3",
+    "nuxt-component-meta": "npm:nuxt-component-meta-edge@0.5.5-28315603.0a285c7",
+    "nuxt-og-image": "^2.2.3",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2",
    "ufo": "^1.3.1",
--- a/docs/pages/[...slug].vue
+++ b/docs/pages/[...slug].vue
@@ -7,7 +7,7 @@

      <hr v-if="surround?.length">

-      <UDocsSurround :surround="(surround as ParsedContent[])" />
+      <UDocsSurround :surround="surround" />
    </UPageBody>

    <template v-if="page.body?.toc?.links?.length" #right>
@@ -26,7 +26,6 @@

 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import type { ParsedContent } from '@nuxt/content/dist/runtime/types'

 const route = useRoute()
 const { branch } = useContentSource()
--- a/docs/pages/examples/[...slug].vue
+++ b/docs/pages/examples/[...slug].vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="p-4 flex flex-col justify-center h-screen overflow-auto">
+    <component :is="name" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+
+const name = route.params.slug[0]
+</script>
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -1,7 +1,19 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
  <div>
-    <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]">
+    <ULandingHero :ui="{ base: 'relative z-[1]', container: 'max-w-4xl' }" class="mb-[calc(var(--header-height)*2)]">
+      <template #headline>
+        <UBadge variant="subtle" size="md" class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 transition-color relative font-medium rounded-full shadow-none">
+          <NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version}`" target="_blank" class="focus:outline-none" tabindex="-1">
+            <span class="absolute inset-0" aria-hidden="true" />
+          </NuxtLink>
+
+          <span class="flex items-center gap-1">
+            Nuxt UI {{ config.version.split('.').slice(0, -1).join('.') }} is out!
+          </span>
+        </UBadge>
+      </template>
+
      <template #title>
        <span v-html="page.hero?.title" />
      </template>
@@ -72,16 +84,14 @@
            }"
            class="flex flex-col"
          >
-            <div v-if="card.image">
-              <UColorModeImage
-                :light="`${card.image.path}-light.svg`"
-                :dark="`${card.image.path}-dark.svg`"
-                :width="card.image.width"
-                :height="card.image.height"
-                :alt="card.title"
-                class="object-cover w-full"
-              />
-            </div>
+            <UColorModeImage
+              :light="`${card.image.path}-light.svg`"
+              :dark="`${card.image.path}-dark.svg`"
+              :width="card.image.width"
+              :height="card.image.height"
+              :alt="card.title"
+              class="object-cover w-full"
+            />
          </ULandingCard>
        </ULandingGrid>
      </template>
@@ -199,6 +209,7 @@ const { data: module } = await useFetch<{

 const source = ref('npm i @nuxt/ui')

+const config = useRuntimeConfig().public
 const { copy, copied } = useClipboard({ source })
 const breakpoints = useBreakpoints(breakpointsTailwind)

--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -16,7 +16,7 @@ defineOgImage({
 </script>

 <template>
-  <div class="h-[calc(100vh-var(--header-height))]">
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
    <ClientOnly>
      <iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${$colorMode.preference}`" width="100%" height="100%" />
    </ClientOnly>
--- a/docs/pages/pro.vue
+++ b/docs/pages/pro.vue
@@ -1,91 +0,0 @@
-<template>
-  <UMain>
-    <ULandingHero>
-      <template #top>
-        <svg class="hidden dark:block absolute inset-0 -z-10 h-full w-full stroke-white/5 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)]" aria-hidden="true">
-          <defs>
-            <pattern
-              id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
-              width="200"
-              height="200"
-              x="50%"
-              y="-1"
-              patternUnits="userSpaceOnUse"
-            >
-              <path d="M.5 200V.5H200" fill="none" />
-            </pattern>
-          </defs>
-          <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
-            <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" />
-          </svg>
-          <rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
-        </svg>
-
-        <svg class="dark:hidden absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)]" aria-hidden="true">
-          <defs>
-            <pattern
-              id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
-              width="200"
-              height="200"
-              x="50%"
-              y="-1"
-              patternUnits="userSpaceOnUse"
-            >
-              <path d="M.5 200V.5H200" fill="none" />
-            </pattern>
-          </defs>
-          <rect width="100%" height="100%" stroke-width="0" fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" />
-        </svg>
-
-        <div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)] right-0" aria-hidden="true">
-          <div class="aspect-[1108/632] w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/20 opacity-20" style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)" />
-        </div>
-      </template>
-
-      <template #badges>
-        <UBadge color="primary" size="lg" variant="subtle">
-          Coming Soon 🚀
-        </UBadge>
-      </template>
-
-      <template #links>
-        <UButton
-          trailing-icon="i-heroicons-arrow-right"
-          color="gray"
-          size="md"
-          variant="solid"
-          to="https://ui.nuxt.com/pro/purchase"
-        >
-          Early access
-        </UButton>
-      </template>
-
-      <template #title>
-        The <span class="text-primary">Building Blocks</span> for<br>Modern Web Apps
-      </template>
-
-      <template #description>
-        Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.
-      </template>
-
-      <MDC
-        :value="pro.code"
-        tag="pre"
-        class="prose prose-primary dark:prose-invert max-w-none -mt-6"
-      />
-    </ULandingHero>
-  </UMain>
-</template>
-
-<script setup>
-const title = 'Nuxt UI Pro: The Building Blocks for Modern Web Apps'
-const description = 'Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, marketing pages, blogs, documentations or entire SaaS products.'
-
-useSeoMeta({
-  titleTemplate: '',
-  title: title,
-  ogTitle: `${title} - Nuxt UI`,
-  description: description,
-  ogDescription: description
-})
-</script>
--- a/docs/pages/roadmap.vue
+++ b/docs/pages/roadmap.vue
@@ -0,0 +1,31 @@
+<script setup>
+const title = 'Roadmap'
+const description = 'Discover our Volta board for @nuxt/ui development status.'
+
+useSeoMeta({
+  title,
+  ogTitle: 'Nuxt UI Roadmap',
+  description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title,
+  description
+})
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
+
+const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>
+
+<template>
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
+    <ClientOnly>
+      <iframe :src="src" width="100%" height="100%" />
+    </ClientOnly>
+  </div>
+</template>
--- a/docs/utils/pro.ts
+++ b/docs/utils/pro.ts
@@ -1,31 +0,0 @@
-export const pro = {
-  code: `
-\`\`\`vue [app.vue]
-<script setup lang="ts">
-const links = [
-  { to: '/', label: 'Home' },
-  { to: '/about', label: 'About' },
-  { to: '/contact', label: 'Contact' }
-]
-</script>
-
-<template>
-  <UHeader :links="links" />
-
-  <UMain>
-    <ULandingHero title="Hello World" />
-
-    <ULandingSection title="Features">
-      <UPageGrid>
-        <ULandingCard title="First Card" />
-        <ULandingCard title="Second Card" />
-        <ULandingCard title="Third Card" />
-      </UPageGrid>
-    </ULandingSection>
-  </UMain>
-
-  <UFooter />
-</template>
-\`\`\`
-  `
-}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,12 +127,15 @@ importers:
      '@iconify-json/heroicons':
        specifier: ^1.1.13
        version: 1.1.13
+      '@iconify-json/logos':
+        specifier: ^1.1.37
+        version: 1.1.37
      '@iconify-json/simple-icons':
        specifier: ^1.1.76
        version: 1.1.76
      '@nuxt/content':
-        specifier: ^2.8.5
-        version: 2.8.5(rollup@3.29.1)(vue@3.3.4)
+        specifier: ^2.9.0
+        version: 2.9.0(nuxt@3.8.0)(rollup@3.29.1)(vue@3.3.4)
      '@nuxt/devtools':
        specifier: ^1.0.0
        version: 1.0.0(nuxt@3.8.0)(rollup@3.29.1)(vite@4.5.0)
@@ -140,17 +143,20 @@ importers:
        specifier: ^0.2.0
        version: 0.2.0(eslint@8.52.0)
      '@nuxt/ui-pro':
-        specifier: npm:@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22
-        version: /@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
+        specifier: ^0.4.1
+        version: 0.4.1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
      '@nuxthq/studio':
-        specifier: ^1.0.2
-        version: 1.0.2(rollup@3.29.1)
+        specifier: ^1.0.3
+        version: 1.0.3(rollup@3.29.1)
      '@nuxtjs/fontaine':
        specifier: ^0.4.1
        version: 0.4.1(rollup@3.29.1)
      '@nuxtjs/google-fonts':
        specifier: ^3.0.2
        version: 3.0.2(rollup@3.29.1)
+      '@nuxtjs/mdc':
+        specifier: ^0.2.6
+        version: 0.2.6(rollup@3.29.1)
      '@nuxtjs/plausible':
        specifier: ^0.2.3
        version: 0.2.3(rollup@3.29.1)
@@ -170,11 +176,11 @@ importers:
        specifier: ^1.0.8
        version: 1.0.8(rollup@3.29.1)
      nuxt-component-meta:
-        specifier: ^0.5.4
-        version: 0.5.4(rollup@3.29.1)
+        specifier: npm:nuxt-component-meta-edge@0.5.5-28315603.0a285c7
+        version: /nuxt-component-meta-edge@0.5.5-28315603.0a285c7(rollup@3.29.1)
      nuxt-og-image:
-        specifier: ^2.1.3
-        version: 2.1.3(rollup@3.29.1)(vue@3.3.4)
+        specifier: ^2.2.3
+        version: 2.2.3(rollup@3.29.1)(vue@3.3.4)
      prettier:
        specifier: ^3.0.3
        version: 3.0.3
@@ -1295,6 +1301,12 @@ packages:
    dependencies:
      '@iconify/types': 2.0.0

+  /@iconify-json/logos@1.1.37:
+    resolution: {integrity: sha512-H2S8frTEznk6paX2kMzeUGn4KSiykghvO0b8UvEDd1fFFzt0WxCXpP1tBv67XaWK99e6JgA34hhv4lRGAm1hJg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
  /@iconify-json/simple-icons@1.1.76:
    resolution: {integrity: sha512-jZEMvkMfD5tTadFJIOIxKE4cTVXslrktWEiMJV6HaABi9qw02zS7bzrllR1YtGPxzniKkq2UVg/dKS6lliIxVA==}
    dependencies:
@@ -1538,15 +1550,17 @@ packages:
      - supports-color
    dev: true

-  /@nuxt/content@2.8.5(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-sWVGoZJOjwEd8v6XYTrHYtQ7c11HR6yK9dcqruf+7WM2WJmwTSeY8B1ir6+9mE1FPQAFnqg26qSkxwafpS9o+g==}
+  /@nuxt/content@2.9.0(nuxt@3.8.0)(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-//mt++/AgOmjT6TpanugNJpJfx6q8g7wV8/vnk7vSSrrgki8tG6jpupuJmxHHB8DcqqTJfuBWFIdaLhv/Z9Gzg==}
    dependencies:
-      '@nuxt/kit': 3.7.4(rollup@3.29.1)
-      '@nuxtjs/mdc': 0.2.1(rollup@3.29.1)
+      '@nuxt/kit': 3.8.0(rollup@3.29.1)
+      '@nuxtjs/mdc': 0.2.6(rollup@3.29.1)
+      '@vueuse/core': 10.5.0(vue@3.3.4)
      '@vueuse/head': 2.0.0(vue@3.3.4)
+      '@vueuse/nuxt': 10.5.0(nuxt@3.8.0)(rollup@3.29.1)(vue@3.3.4)
      consola: 3.2.3
-      defu: 6.1.2
-      destr: 2.0.1
+      defu: 6.1.3
+      destr: 2.0.2
      json5: 2.2.3
      knitwork: 1.0.0
      listhen: 1.5.5
@@ -1555,6 +1569,7 @@ packages:
      micromark: 4.0.0
      micromark-util-sanitize-uri: 2.0.0
      micromark-util-types: 2.0.0
+      minisearch: 6.2.0
      ohash: 1.1.3
      pathe: 1.1.1
      scule: 1.0.0
@@ -1576,8 +1591,10 @@ packages:
      - '@planetscale/database'
      - '@upstash/redis'
      - '@vercel/kv'
+      - '@vue/composition-api'
      - bufferutil
      - idb-keyval
+      - nuxt
      - rollup
      - supports-color
      - utf-8-validate
@@ -1633,7 +1650,7 @@ packages:
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
      birpc: 0.2.14
      consola: 3.2.3
-      destr: 2.0.1
+      destr: 2.0.2
      error-stack-parser-es: 0.1.1
      execa: 7.2.0
      fast-glob: 3.3.1
@@ -1838,7 +1855,7 @@ packages:
      consola: 3.2.3
      create-require: 1.1.1
      defu: 6.1.3
-      destr: 2.0.2
+      destr: 2.0.1
      dotenv: 16.3.1
      git-url-parse: 13.1.0
      is-docker: 3.0.0
@@ -1855,8 +1872,41 @@ packages:
      - supports-color
    dev: true

-  /@nuxt/ui-edge@2.9.0-28303819.ace8fc1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-GrN0ZKCtm838flgZMVg5QiN+5W2L9pCKyTtPlPiGbSYrLqxwQWvkqMlPP2+9RsvVhCAUyUu6ikl6nRh1f2O6QQ==}
+  /@nuxt/ui-pro@0.4.1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-Ue82QTXo0oh5gM/nn3PkCFgiZvtAi40plxs3hiIkHpOijfXU1sLv9As/r2m3d3c6vRLbvBOpb82YuVkt7mi/bw==}
+    dependencies:
+      '@nuxt/ui': 2.10.0(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
+      '@vueuse/core': 10.5.0(vue@3.3.4)
+      defu: 6.1.3
+      nuxt-icon: 0.6.1(rollup@3.29.1)(vue@3.3.4)
+      ofetch: 1.3.3
+      pathe: 1.1.1
+      tailwind-merge: 1.14.0
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - focus-trap
+      - idb-keyval
+      - jwt-decode
+      - nprogress
+      - qrcode
+      - rollup
+      - sortablejs
+      - supports-color
+      - ts-node
+      - universal-cookie
+      - vue
+      - webpack
+    dev: true
+
+  /@nuxt/ui-templates@1.3.1:
+    resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
+
+  /@nuxt/ui@2.10.0(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
+    resolution: {integrity: sha512-pMv0BWWkeUOAJ+YkXr6xirbg2iHXKerIk9hYS7blp0aBehBTBq1gxHdtl+iA2hq9+LFahO6WyA7SJnw3h0thvQ==}
    engines: {node: '>=v16.20.2'}
    dependencies:
      '@egoist/tailwindcss-icons': 1.4.0(tailwindcss@3.3.5)
@@ -1901,39 +1951,6 @@ packages:
      - webpack
    dev: true

-  /@nuxt/ui-pro-edge@0.3.1-28304178.1b14f22(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2):
-    resolution: {integrity: sha512-J2zc5H3UVoIeZQH7j5KSAB4PMXUiYkZ1OaV03dylRZvWkgeUtq9oc2QsC+Wz8QKZh0tLMxbFLrN7TIsJz9tBig==}
-    dependencies:
-      '@nuxt/ui': /@nuxt/ui-edge@2.9.0-28303819.ace8fc1(rollup@3.29.1)(vue@3.3.4)(webpack@5.88.2)
-      '@vueuse/core': 10.5.0(vue@3.3.4)
-      defu: 6.1.3
-      nuxt-icon: 0.6.0(rollup@3.29.1)(vue@3.3.4)
-      ofetch: 1.3.3
-      pathe: 1.1.1
-      tailwind-merge: 1.14.0
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - async-validator
-      - axios
-      - change-case
-      - drauu
-      - focus-trap
-      - idb-keyval
-      - jwt-decode
-      - nprogress
-      - qrcode
-      - rollup
-      - sortablejs
-      - supports-color
-      - ts-node
-      - universal-cookie
-      - vue
-      - webpack
-    dev: true
-
-  /@nuxt/ui-templates@1.3.1:
-    resolution: {integrity: sha512-5gc02Pu1HycOVUWJ8aYsWeeXcSTPe8iX8+KIrhyEtEoOSkY0eMBuo0ssljB8wALuEmepv31DlYe5gpiRwkjESA==}
-
  /@nuxt/vite-builder@3.8.0(eslint@8.52.0)(rollup@3.29.1)(typescript@5.2.2)(vue-tsc@1.8.21)(vue@3.3.4):
    resolution: {integrity: sha512-F9BfH+c/Idp6sBGVHR4QJSuoO42evtE4D0OelD45NgkqVvmBmOawlj0Oz5fDKoV64LDPI2+yE+xnBdQtsNv/VA==}
    engines: {node: ^14.18.0 || >=16.10.0}
@@ -1996,11 +2013,11 @@ packages:
      - vue-tsc
    dev: true

-  /@nuxthq/studio@1.0.2(rollup@3.29.1):
-    resolution: {integrity: sha512-QoF6oYigr6IcHgNeQqAUBmCrSqnuPffoF9Tbg8cToF3oYU7WHkKgYCe+diICFdWuiH/SHTEfSm9kaone/Bp2gw==}
+  /@nuxthq/studio@1.0.3(rollup@3.29.1):
+    resolution: {integrity: sha512-4jHEz53xVj9WDoJdfu8iX/IGcBKm0Z797aDWoZdrTvwg/FSSj+CTnJmlML77574WQoGPoUkQ6pMSM5X/3NOVSg==}
    dependencies:
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
-      defu: 6.1.2
+      defu: 6.1.3
      nuxt-component-meta: 0.5.4(rollup@3.29.1)
      nuxt-config-schema: 0.4.6(rollup@3.29.1)
      socket.io-client: 4.7.2
@@ -2047,16 +2064,16 @@ packages:
      - supports-color
    dev: true

-  /@nuxtjs/mdc@0.2.1(rollup@3.29.1):
-    resolution: {integrity: sha512-14TPZ4p2UcG3IWqdPArx03hsUmWYQBlEYXkfm2Eq5sXu7hAg8UI9wEqZNNadMdnEi/WZvcMNf0xsbBhcRnxqew==}
+  /@nuxtjs/mdc@0.2.6(rollup@3.29.1):
+    resolution: {integrity: sha512-FDjJXfvFsNgtt3lm7mxjPymv5lovdOMS5bHxnAS/Vcoqd8qC4nkiSnKpZD2eLf4UGQKKNOMSn1mlC2viQHu2sg==}
    dependencies:
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
-      '@types/hast': 3.0.1
-      '@types/mdast': 4.0.1
-      '@vue/compiler-core': 3.3.4
+      '@types/hast': 3.0.2
+      '@types/mdast': 4.0.2
+      '@vue/compiler-core': 3.3.7
      consola: 3.2.3
      defu: 6.1.3
-      destr: 2.0.1
+      destr: 2.0.2
      detab: 3.0.2
      github-slugger: 2.0.0
      hast-util-to-string: 3.0.0
@@ -2071,11 +2088,11 @@ packages:
      rehype-sort-attributes: 5.0.0
      remark-emoji: 4.0.0
      remark-gfm: 3.0.1
-      remark-mdc: 2.0.0
+      remark-mdc: 2.1.0
      remark-parse: 10.0.2
      remark-rehype: 10.1.0
      scule: 1.0.0
-      shikiji: 0.6.8
+      shikiji: 0.6.10
      ufo: 1.3.1
      unified: 11.0.3
      unist-builder: 4.0.0
@@ -2441,8 +2458,8 @@ packages:
      semver: 7.5.4
    dev: true

-  /@resvg/resvg-js-android-arm-eabi@2.4.1:
-    resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==}
+  /@resvg/resvg-js-android-arm-eabi@2.6.0:
+    resolution: {integrity: sha512-lJnZ/2P5aMocrFMW7HWhVne5gH82I8xH6zsfH75MYr4+/JOaVcGCTEQ06XFohGMdYRP3v05SSPLPvTM/RHjxfA==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [android]
@@ -2450,8 +2467,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-android-arm64@2.4.1:
-    resolution: {integrity: sha512-/QleoRdPfsEuH9jUjilYcDtKK/BkmWcK+1LXM8L2nsnf/CI8EnFyv7ZzCj4xAIvZGAy9dTYr/5NZBcTwxG2HQg==}
+  /@resvg/resvg-js-android-arm64@2.6.0:
+    resolution: {integrity: sha512-N527f529bjMwYWShZYfBD60dXA4Fux+D695QsHQ93BDYZSHUoOh1CUGUyICevnTxs7VgEl98XpArmUWBZQVMfQ==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [android]
@@ -2459,8 +2476,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-darwin-arm64@2.4.1:
-    resolution: {integrity: sha512-U1oMNhea+kAXgiEXgzo7EbFGCD1Edq5aSlQoe6LMly6UjHzgx2W3N5kEXCwU/CgN5FiQhZr7PlSJSlcr7mdhfg==}
+  /@resvg/resvg-js-darwin-arm64@2.6.0:
+    resolution: {integrity: sha512-MabUKLVayEwlPo0mIqAmMt+qESN8LltCvv5+GLgVga1avpUrkxj/fkU1TKm8kQegutUjbP/B0QuMuUr0uhF8ew==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [darwin]
@@ -2468,8 +2485,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-darwin-x64@2.4.1:
-    resolution: {integrity: sha512-avyVh6DpebBfHHtTQTZYSr6NG1Ur6TEilk1+H0n7V+g4F7x7WPOo8zL00ZhQCeRQ5H4f8WXNWIEKL8fwqcOkYw==}
+  /@resvg/resvg-js-darwin-x64@2.6.0:
+    resolution: {integrity: sha512-zrFetdnSw/suXjmyxSjfDV7i61hahv6DDG6kM7BYN2yJ3Es5+BZtqYZTcIWogPJedYKmzN1YTMWGd/3f0ubFiA==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [darwin]
@@ -2477,8 +2494,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-linux-arm-gnueabihf@2.4.1:
-    resolution: {integrity: sha512-isY/mdKoBWH4VB5v621co+8l101jxxYjuTkwOLsbW+5RK9EbLciPlCB02M99ThAHzI2MYxIUjXNmNgOW8btXvw==}
+  /@resvg/resvg-js-linux-arm-gnueabihf@2.6.0:
+    resolution: {integrity: sha512-sH4gxXt7v7dGwjGyzLwn7SFGvwZG6DQqLaZ11MmzbCwd9Zosy1TnmrMJfn6TJ7RHezmQMgBPi18bl55FZ1AT4A==}
    engines: {node: '>= 10'}
    cpu: [arm]
    os: [linux]
@@ -2486,8 +2503,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-linux-arm64-gnu@2.4.1:
-    resolution: {integrity: sha512-uY5voSCrFI8TH95vIYBm5blpkOtltLxLRODyhKJhGfskOI7XkRw5/t1u0sWAGYD8rRSNX+CA+np86otKjubrNg==}
+  /@resvg/resvg-js-linux-arm64-gnu@2.6.0:
+    resolution: {integrity: sha512-fCyMncqCJtrlANADIduYF4IfnWQ295UKib7DAxFXQhBsM9PLDTpizr0qemZcCNadcwSVHnAIzL4tliZhCM8P6A==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
@@ -2495,8 +2512,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-linux-arm64-musl@2.4.1:
-    resolution: {integrity: sha512-6mT0+JBCsermKMdi/O2mMk3m7SqOjwi9TKAwSngRZ/nQoL3Z0Z5zV+572ztgbWr0GODB422uD8e9R9zzz38dRQ==}
+  /@resvg/resvg-js-linux-arm64-musl@2.6.0:
+    resolution: {integrity: sha512-ouLjTgBQHQyxLht4FdMPTvuY8xzJigM9EM2Tlu0llWkN1mKyTQrvYWi6TA6XnKdzDJHy7ZLpWpjZi7F5+Pg+Vg==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [linux]
@@ -2504,8 +2521,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-linux-x64-gnu@2.4.1:
-    resolution: {integrity: sha512-60KnrscLj6VGhkYOJEmmzPlqqfcw1keDh6U+vMcNDjPhV3B5vRSkpP/D/a8sfokyeh4VEacPSYkWGezvzS2/mg==}
+  /@resvg/resvg-js-linux-x64-gnu@2.6.0:
+    resolution: {integrity: sha512-n3zC8DWsvxC1AwxpKFclIPapDFibs5XdIRoV/mcIlxlh0vseW1F49b97F33BtJQRmlntsqqN6GMMqx8byB7B+Q==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
@@ -2513,8 +2530,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-linux-x64-musl@2.4.1:
-    resolution: {integrity: sha512-0AMyZSICC1D7ge115cOZQW8Pcad6PjWuZkBFF3FJuSxC6Dgok0MQnLTs2MfMdKBlAcwO9dXsf3bv9tJZj8pATA==}
+  /@resvg/resvg-js-linux-x64-musl@2.6.0:
+    resolution: {integrity: sha512-n4tasK1HOlAxdTEROgYA1aCfsEKk0UOFDNd/AQTTZlTmCbHKXPq+O8npaaKlwXquxlVK8vrkcWbksbiGqbCAcw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [linux]
@@ -2522,8 +2539,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-win32-arm64-msvc@2.4.1:
-    resolution: {integrity: sha512-76XDFOFSa3d0QotmcNyChh2xHwk+JTFiEQBVxMlHpHMeq7hNrQJ1IpE1zcHSQvrckvkdfLboKRrlGB86B10Qjw==}
+  /@resvg/resvg-js-win32-arm64-msvc@2.6.0:
+    resolution: {integrity: sha512-X2+EoBJFwDI5LDVb51Sk7ldnVLitMGr9WwU/i21i3fAeAXZb3hM16k67DeTy16OYkT2dk/RfU1tP1wG+rWbz2Q==}
    engines: {node: '>= 10'}
    cpu: [arm64]
    os: [win32]
@@ -2531,8 +2548,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-win32-ia32-msvc@2.4.1:
-    resolution: {integrity: sha512-odyVFGrEWZIzzJ89KdaFtiYWaIJh9hJRW/frcEcG3agJ464VXkN/2oEVF5ulD+5mpGlug9qJg7htzHcKxDN8sg==}
+  /@resvg/resvg-js-win32-ia32-msvc@2.6.0:
+    resolution: {integrity: sha512-L7oevWjQoUgK5W1fCKn0euSVemhDXVhrjtwqpc7MwBKKimYeiOshO1Li1pa8bBt5PESahenhWgdB6lav9O0fEg==}
    engines: {node: '>= 10'}
    cpu: [ia32]
    os: [win32]
@@ -2540,8 +2557,8 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js-win32-x64-msvc@2.4.1:
-    resolution: {integrity: sha512-vY4kTLH2S3bP+puU5x7hlAxHv+ulFgcK6Zn3efKSr0M0KnZ9A3qeAjZteIpkowEFfUeMPNg2dvvoFRJA9zqxSw==}
+  /@resvg/resvg-js-win32-x64-msvc@2.6.0:
+    resolution: {integrity: sha512-8lJlghb+Unki5AyKgsnFbRJwkEj9r1NpwyuBG8yEJiG1W9eEGl03R3I7bsVa3haof/3J1NlWf0rzSa1G++A2iw==}
    engines: {node: '>= 10'}
    cpu: [x64]
    os: [win32]
@@ -2549,26 +2566,26 @@ packages:
    dev: true
    optional: true

-  /@resvg/resvg-js@2.4.1:
-    resolution: {integrity: sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A==}
+  /@resvg/resvg-js@2.6.0:
+    resolution: {integrity: sha512-Tf3YpbBKcQn991KKcw/vg7vZf98v01seSv6CVxZBbRkL/xyjnoYB6KgrFL6zskT1A4dWC/vg77KyNOW+ePaNlA==}
    engines: {node: '>= 10'}
    optionalDependencies:
-      '@resvg/resvg-js-android-arm-eabi': 2.4.1
-      '@resvg/resvg-js-android-arm64': 2.4.1
-      '@resvg/resvg-js-darwin-arm64': 2.4.1
-      '@resvg/resvg-js-darwin-x64': 2.4.1
-      '@resvg/resvg-js-linux-arm-gnueabihf': 2.4.1
-      '@resvg/resvg-js-linux-arm64-gnu': 2.4.1
-      '@resvg/resvg-js-linux-arm64-musl': 2.4.1
-      '@resvg/resvg-js-linux-x64-gnu': 2.4.1
-      '@resvg/resvg-js-linux-x64-musl': 2.4.1
-      '@resvg/resvg-js-win32-arm64-msvc': 2.4.1
-      '@resvg/resvg-js-win32-ia32-msvc': 2.4.1
-      '@resvg/resvg-js-win32-x64-msvc': 2.4.1
+      '@resvg/resvg-js-android-arm-eabi': 2.6.0
+      '@resvg/resvg-js-android-arm64': 2.6.0
+      '@resvg/resvg-js-darwin-arm64': 2.6.0
+      '@resvg/resvg-js-darwin-x64': 2.6.0
+      '@resvg/resvg-js-linux-arm-gnueabihf': 2.6.0
+      '@resvg/resvg-js-linux-arm64-gnu': 2.6.0
+      '@resvg/resvg-js-linux-arm64-musl': 2.6.0
+      '@resvg/resvg-js-linux-x64-gnu': 2.6.0
+      '@resvg/resvg-js-linux-x64-musl': 2.6.0
+      '@resvg/resvg-js-win32-arm64-msvc': 2.6.0
+      '@resvg/resvg-js-win32-ia32-msvc': 2.6.0
+      '@resvg/resvg-js-win32-x64-msvc': 2.6.0
    dev: true

-  /@resvg/resvg-wasm@2.4.1:
-    resolution: {integrity: sha512-yi6R0HyHtsoWTRA06Col4WoDs7SvlXU3DLMNP2bdAgs7HK18dTEVl1weXgxRzi8gwLteGUbIg29zulxIB3GSdg==}
+  /@resvg/resvg-wasm@2.6.0:
+    resolution: {integrity: sha512-iDkBM6Ivex8nULtBu8cX670/lfsGxq8U1cuqE+qS9xFpPQP1enPdVm/33Kq3+B+bAldA+AHNZnCgpmlHo/fZrQ==}
    engines: {node: '>= 10'}
    dev: true

@@ -2607,7 +2624,7 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      commondir: 1.0.1
      estree-walker: 2.0.2
      glob: 8.1.0
@@ -2658,7 +2675,7 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      rollup: 3.29.1
    dev: true

@@ -2684,7 +2701,7 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      '@types/resolve': 1.20.2
      deepmerge: 4.3.1
      is-builtin-module: 3.2.1
@@ -2720,7 +2737,7 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      magic-string: 0.27.0
      rollup: 3.29.1
    dev: true
@@ -3004,6 +3021,15 @@ packages:
      minimatch: 9.0.3
    dev: true

+  /@twemoji/api@14.1.2:
+    resolution: {integrity: sha512-JLuszRq7t+NWJTaNwBD+Hbhf67gzn6jAqhNIDTPndEGT55kHiZTJAYRGCHZB/eA58OGVSp7mIvsJs+F/ZDJanA==}
+    dependencies:
+      fs-extra: 8.1.0
+      jsonfile: 5.0.0
+      twemoji-parser: 14.0.0
+      universalify: 0.1.2
+    dev: true
+
  /@types/chai-subset@1.3.4:
    resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
    dependencies:
@@ -3035,8 +3061,8 @@ packages:
  /@types/estree@1.0.1:
    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}

-  /@types/fs-extra@11.0.2:
-    resolution: {integrity: sha512-c0hrgAOVYr21EX8J0jBMXGLMgJqVf/v6yxi0dLaJboW9aQPh16Id+z6w2Tx1hm+piJOLv8xPfVKZCLfjPw/IMQ==}
+  /@types/fs-extra@11.0.3:
+    resolution: {integrity: sha512-sF59BlXtUdzEAL1u0MSvuzWd7PdZvZEtnaVkzX5mjpdWTJ8brG0jUqve3jPCzSzvAKKMHTG8F8o/WMQLtleZdQ==}
    dependencies:
      '@types/jsonfile': 6.1.1
      '@types/node': 20.6.3
@@ -3048,8 +3074,8 @@ packages:
      '@types/unist': 2.0.8
    dev: true

-  /@types/hast@3.0.1:
-    resolution: {integrity: sha512-hs/iBJx2aydugBQx5ETV3ZgeSS0oIreQrFJ4bjBl0XvM4wAmDjFEALY7p0rTSLt2eL+ibjRAAs9dTPiCLtmbqQ==}
+  /@types/hast@3.0.2:
+    resolution: {integrity: sha512-B5hZHgHsXvfCoO3xgNJvBnX7N8p86TqQeGKXcokW4XXi+qY4vxxPSFYofytvVmpFxzPv7oxDQzjg5Un5m2/xiw==}
    dependencies:
      '@types/unist': 3.0.0
    dev: true
@@ -3089,6 +3115,12 @@ packages:
      '@types/unist': 3.0.0
    dev: true

+  /@types/mdast@4.0.2:
+    resolution: {integrity: sha512-tYR83EignvhYO9iU3kDg8V28M0jqyh9zzp5GV+EO+AYnyUl3P5ltkTeJuTiFZQFz670FSb3EwT/6LQdX+UdKfw==}
+    dependencies:
+      '@types/unist': 3.0.0
+    dev: true
+
  /@types/ms@0.7.31:
    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
    dev: true
@@ -3390,36 +3422,18 @@ packages:
      pretty-format: 29.7.0
    dev: true

-  /@volar/language-core@1.10.1:
-    resolution: {integrity: sha512-JnsM1mIPdfGPxmoOcK1c7HYAsL6YOv0TCJ4aW3AXPZN/Jb4R77epDyMZIVudSGjWMbvv/JfUa+rQ+dGKTmgwBA==}
-    dependencies:
-      '@volar/source-map': 1.10.1
-    dev: true
-
  /@volar/language-core@1.10.5:
    resolution: {integrity: sha512-xD71j4Ee0Ycq8WsiAE6H/aCThGdTobiZZeD+jFD+bvmbopa1Az296pqJysr3Ck8c7n5+GGF+xlKCS3WxRFYgSQ==}
    dependencies:
      '@volar/source-map': 1.10.5
    dev: true

-  /@volar/source-map@1.10.1:
-    resolution: {integrity: sha512-3/S6KQbqa7pGC8CxPrg69qHLpOvkiPHGJtWPkI/1AXCsktkJ6gIk/5z4hyuMp8Anvs6eS/Kvp/GZa3ut3votKA==}
-    dependencies:
-      muggle-string: 0.3.1
-    dev: true
-
  /@volar/source-map@1.10.5:
    resolution: {integrity: sha512-s4kgo66SA1kMzYvF9HFE6Vc1rxtXLUmcLrT2WKnchPDvLne+97Kw+xoR2NxJFmsvHoL18vmu/YGXYcN+Q5re1g==}
    dependencies:
      muggle-string: 0.3.1
    dev: true

-  /@volar/typescript@1.10.1:
-    resolution: {integrity: sha512-+iiO9yUSRHIYjlteT+QcdRq8b44qH19/eiUZtjNtuh6D9ailYM7DVR0zO2sEgJlvCaunw/CF9Ov2KooQBpR4VQ==}
-    dependencies:
-      '@volar/language-core': 1.10.1
-    dev: true
-
  /@volar/typescript@1.10.5:
    resolution: {integrity: sha512-kfDehpeLJku9i1BgsFOYIczPmFFH4herl+GZrLGdvX5urTqeCKsKYlF36iNmFaADzjMb9WlENcUZzPjK8MxNrQ==}
    dependencies:
@@ -3436,7 +3450,7 @@ packages:
        optional: true
    dependencies:
      '@babel/types': 7.23.0
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      '@vue/compiler-sfc': 3.3.4
      ast-kit: 0.11.2(rollup@3.29.1)
      local-pkg: 0.4.3
@@ -3477,6 +3491,15 @@ packages:
      estree-walker: 2.0.2
      source-map-js: 1.0.2

+  /@vue/compiler-core@3.3.7:
+    resolution: {integrity: sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@vue/shared': 3.3.7
+      estree-walker: 2.0.2
+      source-map-js: 1.0.2
+    dev: true
+
  /@vue/compiler-dom@3.3.4:
    resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
    dependencies:
@@ -3494,7 +3517,7 @@ packages:
      '@vue/shared': 3.3.4
      estree-walker: 2.0.2
      magic-string: 0.30.5
-      postcss: 8.4.31
+      postcss: 8.4.30
      source-map-js: 1.0.2

  /@vue/compiler-ssr@3.3.4:
@@ -3526,19 +3549,19 @@ packages:
      vue-template-compiler: 2.7.14
    dev: true

-  /@vue/language-core@1.8.8(typescript@5.2.2):
-    resolution: {integrity: sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==}
+  /@vue/language-core@1.8.22(typescript@5.2.2):
+    resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==}
    peerDependencies:
      typescript: '*'
    peerDependenciesMeta:
      typescript:
        optional: true
    dependencies:
-      '@volar/language-core': 1.10.1
-      '@volar/source-map': 1.10.1
+      '@volar/language-core': 1.10.5
+      '@volar/source-map': 1.10.5
      '@vue/compiler-dom': 3.3.4
-      '@vue/reactivity': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/shared': 3.3.7
+      computeds: 0.0.1
      minimatch: 9.0.3
      muggle-string: 0.3.1
      typescript: 5.2.2
@@ -3584,6 +3607,10 @@ packages:
  /@vue/shared@3.3.4:
    resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}

+  /@vue/shared@3.3.7:
+    resolution: {integrity: sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==}
+    dev: true
+
  /@vueuse/core@10.5.0(vue@3.3.4):
    resolution: {integrity: sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==}
    dependencies:
@@ -4049,7 +4076,7 @@ packages:
    engines: {node: '>=16.14.0'}
    dependencies:
      '@babel/parser': 7.23.0
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      pathe: 1.1.1
    transitivePeerDependencies:
      - rollup
@@ -4060,7 +4087,7 @@ packages:
    engines: {node: '>=16.14.0'}
    dependencies:
      '@babel/parser': 7.23.0
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.1)
+      '@rollup/pluginutils': 5.0.4(rollup@3.29.1)
      pathe: 1.1.1
    transitivePeerDependencies:
      - rollup
@@ -6629,7 +6656,7 @@ packages:
  /hast-util-from-parse5@8.0.1:
    resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      '@types/unist': 3.0.0
      devlop: 1.1.0
      hastscript: 8.0.0
@@ -6642,13 +6669,13 @@ packages:
  /hast-util-heading-rank@3.0.0:
    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
    dev: true

  /hast-util-is-element@3.0.0:
    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
    dev: true

  /hast-util-parse-selector@3.1.1:
@@ -6660,7 +6687,7 @@ packages:
  /hast-util-parse-selector@4.0.0:
    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
    dev: true

  /hast-util-raw@7.2.3:
@@ -6682,7 +6709,7 @@ packages:
  /hast-util-raw@9.0.1:
    resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      '@types/unist': 3.0.0
      '@ungap/structured-clone': 1.2.0
      hast-util-from-parse5: 8.0.1
@@ -6700,7 +6727,7 @@ packages:
  /hast-util-to-html@9.0.0:
    resolution: {integrity: sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      '@types/unist': 3.0.0
      ccount: 2.0.1
      comma-separated-tokens: 2.0.3
@@ -6728,7 +6755,7 @@ packages:
  /hast-util-to-parse5@8.0.0:
    resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      comma-separated-tokens: 2.0.3
      devlop: 1.1.0
      property-information: 6.3.0
@@ -6740,13 +6767,13 @@ packages:
  /hast-util-to-string@3.0.0:
    resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
    dev: true

  /hast-util-whitespace@3.0.0:
    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
    dev: true

  /hastscript@7.2.0:
@@ -6762,7 +6789,7 @@ packages:
  /hastscript@8.0.0:
    resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      comma-separated-tokens: 2.0.3
      hast-util-parse-selector: 4.0.0
      property-information: 6.3.0
@@ -7872,7 +7899,7 @@ packages:
    resolution: {integrity: sha512-C9m5/JqFV1/CMrMFDf1PqmvMc8ohrssmlF5bdgea7nUqqn6D9xzKVTa6DIm0LReCqvEPS35o1UElmb7PmoSfHQ==}
    dependencies:
      estree-walker: 3.0.3
-      magic-string: 0.30.5
+      magic-string: 0.30.3
      mlly: 1.4.2
      type-level-regexp: 0.1.17
      ufo: 1.3.1
@@ -7991,7 +8018,7 @@ packages:
  /mdast-util-find-and-replace@3.0.1:
    resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
    dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
      escape-string-regexp: 5.0.0
      unist-util-is: 6.0.0
      unist-util-visit-parents: 6.0.1
@@ -8019,7 +8046,7 @@ packages:
  /mdast-util-from-markdown@2.0.0:
    resolution: {integrity: sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==}
    dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
      '@types/unist': 3.0.0
      decode-named-character-reference: 1.0.2
      devlop: 1.1.0
@@ -8101,7 +8128,7 @@ packages:
  /mdast-util-phrasing@4.0.0:
    resolution: {integrity: sha512-xadSsJayQIucJ9n053dfQwVu1kuXg7jCTdYsMK8rqzKZh52nLfSH/k0sAxE0u+pj/zKZX+o5wB+ML5mRayOxFA==}
    dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
      unist-util-is: 6.0.0
    dev: true

@@ -8121,8 +8148,8 @@ packages:
  /mdast-util-to-hast@13.0.2:
    resolution: {integrity: sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==}
    dependencies:
-      '@types/hast': 3.0.1
-      '@types/mdast': 4.0.1
+      '@types/hast': 3.0.2
+      '@types/mdast': 4.0.2
      '@ungap/structured-clone': 1.2.0
      devlop: 1.1.0
      micromark-util-sanitize-uri: 2.0.0
@@ -8147,7 +8174,7 @@ packages:
  /mdast-util-to-markdown@2.1.0:
    resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==}
    dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
      '@types/unist': 3.0.0
      longest-streak: 3.1.0
      mdast-util-phrasing: 4.0.0
@@ -8774,6 +8801,10 @@ packages:
    engines: {node: '>=16 || 14 >=14.17'}
    dev: true

+  /minisearch@6.2.0:
+    resolution: {integrity: sha512-BECkorDF1TY2rGKt9XHdSeP9TP29yUbrAaCh/C03wpyf1vx3uYcP/+8XlMcpTkgoU0rBVnHMAOaP83Rc9Tm+TQ==}
+    dev: true
+
  /minizlib@2.1.2:
    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
    engines: {node: '>= 8'}
@@ -9215,13 +9246,25 @@ packages:
      - supports-color
    dev: true

+  /nuxt-component-meta-edge@0.5.5-28315603.0a285c7(rollup@3.29.1):
+    resolution: {integrity: sha512-Hw2ByxuO1Itd7i2AyZ8oJhE+kbHAjI6FccCvJgKP2K/b2TgzfQSecjs5FNPtD1URa/4aCIFB8PVHpdNxoW5Piw==}
+    dependencies:
+      '@nuxt/kit': 3.8.0(rollup@3.29.1)
+      scule: 1.0.0
+      typescript: 5.2.2
+      vue-component-meta: 1.8.22(typescript@5.2.2)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
  /nuxt-component-meta@0.5.4(rollup@3.29.1):
    resolution: {integrity: sha512-0ou1O5Dky/avUAm6XrO4r4aZiRgP3wCwBlOe49FcyVZo0uAULFw8b3j48BvKWzBdOywf8hJEL4V5o7FWnd1E+A==}
    dependencies:
-      '@nuxt/kit': 3.7.4(rollup@3.29.1)
+      '@nuxt/kit': 3.8.0(rollup@3.29.1)
      scule: 1.0.0
      typescript: 5.2.2
-      vue-component-meta: 1.8.8(typescript@5.2.2)
+      vue-component-meta: 1.8.22(typescript@5.2.2)
    transitivePeerDependencies:
      - rollup
      - supports-color
@@ -9240,8 +9283,8 @@ packages:
      - supports-color
    dev: true

-  /nuxt-icon@0.6.0(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-yFhdd1inv8z4soCF8HZphVMn0wJJN+5m+ZHs1QQblrdxXJDV7UuZeTjN6Fy8VDHfWbZJm6coXSQrK483kU+ipA==}
+  /nuxt-icon@0.6.1(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-a4/MEmbP2hXB0sLWBqevC+569FADEMs+VfYJ6nzbktUSJY57/PoHyen0PtqAAkMjGGhHgDVHAcjy5RCJyYZRYg==}
    dependencies:
      '@iconify/vue': 4.1.1(vue@3.3.4)
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
@@ -9251,13 +9294,14 @@ packages:
      - vue
    dev: true

-  /nuxt-og-image@2.1.3(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-ro9DrArtnBZNtITnDLZPrHoyF4KQIYc2tADkZWIdHchY34O5csyCF77kR7dxfvP/1jXrL8kG2HULoNzmS5/uug==}
+  /nuxt-og-image@2.2.3(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-r6EfYcprzndoDIFnfUU+Qq0/iEp5b413LRGehaigTBABRspWzMvI6fqKHlovSbi/k44Y/vWCVUaJQD0gwZ65Wg==}
    dependencies:
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
-      '@resvg/resvg-js': 2.4.1
-      '@resvg/resvg-wasm': 2.4.1
-      '@types/fs-extra': 11.0.2
+      '@resvg/resvg-js': 2.6.0
+      '@resvg/resvg-wasm': 2.6.0
+      '@twemoji/api': 14.1.2
+      '@types/fs-extra': 11.0.3
      birpc: 0.2.14
      chalk: 5.3.0
      chrome-launcher: 1.1.0
@@ -9270,8 +9314,8 @@ packages:
      globby: 13.2.2
      image-size: 1.0.2
      launch-editor: 2.6.1
-      nuxt-site-config: 1.5.4(rollup@3.29.1)(vue@3.3.4)
-      nuxt-site-config-kit: 1.5.4(rollup@3.29.1)(vue@3.3.4)
+      nuxt-site-config: 1.5.5(rollup@3.29.1)(vue@3.3.4)
+      nuxt-site-config-kit: 1.5.5(rollup@3.29.1)(vue@3.3.4)
      nypm: 0.3.3
      ofetch: 1.3.3
      ohash: 1.1.3
@@ -9297,13 +9341,13 @@ packages:
      - vue
    dev: true

-  /nuxt-site-config-kit@1.5.4(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-anTcPXIb5/1S7BP9nce3BU/UgbX38A6mofZ0c+cvni4O512GOx07SWJCpq9GXlS5qInEbg8f5azIEupTD+d+iQ==}
+  /nuxt-site-config-kit@1.5.5(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-87mf+Ij5njs0qmSl/X/fUhfaSe9kf6feulZnrfGqI0yqk7XmcpdiDZl5xLOWaFQI5Ial+eMeIDz86hrKptiLrQ==}
    dependencies:
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
      '@nuxt/schema': 3.8.0(rollup@3.29.1)
      pkg-types: 1.0.3
-      site-config-stack: 1.5.4(vue@3.3.4)
+      site-config-stack: 1.5.5(vue@3.3.4)
      std-env: 3.4.3
      ufo: 1.3.1
    transitivePeerDependencies:
@@ -9312,14 +9356,14 @@ packages:
      - vue
    dev: true

-  /nuxt-site-config@1.5.4(rollup@3.29.1)(vue@3.3.4):
-    resolution: {integrity: sha512-u6N1D+2iAul5fHL0heeMMdvaa/TIqUXA9eNhwbGibc9Tiw+cOals4bFdQYFp6PXcRZrQC81dX27p87qgOa5q+g==}
+  /nuxt-site-config@1.5.5(rollup@3.29.1)(vue@3.3.4):
+    resolution: {integrity: sha512-L1mjCyFvIb0mp7WwTgGngGCN6xlIza52zL/84R7rqY8r6gMkUtcTHH7OUCMO9Sq9bGI70HZLl7hsLuIqle+cWw==}
    dependencies:
      '@nuxt/kit': 3.8.0(rollup@3.29.1)
      '@nuxt/schema': 3.8.0(rollup@3.29.1)
-      nuxt-site-config-kit: 1.5.4(rollup@3.29.1)(vue@3.3.4)
+      nuxt-site-config-kit: 1.5.5(rollup@3.29.1)(vue@3.3.4)
      pathe: 1.1.1
-      site-config-stack: 1.5.4(vue@3.3.4)
+      site-config-stack: 1.5.5(vue@3.3.4)
      ufo: 1.3.1
    transitivePeerDependencies:
      - rollup
@@ -10336,6 +10380,14 @@ packages:
  /postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}

+  /postcss@8.4.30:
+    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
  /postcss@8.4.31:
    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
    engines: {node: ^10 || ^12 || >=14}
@@ -10507,7 +10559,7 @@ packages:
    resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
    dependencies:
      defu: 6.1.3
-      destr: 2.0.1
+      destr: 2.0.2
      flat: 5.0.2

  /rc@1.2.8:
@@ -10647,7 +10699,7 @@ packages:
  /rehype-external-links@3.0.0:
    resolution: {integrity: sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      '@ungap/structured-clone': 1.2.0
      hast-util-is-element: 3.0.0
      is-absolute-url: 4.0.1
@@ -10666,7 +10718,7 @@ packages:
  /rehype-slug@6.0.0:
    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      github-slugger: 2.0.0
      hast-util-heading-rank: 3.0.0
      hast-util-to-string: 3.0.0
@@ -10676,7 +10728,7 @@ packages:
  /rehype-sort-attribute-values@5.0.0:
    resolution: {integrity: sha512-dQdHdCIRnpiU+BkrLSqH+aM4lWJyLqGzv49KvH4gHj+JxYwNqvGhoTXckS3AJu4V9ZutwsTcawP0pC7PhwX0tQ==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      hast-util-is-element: 3.0.0
      unist-util-visit: 5.0.0
    dev: true
@@ -10684,7 +10736,7 @@ packages:
  /rehype-sort-attributes@5.0.0:
    resolution: {integrity: sha512-6tJUH4xHFcdO85CZRwAcEtHNCzjZ9V9S0VZLgo1pzbN04qy8jiVCZ3oAxDmBVG3Rth5b1xFTDet5WG/UYZeJLQ==}
    dependencies:
-      '@types/hast': 3.0.1
+      '@types/hast': 3.0.2
      unist-util-visit: 5.0.0
    dev: true

@@ -10746,10 +10798,10 @@ packages:
      - supports-color
    dev: true

-  /remark-mdc@2.0.0:
-    resolution: {integrity: sha512-zBonqJya1254h84GRLjJc1fU4aXng2cKaie5qk0T1edUIkP4lVY1kJD4TP+uoFaUziTeyR6LSvkmRcHDZiWtoA==}
+  /remark-mdc@2.1.0:
+    resolution: {integrity: sha512-N1jHp5fjzCvY6qXmhfoFOMjCauu6CfNz1q79vihtgwnUrp3/C0e6Nzkzm6QeoFLHhxrTRu0epWi6A3nQUUxOIA==}
    dependencies:
-      '@types/mdast': 4.0.1
+      '@types/mdast': 4.0.2
      '@types/unist': 3.0.0
      flat: 5.0.2
      js-yaml: 4.1.0
@@ -10885,7 +10937,7 @@ packages:
      rollup: ^3.25.0
      typescript: ^4.5 || ^5.0
    dependencies:
-      magic-string: 0.30.5
+      magic-string: 0.30.3
      rollup: 3.29.1
      typescript: 5.2.2
    optionalDependencies:
@@ -11132,8 +11184,8 @@ packages:
    resolution: {integrity: sha512-e+/aueHx0YeIEut6RXC6K8gSf0PykwZiHD7q7AHtpTW8Kd8TpFUIWqTwhAnrGjOyOMyrwv+syr5WPagMpDpVYQ==}
    dev: true

-  /shikiji@0.6.8:
-    resolution: {integrity: sha512-K0axxNAdB9KvLUflU7QoLC7p6i2p1R2MFG0eP+iclbjtuEZqng99jHcg3VJL0GWRO67yozTICnykjo1HjOzdkg==}
+  /shikiji@0.6.10:
+    resolution: {integrity: sha512-WE+A5Y2ntM5hL3iJQujk97qr5Uj7PSIRXpQfrZ6h+JWPXZ8KBEDhFXc4lqNriaRq1WGOVPUT83XMOzmHiH3W8A==}
    dependencies:
      hast-util-to-html: 9.0.0
    dev: true
@@ -11193,8 +11245,8 @@ packages:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
    dev: true

-  /site-config-stack@1.5.4(vue@3.3.4):
-    resolution: {integrity: sha512-VQUGuSSfaqBdaySLFKXj2YS9RCrbMjGcbXV06yOAJr9AygyzapSRNKjglolcRQVxdG8q+iQpW/qQQeN1IvHCeg==}
+  /site-config-stack@1.5.5(vue@3.3.4):
+    resolution: {integrity: sha512-aLSAUOC0RjDvA/EAG8TZUOEGRkgKj5EIUJAFCVViSLZwCQ2VCDCxTjWqdIULkhiB8y9NTGH4+M0iwiLbFfCP+g==}
    peerDependencies:
      vue: ^3
    dependencies:
@@ -12684,7 +12736,7 @@ packages:
      '@types/node': 20.6.3
      esbuild: 0.18.20
      postcss: 8.4.31
-      rollup: 3.29.1
+      rollup: 3.29.4
    optionalDependencies:
      fsevents: 2.3.3
    dev: true
@@ -12800,23 +12852,23 @@ packages:
      ufo: 1.3.1
    dev: true

-  /vue-component-meta@1.8.8(typescript@5.2.2):
-    resolution: {integrity: sha512-iVwH7wGm6VpOAvQoMjFmv8Coe9oV61JqbRkUVx95Xegwb3hEYmltvv4hYvLwUjaev07JRkskPQctyzPBU3YFyQ==}
+  /vue-component-meta@1.8.22(typescript@5.2.2):
+    resolution: {integrity: sha512-xic335E3KOm3uMcg23UDqo0y1XII8PVPjwoIkzi3tjUzP0edM3m9jF8SYevnJLp1NqiZ035iG1N6QMEauSAulA==}
    peerDependencies:
      typescript: '*'
    peerDependenciesMeta:
      typescript:
        optional: true
    dependencies:
-      '@volar/typescript': 1.10.1
-      '@vue/language-core': 1.8.8(typescript@5.2.2)
+      '@volar/typescript': 1.10.5
+      '@vue/language-core': 1.8.22(typescript@5.2.2)
      typesafe-path: 0.2.2
      typescript: 5.2.2
-      vue-component-type-helpers: 1.8.8
+      vue-component-type-helpers: 1.8.22
    dev: true

-  /vue-component-type-helpers@1.8.8:
-    resolution: {integrity: sha512-Ohv9HQY92nSbpReC6WhY0X4YkOszHzwUHaaN/lev5tHQLM1AEw+LrLeB2bIGIyKGDU7ZVrncXcv/oBny4rjbYg==}
+  /vue-component-type-helpers@1.8.22:
+    resolution: {integrity: sha512-LK3wJHs3vJxHG292C8cnsRusgyC5SEZDCzDCD01mdE/AoREFMl2tzLRuzwyuEsOIz13tqgBcnvysN3Lxsa14Fw==}
    dev: true

  /vue-demi@0.14.6(vue@3.3.4):