docus 2.1.0 → 3.0.0-20250612-122343-26b92a7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c)
+Copyright (c) NuxtLabs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,9 +1,33 @@
-<h1>
-  <img src="./.github/banner.png" >
- </h1>
-
- <p>
-  <a href="https://www.npmjs.com/package/docus"><img src="https://badgen.net/npm/dm/docus" alt="Downloads"></a>
-  <a href="https://www.npmjs.com/package/docus"><img src="https://badgen.net/npm/v/docus" alt="Version"></a>
-  <a href="https://www.npmjs.com/package/docus"><img src="https://badgen.net/npm/license/docus" alt="License"></a>
- </p>
+[![docus](https://docus-puce.vercel.app/__og-image__/static/og.png)](https://docus.dev)
+
+# Docus
+
+Documentation Theme and CLI to write beautiful docs with Markdown.
+
+Ship fast, flexible, and SEO-optimized documentation with beautiful design out of the box. Docus brings together the best of the Nuxt ecosystem:
+- [Nuxt 3](https://nuxt.com)
+- [Nuxt Content](https://content.nuxt.com/)
+- [Nuxt UI](https://ui.nuxt.com/)
+- [Nuxt Image](https://image.nuxt.com/)
+- [Nuxt LLMs](https://github.com/nuxtlabs/nuxt-llms)
+- [UnJS ecosystem](https://unjs.io/)
+- [Nuxt Studio](https://content.nuxt.com/studio) 
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+
+- Clone this repository
+- Install the latest LTS version of [Node.js](https://nodejs.org/en/)
+- Install dependencies using `pnpm install`
+- Run prepare command using `pnpm run dev:prepare`
+- Run dev documentation built on top of Docus using `pnpm run dev`
+
+</details>
+
+## License
+
+Published under the [MIT](https://github.com/unjs/undocs/blob/main/LICENSE) license.
+
+Docus v3 has been entirely rewritten from scratch and is inspired and copied from [undocs](https://github.com/unjs/undocs) made by [@pi0](https://github.com/pi0) 💚

package/app/app/app.config.ts

@@ -0,0 +1,33 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'emerald',
+      neutral: 'zinc',
+    },
+  },
+  uiPro: {
+    contentNavigation: {
+      slots: {
+        linkLeadingIcon: 'size-4 mr-1',
+        listWithChildren: 'border-(--ui-bg-elevated)',
+        linkTrailing: 'hidden',
+      },
+      variants: {
+        active: {
+          false: {
+            link: 'text-toned hover:after:bg-accented',
+          },
+        },
+      },
+    },
+    pageLinks: {
+      slots: {
+        linkLeadingIcon: 'size-4',
+        linkLabelExternalIcon: 'size-2.5',
+      },
+    },
+  },
+  toc: {
+    title: 'On this page',
+  },
+})

package/app/app/app.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const { seo } = useAppConfig()
+const site = useSiteConfig()
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+  ],
+  link: [
+    { rel: 'icon', href: '/favicon.ico' },
+  ],
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  titleTemplate: seo.titleTemplate,
+  title: seo.title,
+  description: seo.description,
+  ogSiteName: site.name,
+  twitterCard: 'summary_large_image',
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator color="var(--ui-primary)" />
+
+    <AppHeader />
+
+    <UMain>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>

package/app/app/assets/css/main.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../../../content/**/*";
+@source "../../app.config.ts";

package/app/app/components/IconMenuToggle.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { motion } from 'motion-v'
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const lineVariants = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    opacity: 1,
+  },
+  close: (custom: number) => ({
+    rotate: custom === 1 ? 45 : custom === 3 ? -45 : 0,
+    y: custom === 1 ? 6 : custom === 3 ? -6 : 0,
+    opacity: custom === 2 ? 0 : 1,
+    transition: {
+      type: 'spring',
+      stiffness: 260,
+      damping: 20,
+    },
+  }),
+}
+
+const state = computed(() => {
+  return props.open ? 'close' : 'normal'
+})
+</script>
+
+<template>
+  <UButton
+    size="sm"
+    variant="ghost"
+    color="neutral"
+    class="-me-1.5"
+    square
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="size-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <motion.line
+        x1="4"
+        y1="6"
+        x2="20"
+        y2="6"
+        :variants="lineVariants"
+        :animate="state"
+        :custom="1"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="12"
+        x2="20"
+        y2="12"
+        :variants="lineVariants"
+        :animate="state"
+        :custom="2"
+        class="outline-none"
+      />
+      <motion.line
+        x1="4"
+        y1="18"
+        x2="20"
+        y2="18"
+        :variants="lineVariants"
+        :animate="state"
+        :custom="3"
+        class="outline-none"
+      />
+    </svg>
+  </UButton>
+</template>

package/app/app/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+})
+
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-neutral-900">
+    <svg
+      class="absolute right-0 top-0 opacity-50"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="pl-[100px]">
+      <p
+        v-if="headline"
+        class="uppercase text-[24px] text-emerald-500 mb-4 font-semibold"
+      >
+        {{ headline }}
+      </p>
+      <h1
+        v-if="title"
+        class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center"
+      >
+        <span>{{ title }}</span>
+      </h1>
+      <p
+        v-if="description"
+        class="text-[32px] text-neutral-300 leading-tight w-[700px]"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/app/components/OgImage/OgImageLanding.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+  title: 'title',
+  description: 'description',
+})
+
+const title = computed(() => (props.title || '').slice(0, 60))
+const description = computed(() => (props.description || '').slice(0, 200))
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-neutral-900">
+    <svg
+      class="absolute right-0 top-0 opacity-50 "
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path
+          d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood
+            flood-opacity="0"
+            result="BackgroundImageFix"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="40.5"
+            result="effect1_foregroundBlur_199_94966"
+          />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="flex flex-col justify-center p-8">
+      <div class="flex justify-center mb-8">
+        <AppHeaderLogo white />
+      </div>
+      <h1
+        v-if="title"
+        class="flex justify-center m-0 text-5xl font-semibold mb-4 text-white"
+      >
+        <span>{{ title }}</span>
+      </h1>
+      <p
+        v-if="description"
+        class="text-center text-2xl text-neutral-300 leading-tight"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

package/app/app/components/app/AppFooter.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+
+const links = computed(() => [
+  ...Object.entries(appConfig.socials || {}).map(([key, url]) => ({
+    'icon': `i-simple-icons-${key}`,
+    'to': url,
+    'target': '_blank',
+    'aria-label': `${key} social link`,
+  })),
+  appConfig.github?.url && {
+    'icon': 'i-simple-icons-github',
+    'to': appConfig.github.url,
+    'target': '_blank',
+    'aria-label': 'GitHub repository',
+  },
+].filter(Boolean))
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      <div class="text-sm text-muted">
+        Copyright © {{ new Date().getFullYear() }}
+      </div>
+    </template>
+
+    <template #right>
+      <template v-if="links.length">
+        <UButton
+          v-for="(link, index) of links"
+          :key="index"
+          size="sm"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+      <UColorModeButton />
+    </template>
+  </UFooter>
+</template>

package/app/app/components/app/AppHeader.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const site = useSiteConfig()
+
+const links = computed(() => appConfig.github?.url
+  ? [
+      {
+        'icon': 'i-simple-icons-github',
+        'to': appConfig.github.url,
+        'target': '_blank',
+        'aria-label': 'GitHub',
+      },
+    ]
+  : [])
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: 'flex-1' }"
+    to="/"
+    :title="appConfig.header?.title || site.name"
+  >
+    <AppHeaderCenter />
+
+    <template #title>
+      <AppHeaderLogo class="h-6 w-auto shrink-0" />
+    </template>
+
+    <template #right>
+      <AppHeaderCTA />
+
+      <UContentSearchButton class="lg:hidden" />
+
+      <UColorModeButton />
+
+      <template v-if="links?.length">
+        <UButton
+          v-for="(link, index) of links"
+          :key="index"
+          v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
+        />
+      </template>
+    </template>
+
+    <template #toggle="{ open, toggle }">
+      <IconMenuToggle
+        :open="open"
+        class="lg:hidden"
+        @click="toggle"
+      />
+    </template>
+
+    <template #body>
+      <AppHeaderBody />
+    </template>
+  </UHeader>
+</template>

package/app/app/components/app/AppHeaderBody.vue

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

package/{dist/runtime/app/components/prose/ProseHr.vue → app/app/components/app/AppHeaderCTA.vue}

@@ -1,3 +1,3 @@
 <template>
-  <hr />
+  <div />
 </template>

package/app/app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,6 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="w-full"
+  />
+</template>

package/app/app/components/app/AppHeaderLogo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <UColorModeImage
+    v-if="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :light="appConfig.header?.logo?.light || appConfig.header?.logo?.dark"
+    :dark="appConfig.header?.logo?.dark || appConfig.header?.logo?.light"
+    :alt="appConfig.header?.logo?.alt || appConfig.header?.title"
+    class="h-6 w-auto shrink-0"
+  />
+  <span v-else>
+    {{ appConfig.header?.title || '{appConfig.header.title}' }}
+  </span>
+</template>

package/{dist/runtime/app/components/prose/ProseParagraph.vue → app/app/components/docs/DocsAsideLeftTop.vue}

@@ -1,3 +1,3 @@
 <template>
-  <p><slot /></p>
+  <div />
 </template>

package/app/app/components/docs/DocsAsideRightBottom.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    v-if="appConfig.toc?.bottom?.links?.length"
+    class="hidden lg:block space-y-6"
+  >
+    <USeparator type="dashed" />
+
+    <UPageLinks
+      :title="appConfig.toc?.bottom?.title || 'Links'"
+      :links="appConfig.toc?.bottom?.links"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>

package/app/app/components/docs/DocsPageHeaderLinks.vue

@@ -0,0 +1,91 @@
+<template>
+  <UButtonGroup>
+    <UButton
+      label="Copy page"
+      :icon="copyStatus === 'copied' ? 'i-lucide-copy-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="outline"
+      :loading="copyStatus === 'copying'"
+      size="xs"
+      :ui="{
+        leadingIcon: [copyStatus === 'copied' ? 'text-primary' : 'text-neutral', 'size-3.5'],
+      }"
+      @click="copyPage"
+    />
+    <UDropdownMenu
+      size="sm"
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8,
+      }"
+      :ui="{
+        content: 'w-48',
+      }"
+    >
+      <UButton
+        icon="i-lucide-chevron-down"
+        size="sm"
+        color="neutral"
+        variant="outline"
+      />
+    </UDropdownMenu>
+  </UButtonGroup>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const copyStatus = ref<'idle' | 'copying' | 'copied'>('idle')
+
+const items = [
+  {
+    label: 'Copy Markdown link',
+    icon: 'i-lucide-link',
+    onSelect() {
+      navigator.clipboard.writeText(`${window.location.origin}/raw${route.path}.md`)
+    },
+  },
+  {
+    label: 'View as Markdown',
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    onSelect() {
+      window.open(`${window.location.origin}/raw${route.path}.md`, '_blank')
+    },
+  },
+  {
+    label: 'Open in ChatGPT',
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    onSelect() {
+      window.open(`https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${window.location.origin}/raw${route.path}.md so I can ask questions about it.`)}`, '_blank')
+    },
+  },
+  {
+    label: 'Open in Claude',
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    onSelect() {
+      window.open(`https://claude.ai/new?q=${encodeURIComponent(`Read ${window.location.origin}/raw${route.path}.md so I can ask questions about it.`)}`, '_blank')
+    },
+  },
+]
+
+async function copyPage() {
+  copyStatus.value = 'copying'
+  const markdown = await $fetch<string>(`${window.location.origin}/raw${route.path}.md`)
+  copyToClipboard(markdown)
+  copyStatus.value = 'copied'
+  setTimeout(() => {
+    copyStatus.value = 'idle'
+  }, 2000)
+}
+
+function copyToClipboard(text: string) {
+  // Fix for iOS Safari: https://stackoverflow.com/questions/62327358/javascript-clipboard-api-safari-ios-notallowederror-message
+  setTimeout(async () => {
+    await navigator.clipboard.writeText(text)
+  }, 0)
+}
+</script>

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>