diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue index 3458f9d4..ed081833 100644 --- a/docs/app/components/content/ComponentCode.vue +++ b/docs/app/components/content/ComponentCode.vue @@ -84,7 +84,7 @@ const props = defineProps<{ const route = useRoute() const { $prettier } = useNuxtApp() -const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '') +const camelName = camelCase(props.slug ?? route.path.split('/').pop() ?? '') const name = `${props.prose ? 'Prose' : 'U'}${upperFirst(camelName)}` const component = defineAsyncComponent(() => { if (props.pro) { diff --git a/docs/app/components/content/ComponentEmits.vue b/docs/app/components/content/ComponentEmits.vue index 359b795b..8dc63f3d 100644 --- a/docs/app/components/content/ComponentEmits.vue +++ b/docs/app/components/content/ComponentEmits.vue @@ -7,7 +7,7 @@ const props = defineProps<{ const route = useRoute() -const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '') +const camelName = camelCase(route.path.split('/').pop() ?? '') const name = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}` const meta = await fetchComponentMeta(name as any) diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue index b39c66b0..5bcb2bb1 100644 --- a/docs/app/components/content/ComponentProps.vue +++ b/docs/app/components/content/ComponentProps.vue @@ -34,7 +34,7 @@ const props = withDefaults(defineProps<{ const route = useRoute() -const camelName = camelCase(props.name ?? route.params.slug?.[route.params.slug.length - 1] ?? '') +const camelName = camelCase(props.name ?? route.path.split('/').pop() ?? '') const componentName = props.prose ? `Prose${upperFirst(camelName)}` : `U${upperFirst(camelName)}` const componentTheme = ((props.pro ? props.prose ? themePro.prose : themePro : theme) as any)[camelName] diff --git a/docs/app/components/content/ComponentSlots.vue b/docs/app/components/content/ComponentSlots.vue index d74211e6..feaa80ff 100644 --- a/docs/app/components/content/ComponentSlots.vue +++ b/docs/app/components/content/ComponentSlots.vue @@ -8,7 +8,7 @@ const props = defineProps<{ const route = useRoute() -const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '') +const camelName = camelCase(props.slug ?? route.path.split('/').pop() ?? '') const name = `${props.prose ? 'Prose' : 'U'}${upperFirst(camelName)}` const meta = await fetchComponentMeta(name as any) diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue index 07d0c16f..6a092490 100644 --- a/docs/app/components/content/ComponentTheme.vue +++ b/docs/app/components/content/ComponentTheme.vue @@ -15,7 +15,7 @@ const props = defineProps<{ const route = useRoute() const { framework } = useSharedData() -const name = props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '' +const name = props.slug ?? route.path.split('/').pop() ?? '' const camelName = camelCase(name) const strippedCompoundVariants = ref(false) diff --git a/docs/app/components/og-image/OgImageComponent.vue b/docs/app/components/og-image/OgImageComponent.vue new file mode 100644 index 00000000..1c8c8497 --- /dev/null +++ b/docs/app/components/og-image/OgImageComponent.vue @@ -0,0 +1,43 @@ + + + diff --git a/docs/app/components/og-image/OgImageDocs.vue b/docs/app/components/og-image/OgImageDocs.vue index f9f31bfd..5a245fca 100644 --- a/docs/app/components/og-image/OgImageDocs.vue +++ b/docs/app/components/og-image/OgImageDocs.vue @@ -1,190 +1,64 @@ diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue index f941bb37..74a1aaa0 100644 --- a/docs/app/pages/[...slug].vue +++ b/docs/app/pages/[...slug].vue @@ -72,9 +72,20 @@ useSeoMeta({ ogDescription: page.value.description }) -defineOgImageComponent('Docs', { - headline: breadcrumb.value.map(item => item.label).join(' > ') -}) +if (route.path.startsWith('/components')) { + defineOgImageComponent('OgImageComponent', { + title: page.value.title, + description: page.value.description, + component: (route.params.slug as string[]).pop() as string, + module: page.value.module + }) +} else { + defineOgImageComponent('Docs', { + headline: breadcrumb.value?.[breadcrumb.value.length - 1]?.label || 'Nuxt UI', + framework: page.value?.framework, + module: page.value.module + }) +} const communityLinks = computed(() => [{ icon: 'i-lucide-file-pen', diff --git a/docs/app/pages/components.vue b/docs/app/pages/components.vue index 25495ebd..b2d426e2 100644 --- a/docs/app/pages/components.vue +++ b/docs/app/pages/components.vue @@ -1,4 +1,8 @@