docus 3.0.0-beta.8 → 3.0.0

package/app/app/error.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{
+  error: NuxtError
+}>()
+
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.',
+})
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UApp>
+    <AppHeader />
+
+    <UError :error="error" />
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>

package/app/app/layouts/docs.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <template #left>
+        <UPageAside>
+          <DocsAsideLeftTop />
+
+          <UContentNavigation
+            highlight
+            variant="link"
+            :navigation="navigation"
+          />
+        </UPageAside>
+      </template>
+
+      <slot />
+    </UPage>
+  </UContainer>
+</template>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+import { findPageHeadline } from '#ui-pro/utils/content'
+
+definePageMeta({
+  layout: 'docs',
+})
+
+const route = useRoute()
+const appConfig = useAppConfig()
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description'],
+  })
+})
+
+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))
+defineOgImageComponent('Docs', {
+  headline: headline.value,
+})
+
+const editLink = computed(() => {
+  return appConfig.github && `${appConfig.github.url}/edit/${appConfig.github.branch}/content/${page.value?.stem}.${page.value?.extension}`
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :headline="headline"
+      :ui="{
+        wrapper: 'flex-row items-center flex-wrap justify-between',
+      }"
+    >
+      <template #links>
+        <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' }"
+          >
+            Edit this page
+          </UButton>
+          or
+          <UButton
+            variant="link"
+            color="neutral"
+            :to="`${appConfig.github.url}/issues/new/choose`"
+            target="_blank"
+            icon="i-lucide-alert-circle"
+            :ui="{ leadingIcon: 'size-4' }"
+          >
+            Report an issue
+          </UButton>
+        </div>
+      </USeparator>
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <UContentToc
+        :title="appConfig.toc?.title || 'Table of Contents'"
+        :links="page.body?.toc?.links"
+      >
+        <template #bottom>
+          <DocsAsideRightBottom />
+        </template>
+      </UContentToc>
+    </template>
+  </UPage>
+</template>

package/app/app/pages/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+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="false"
+  />
+</template>

package/app/content.config.ts

@@ -0,0 +1,31 @@
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    landing: defineCollection({
+      type: 'page',
+      source: {
+        // @ts-expect-error __DOCS_DIR__ is not defined
+        cwd: globalThis.__DOCS_DIR__,
+        include: 'index.md',
+      },
+    }),
+    docs: defineCollection({
+      type: 'page',
+      source: {
+        // @ts-expect-error __DOCS_DIR__ is not defined
+        cwd: globalThis.__DOCS_DIR__,
+        include: '**',
+        exclude: ['index.md'],
+      },
+      schema: z.object({
+        links: z.array(z.object({
+          label: z.string(),
+          icon: z.string(),
+          to: z.string(),
+          target: z.string().optional(),
+        })).optional(),
+      }),
+    }),
+  },
+})

package/app/nuxt.config.ts

@@ -0,0 +1,41 @@
+import { extendViteConfig } from '@nuxt/kit'
+
+// Flag enabled when developing docs theme
+const dev = !!process.env.NUXT_DOCS_DEV
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui-pro',
+    '@nuxt/content',
+    '@nuxt/image',
+    '@nuxtjs/robots',
+    'nuxt-og-image',
+    () => {
+      // Update @nuxt/content optimizeDeps options
+      extendViteConfig((config) => {
+        config.optimizeDeps ||= {}
+        config.optimizeDeps.include ||= []
+        config.optimizeDeps.include.push('@nuxt/content > slugify')
+        config.optimizeDeps.include = config.optimizeDeps.include
+          .map(id => id.replace(/^@nuxt\/content > /, 'docus > @nuxt/content > '))
+      })
+    },
+  ],
+  devtools: {
+    enabled: dev,
+  },
+  css: ['../app/assets/css/main.css'],
+  future: {
+    compatibilityVersion: 4,
+  },
+  nitro: {
+    prerender: {
+      routes: ['/'],
+      crawlLinks: true,
+      failOnError: false,
+    },
+  },
+  icon: {
+    provider: 'iconify',
+  },
+})

package/app/nuxt.schema.ts

@@ -0,0 +1,255 @@
+import { field, group } from '@nuxt/content/preview'
+
+export default defineNuxtSchema({
+  appConfig: {
+    ui: group({
+      title: 'UI',
+      description: 'UI Customization.',
+      icon: 'i-lucide-palette',
+      fields: {
+        colors: group({
+          title: 'Colors',
+          description: 'Manage main colors of your application',
+          icon: 'i-lucide-palette',
+          fields: {
+            primary: field({
+              type: 'string',
+              title: 'Primary',
+              description: 'Primary color of your UI.',
+              icon: 'i-lucide-palette',
+              default: 'green',
+              required: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'],
+            }),
+            neutral: field({
+              type: 'string',
+              title: 'Neutral',
+              description: 'Neutral color of your UI.',
+              icon: 'i-lucide-palette',
+              default: 'slate',
+              required: ['slate', 'gray', 'zinc', 'neutral', 'stone'],
+            }),
+          },
+        }),
+        icons: group({
+          title: 'Icons',
+          description: 'Manage icons used in the application.',
+          icon: 'i-lucide-settings',
+          fields: {
+            search: field({
+              type: 'icon',
+              title: 'Search Bar',
+              description: 'Icon to display in the search bar.',
+              icon: 'i-lucide-search',
+              default: 'i-lucide-search',
+            }),
+            dark: field({
+              type: 'icon',
+              title: 'Dark mode',
+              description: 'Icon of color mode button for dark mode.',
+              icon: 'i-lucide-moon',
+              default: 'i-lucide-moon',
+            }),
+            light: field({
+              type: 'icon',
+              title: 'Light mode',
+              description: 'Icon of color mode button for light mode.',
+              icon: 'i-lucide-sun',
+              default: 'i-lucide-sun',
+            }),
+            external: field({
+              type: 'icon',
+              title: 'External Link',
+              description: 'Icon for external link.',
+              icon: 'i-lucide-external-link',
+              default: 'i-lucide-external-link',
+            }),
+            chevron: field({
+              type: 'icon',
+              title: 'Chevron',
+              description: 'Icon for chevron.',
+              icon: 'i-lucide-chevron-down',
+              default: 'i-lucide-chevron-down',
+            }),
+            hash: field({
+              type: 'icon',
+              title: 'Hash',
+              description: 'Icon for hash anchors.',
+              icon: 'i-lucide-hash',
+              default: 'i-lucide-hash',
+            }),
+          },
+        }),
+      },
+    }),
+    seo: group({
+      title: 'SEO',
+      description: 'SEO configuration.',
+      icon: 'i-lucide-search',
+      fields: {
+        title: field({
+          type: 'string',
+          title: 'Title',
+          description: 'Title to display in the header.',
+          icon: 'i-lucide-type',
+          default: '',
+        }),
+        description: field({
+          type: 'string',
+          title: 'Description',
+          description: 'Description to display in the header.',
+          icon: 'i-lucide-type',
+          default: '',
+        }),
+      },
+    }),
+    header: group({
+      title: 'Header',
+      description: 'Header configuration.',
+      icon: 'i-lucide-layout',
+      fields: {
+        title: field({
+          type: 'string',
+          title: 'Title',
+          description: 'Title to display in the header.',
+          icon: 'i-lucide-type',
+          default: '',
+        }),
+        logo: group({
+          title: 'Logo',
+          description: 'Header logo configuration.',
+          icon: 'i-lucide-image',
+          fields: {
+            light: field({
+              type: 'media',
+              title: 'Light Mode Logo',
+              description: 'Pick an image from your gallery.',
+              icon: 'i-lucide-sun',
+              default: '',
+            }),
+            dark: field({
+              type: 'media',
+              title: 'Dark Mode Logo',
+              description: 'Pick an image from your gallery.',
+              icon: 'i-lucide-moon',
+              default: '',
+            }),
+            alt: field({
+              type: 'string',
+              title: 'Alt',
+              description: 'Alt to display for accessibility.',
+              icon: 'i-lucide-text',
+              default: '',
+            }),
+          },
+        }),
+      },
+    }),
+    socials: field({
+      type: 'object',
+      title: 'Social Networks',
+      description: 'Social links configuration.',
+      icon: 'i-lucide-network',
+      default: {},
+    }),
+    toc: group({
+      title: 'Table of contents',
+      description: 'TOC configuration.',
+      icon: 'i-lucide-list',
+      fields: {
+        title: field({
+          type: 'string',
+          title: 'Title',
+          description: 'Title of the table of contents.',
+          icon: 'i-lucide-heading',
+          default: 'On this page',
+        }),
+        bottom: group({
+          title: 'Bottom',
+          description: 'Bottom section of the table of contents.',
+          icon: 'i-lucide-list',
+          fields: {
+            title: field({
+              type: 'string',
+              title: 'Title',
+              description: 'Title of the bottom section.',
+              icon: 'i-lucide-heading',
+              default: 'Community',
+            }),
+            links: field({
+              type: 'array',
+              title: 'Links',
+              description: 'Links to display in the bottom section.',
+              icon: 'i-lucide-link',
+              default: [],
+            }),
+          },
+        }),
+      },
+    }),
+    github: group({
+      title: 'GitHub',
+      description: 'GitHub configuration.',
+      icon: 'i-lucide-github',
+      fields: {
+        url: field({
+          type: 'string',
+          title: 'URL',
+          description: 'GitHub URL.',
+          icon: 'i-lucide-github',
+          default: '',
+        }),
+      },
+    }),
+  },
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfig {
+    seo: {
+      titleTemplate: string
+      title: string
+      description: string
+    }
+    ui: {
+      colors: {
+        primary: string
+        neutral: string
+      }
+      icons: {
+        search: string
+        dark: string
+        light: string
+        external: string
+        chevron: string
+        hash: string
+      } & Record<string, string>
+    }
+    header: {
+      title: string
+      logo: {
+        light: string
+        dark: string
+        alt: string
+      }
+    }
+    socials: Record<string, string>
+    toc: {
+      title: string
+      bottom: {
+        title: string
+        links: {
+          icon: string
+          label: string
+          to: string
+          target: string
+        }[]
+      }
+    }
+    github: {
+      owner: string
+      name: string
+      url: string
+      branch: string
+    }
+  }
+}

package/app/server/routes/raw/[...slug].md.get.ts

@@ -0,0 +1,24 @@
+import { stringify } from 'minimark/stringify'
+import { withLeadingSlash } from 'ufo'
+
+export default eventHandler(async (event) => {
+  const slug = getRouterParams(event)['slug.md']
+  if (!slug?.endsWith('.md')) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  const path = withLeadingSlash(slug.replace('.md', ''))
+  const page = await queryCollection(event, 'docs').path(path).first()
+  if (!page) {
+    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+  }
+
+  // Add title and description to the top of the page if missing
+  if (page.body.value[0]?.[0] !== 'h1') {
+    page.body.value.unshift(['blockquote', {}, page.description])
+    page.body.value.unshift(['h1', {}, page.title])
+  }
+
+  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
+  return stringify({ ...page.body, type: 'minimark' }, { format: 'markdown/html' })
+})