fix(temp): prose components not being loaded

Author: sandros94

app/pages/[[lang]]/[...slug].vue

@@ -0,0 +1,156 @@
+<!-- TODO: remove this once https://github.com/nuxtlabs/docus/pull/1174 gets merged -->
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+import type { ContentNavigationItem, Collections, DocsEnCollectionItem } from '@nuxt/content'
+import { findPageHeadline } from '@nuxt/content/utils'
+
+const addPrerenderPath = (path: string) => {
+  const event = useRequestEvent()
+  if (event) {
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [
+        event.node.res.getHeader('x-nitro-prerender'),
+        path,
+      ].filter(Boolean).join(','),
+    )
+  }
+}
+
+definePageMeta({
+  layout: 'docs',
+})
+
+const route = useRoute()
+const { locale, isEnabled, t } = useDocusI18n()
+const appConfig = useAppConfig()
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
+
+const [{ data: page }, { data: surround }] = await Promise.all([
+  useAsyncData(kebabCase(route.path), () => queryCollection(collectionName.value as keyof Collections).path(route.path).first() as Promise<DocsEnCollectionItem>),
+  useAsyncData(`${kebabCase(route.path)}-surround`, () => {
+    return queryCollectionItemSurroundings(collectionName.value as keyof Collections, route.path, {
+      fields: ['description'],
+    })
+  }),
+])
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+if (page.value.layout) {
+  setPageLayout(page.value.layout as never)
+}
+
+// Add the page path to the prerender list
+addPrerenderPath(`/raw${route.path}.md`)
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+})
+
+const headline = computed(() => findPageHeadline(navigation?.value, page.value?.path))
+defineOgImageComponent('Docs', {
+  headline: headline.value,
+})
+
+const editLink = computed(() => {
+  if (!appConfig.github) {
+    return
+  }
+
+  return [
+    appConfig.github.url,
+    'edit',
+    appConfig.github.branch,
+    appConfig.github.rootDir,
+    'content',
+    `${page.value?.stem}.${page.value?.extension}`,
+  ].filter(Boolean).join('/')
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :headline="headline"
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between',
+      }"
+    >
+      <template #links>
+        <UButton
+          v-for="(link, index) in page.links"
+          :key="index"
+          size="sm"
+          v-bind="link"
+        />
+
+        <DocsPageHeaderLinks />
+      </template>
+    </UPageHeader>
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+      />
+
+      <USeparator>
+        <div
+          v-if="editLink"
+          class="flex items-center gap-2 text-sm text-muted"
+        >
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="editLink"
+            target="_blank"
+            icon="i-lucide-pen"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            {{ t('docs.edit') }}
+          </UButton>
+          <span>{{ t('common.or') }}</span>
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="`${appConfig.github.url}/issues/new/choose`"
+            target="_blank"
+            icon="i-lucide-alert-circle"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            {{ t('docs.report') }}
+          </UButton>
+        </div>
+      </USeparator>
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <UContentToc
+        highlight
+        :title="appConfig.toc?.title || t('docs.toc')"
+        :links="page.body?.toc?.links"
+      >
+        <template #bottom>
+          <DocsAsideRightBottom />
+        </template>
+      </UContentToc>
+    </template>
+  </UPage>
+</template>

app/pages/[[lang]]/index.vue

@@ -0,0 +1,48 @@
+<!-- TODO: remove this once https://github.com/nuxtlabs/docus/pull/1174 gets merged -->
+<script setup lang="ts">
+import type { Collections } from '@nuxt/content'
+
+const route = useRoute()
+const { locale, isEnabled } = useDocusI18n()
+
+// Dynamic collection name based on i18n status
+const collectionName = computed(() => isEnabled.value ? `landing_${locale.value}` : 'landing')
+
+const { data: page } = await useAsyncData(collectionName.value, () => queryCollection(collectionName.value as keyof Collections).path(route.path).first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+// Reconsider it once this is implemented: https://github.com/nuxt/content/issues/3419
+const prose = page.value.meta?.prose as boolean
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  description,
+  ogTitle: title,
+  ogDescription: description,
+})
+
+if (page.value?.seo?.ogImage) {
+  useSeoMeta({
+    ogImage: page.value.seo.ogImage,
+    twitterImage: page.value.seo.ogImage,
+  })
+}
+else {
+  defineOgImageComponent('Landing', {
+    title,
+    description,
+  })
+}
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+    :prose="prose"
+  />
+</template>