docus 5.6.1 → 5.8.0

package/app/app.vue

@@ -2,6 +2,7 @@
 import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
 import * as nuxtUiLocales from '@nuxt/ui/locale'
 import { transformNavigation } from './utils/navigation'
+import { useSubNavigation } from './composables/useSubNavigation'
 
 const { seo } = useAppConfig()
 const site = useSiteConfig()
@@ -55,6 +56,8 @@ const { data: files } = useLazyAsyncData(`search_${collectionName.value}`, () =>
 })
 
 provide('navigation', navigation)
+
+const { subNavigationMode } = useSubNavigation(navigation)
 </script>
 
 <template>
@@ -62,7 +65,7 @@ provide('navigation', navigation)
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
     <div
-      class="transition-[margin-right] duration-200 ease-linear will-change-[margin-right]"
+      :class="['transition-[margin-right] duration-200 ease-linear will-change-[margin-right]', { 'docus-sub-header': subNavigationMode === 'header' }]"
       :style="{ marginRight: shouldPushContent ? `${assistantPanelWidth}px` : '0' }"
     >
       <AppHeader v-if="$route.meta.header !== false" />
@@ -84,3 +87,12 @@ provide('navigation', navigation)
     </ClientOnly>
   </UApp>
 </template>
+
+<style>
+@media (min-width: 1024px) {
+  .docus-sub-header {
+    /* 64px base header + 48px sub-navigation bar */
+    --ui-header-height: 112px;
+  }
+}
+</style>

package/app/assets/icons/LICENSE

@@ -0,0 +1,14 @@
+Copyright © Nucleo
+
+Version 1.3, January 3, 2024
+
+Nucleo Icons
+
+https://nucleoapp.com/
+
+- Redistribution of icons is prohibited.
+- Icons are restricted for use only within the product they are bundled with.
+
+For more details:
+
+https://nucleoapp.com/license

package/app/assets/icons/ai.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="artificial-intelligence" aria-hidden="true" viewBox="0 0 20 20"><title>artificial-intelligence</title><g fill="currentColor"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="10.5 15 7 5 6 5 2.5 15"/><line x1="9.586" x2="3.414" y1="12.5" y2="12.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="13.5 9 15.5 9 15.5 15"/><line x1="13.5" x2="17.5" y1="15" y2="15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path fill="currentColor" stroke-width="0" d="m17.6527,3.9647l-1.2005-.4503-.4506-1.2005c-.1562-.4185-.8468-.4185-1.0031,0l-.4506,1.2005-1.2005.4503c-.2086.0785-.3474.2783-.3474.5015s.1388.4231.3474.5015l1.2005.4503.4506,1.2005c.0781.2093.2783.3477.5015.3477s.4234-.1385.5015-.3477l.4506-1.2005,1.2005-.4503c.2086-.0785.3474-.2783.3474-.5015s-.1388-.4231-.3474-.5015h0Z"/></g></svg>

package/app/components/LanguageSelect.vue

@@ -43,10 +43,7 @@ function getEmojiFlag(locale: string): string {
 </script>
 
 <template>
-  <UPopover
-    mode="hover"
-    :content="{ align: 'end' }"
-  >
+  <UPopover :content="{ align: 'end' }">
     <UButton
       color="neutral"
       variant="ghost"

package/app/components/OgImage/OgImageDocs.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-
 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))
+const title = (props.title || '').slice(0, 60)
+const description = (props.description || '').slice(0, 200)
 </script>
 
 <template>

package/app/components/OgImage/OgImageLanding.vue

@@ -1,19 +1,37 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
+const props = withDefaults(defineProps<{ title?: string, description?: string }>(), {
   title: 'title',
   description: 'description',
 })
 
-const title = computed(() => (props.title || '').slice(0, 60))
-const description = computed(() => (props.description || '').slice(0, 200))
+const appConfig = useAppConfig()
+const logoPath = appConfig.header?.logo?.dark || appConfig.header?.logo?.light
+
+const logoSvg = await fetchLogoSvg(logoPath)
+
+const title = (props.title || '').slice(0, 60)
+const description = (props.description || '').slice(0, 200)
+
+async function fetchLogoSvg(path?: string): Promise<string> {
+  if (!path) return ''
+  try {
+    // eslint-disable-next-line
+    // @ts-ignore
+    const { url: siteUrl } = useSiteConfig()
+    const url = path.startsWith('http') ? path : `${siteUrl}${path}`
+    const svg = await $fetch<string>(url, { responseType: 'text' })
+    return svg.replace('<svg', '<svg width="100%" height="100%"')
+  }
+  catch {
+    return ''
+  }
+}
 </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 "
+      class="absolute right-0 top-0 opacity-50"
       width="629"
       height="593"
       viewBox="0 0 629 593"
@@ -54,19 +72,24 @@ const description = computed(() => (props.description || '').slice(0, 200))
       </defs>
     </svg>
 
-    <div class="flex flex-col justify-center p-8">
-      <div class="flex justify-center mb-8">
-        <AppHeaderLogo white />
-      </div>
+    <div
+      class="flex flex-col items-center justify-center p-8"
+    >
+      <div
+        v-if="logoSvg"
+        class="flex items-center justify-center mb-10 max-w-[900px]"
+        style="width: 72px; height: 72px;"
+        v-html="logoSvg"
+      />
       <h1
         v-if="title"
-        class="flex justify-center m-0 text-5xl font-semibold mb-4 text-white"
+        class="m-0 text-5xl font-semibold mb-4 text-white text-center"
       >
-        <span>{{ title }}</span>
+        {{ title }}
       </h1>
       <p
         v-if="description"
-        class="text-center text-2xl text-neutral-300 leading-tight"
+        class="text-center text-2xl text-neutral-300 leading-tight max-w-[800px]"
       >
         {{ description }}
       </p>

package/app/components/app/AppFooterRight.vue

@@ -1,20 +1,38 @@
 <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 && appConfig.github.url && {
-    'icon': 'i-simple-icons-github',
-    'to': appConfig.github.url,
-    'target': '_blank',
-    'aria-label': 'GitHub repository',
-  },
-].filter(Boolean))
+interface FooterLink {
+  'icon': string
+  'to': string
+  'target': '_blank'
+  'aria-label': string
+}
+
+const links = computed<FooterLink[]>(() => {
+  const socialLinks = Object.entries(appConfig.socials || {}).flatMap(([key, url]) => {
+    if (typeof url !== 'string' || !url) {
+      return []
+    }
+
+    return [{
+      'icon': `i-simple-icons-${key}`,
+      'to': url,
+      'target': '_blank' as const,
+      'aria-label': `${key} social link`,
+    }]
+  })
+
+  const githubLink = appConfig.github && appConfig.github.url
+    ? [{
+        'icon': 'i-simple-icons-github',
+        'to': appConfig.github.url,
+        'target': '_blank' as const,
+        'aria-label': 'GitHub repository',
+      }]
+    : []
+
+  return [...socialLinks, ...githubLink]
+})
 </script>
 
 <template>

package/app/components/app/AppHeader.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { useDocusI18n } from '../../composables/useDocusI18n'
+import { useSubNavigation } from '~/composables/useSubNavigation'
 
 const appConfig = useAppConfig()
 const site = useSiteConfig()
 
 const { isEnabled: isAssistantEnabled } = useAssistant()
 const { localePath, isEnabled, locales } = useDocusI18n()
+const { subNavigationMode } = useSubNavigation()
 
 const links = computed(() => appConfig.github && appConfig.github.url
   ? [
@@ -22,6 +24,7 @@ const links = computed(() => appConfig.github && appConfig.github.url
 <template>
   <UHeader
     :ui="{ center: 'flex-1' }"
+    :class="{ 'flex flex-col': subNavigationMode === 'header' }"
     :to="localePath('/')"
     :title="appConfig.header?.title || site.name"
   >
@@ -83,5 +86,12 @@ const links = computed(() => appConfig.github && appConfig.github.url
     <template #body>
       <AppHeaderBody />
     </template>
+
+    <template
+      v-if="subNavigationMode === 'header'"
+      #bottom
+    >
+      <AppHeaderBottom />
+    </template>
   </UHeader>
 </template>

package/app/components/app/AppHeaderBottom.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useSubNavigation } from '~/composables/useSubNavigation'
+
+const { sections } = useSubNavigation()
+</script>
+
+<template>
+  <USeparator class="hidden lg:flex" />
+
+  <UContainer class="hidden lg:flex items-center justify-between">
+    <UNavigationMenu
+      :items="sections"
+      variant="pill"
+      highlight
+      class="-mx-2.5 -mb-px"
+    />
+
+    <AppHeaderBottomRight />
+  </UContainer>
+</template>

package/app/components/app/AppHeaderBottomRight.vue

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

package/app/components/docs/DocsAsideLeftBody.vue

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

package/app/components/docs/DocsAsideLeftTop.vue

@@ -1,3 +1,20 @@
+<script setup lang="ts">
+import { useSubNavigation } from '~/composables/useSubNavigation'
+
+const { subNavigationMode, sections } = useSubNavigation()
+</script>
+
 <template>
-  <div />
+  <div
+    v-if="subNavigationMode === 'aside'"
+    class="mb-2"
+  >
+    <UPageAnchors :links="sections" />
+    <USeparator
+      type="dashed"
+      class="my-4"
+    />
+  </div>
+
+  <div v-else />
 </template>

package/app/components/docs/DocsAsideMobileBar.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { useSubNavigation } from '~/composables/useSubNavigation'
+import type { ContentTocLink } from '@nuxt/ui'
+
+defineProps<{
+  links?: ContentTocLink[]
+}>()
+
+const { subNavigationMode, sidebarNavigation, currentSection } = useSubNavigation()
+const { t } = useDocusI18n()
+
+const menuDrawerOpen = ref(false)
+const tocDrawerOpen = ref(false)
+</script>
+
+<template>
+  <div
+    v-if="subNavigationMode"
+    class="lg:hidden sticky top-(--ui-header-height) z-10 bg-default/75 backdrop-blur -mx-4 p-2 border-b border-dashed border-default flex justify-between"
+  >
+    <UDrawer
+      v-model:open="menuDrawerOpen"
+      direction="left"
+      :title="currentSection?.title"
+      :handle="false"
+      inset
+      side="left"
+      :ui="{ content: 'w-full max-w-2/3' }"
+    >
+      <UButton
+        :label="t('docs.menu')"
+        icon="i-lucide-text-align-start"
+        color="neutral"
+        variant="link"
+        size="xs"
+        :aria-label="t('docs.menu')"
+      />
+
+      <template #body>
+        <UContentNavigation
+          :navigation="sidebarNavigation"
+          default-open
+          trailing-icon="i-lucide-chevron-right"
+          :ui="{ linkTrailingIcon: 'group-data-[state=open]:rotate-90' }"
+          highlight
+        />
+      </template>
+    </UDrawer>
+
+    <UDrawer
+      v-model:open="tocDrawerOpen"
+      direction="right"
+      :handle="false"
+      inset
+      side="right"
+      no-body-styles
+      :ui="{ content: 'w-full max-w-2/3' }"
+    >
+      <UButton
+        :label="t('docs.toc')"
+        trailing-icon="i-lucide-chevron-right"
+        color="neutral"
+        variant="link"
+        size="xs"
+        :aria-label="t('docs.toc')"
+      />
+
+      <template #body>
+        <UContentToc
+          v-if="links?.length"
+          :links="links"
+          :open="true"
+          default-open
+          :ui="{
+            root: '!mx-0 !px-1 top-0 overflow-visible',
+            container: '!pt-0 border-b-0',
+            trailingIcon: 'hidden',
+            bottom: 'flex flex-col',
+          }"
+        >
+          <template #bottom>
+            <DocsAsideRightBottom />
+          </template>
+        </UContentToc>
+      </template>
+    </UDrawer>
+  </div>
+</template>

package/app/components/docs/DocsAsideRight.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useSubNavigation } from '~/composables/useSubNavigation'
+import type { DocsCollectionItem } from '@nuxt/content'
+
+const props = defineProps<{
+  page?: DocsCollectionItem | null
+}>()
+
+const links = computed(() => props.page?.body?.toc?.links || [])
+
+const { shouldPushContent: shouldHideToc } = useAssistant()
+const { subNavigationMode } = useSubNavigation()
+const appConfig = useAppConfig()
+const { t } = useDocusI18n()
+</script>
+
+<template>
+  <div>
+    <UContentToc
+      v-if="links.length && !shouldHideToc"
+      highlight
+      :title="appConfig.toc?.title || t('docs.toc')"
+      :links="links"
+      :class="{ 'hidden lg:block': subNavigationMode }"
+    >
+      <template #bottom>
+        <DocsAsideRightBottom />
+      </template>
+    </UContentToc>
+
+    <DocsAsideMobileBar :links="links" />
+  </div>
+</template>

package/app/components/docs/DocsAsideRightBottom.vue

@@ -16,7 +16,7 @@ const explainIcon = computed(() => appConfig.assistant?.icons?.explain || 'i-luc
 <template>
   <div
     v-if="appConfig.toc?.bottom?.links?.length || showExplainWithAi"
-    class="hidden lg:block space-y-6"
+    class="space-y-6"
   >
     <USeparator type="dashed" />
 

package/app/composables/useDocusI18n.ts

@@ -1,12 +1,27 @@
+import { useNuxtApp, useRuntimeConfig } from '#imports'
 import type { LocaleObject } from '@nuxtjs/i18n'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+type DocusNuxtApp = ReturnType<typeof useNuxtApp> & {
+  $i18n?: {
+    locale: Ref<string>
+    t: (key: string) => string
+  }
+  $locale?: string
+  $localeMessages?: Record<string, unknown>
+  $localePath?: (path: string) => string
+  $switchLocalePath?: (locale?: string) => string
+}
 
 export const useDocusI18n = () => {
   const config = useRuntimeConfig().public
+  const nuxtApp = useNuxtApp() as DocusNuxtApp
   const isEnabled = ref(!!config.i18n)
 
   if (!isEnabled.value) {
-    const locale = useNuxtApp().$locale as string
-    const localeMessages = useNuxtApp().$localeMessages as Record<string, unknown>
+    const locale = nuxtApp.$locale || 'en'
+    const localeMessages = nuxtApp.$localeMessages || {}
 
     return {
       isEnabled,
@@ -21,7 +36,8 @@ export const useDocusI18n = () => {
     }
   }
 
-  const { locale, t } = useI18n()
+  const locale = nuxtApp.$i18n?.locale || ref('en')
+  const t = nuxtApp.$i18n?.t || ((key: string) => key)
   const filteredLocales = (config.docus as { filteredLocales: LocaleObject<string>[] })?.filteredLocales || []
 
   return {
@@ -29,7 +45,7 @@ export const useDocusI18n = () => {
     locale,
     locales: filteredLocales,
     t,
-    localePath: useLocalePath(),
-    switchLocalePath: useSwitchLocalePath(),
+    localePath: nuxtApp.$localePath || ((path: string) => path),
+    switchLocalePath: nuxtApp.$switchLocalePath || (() => ''),
   }
 }

package/app/composables/useLogoAssets.ts

@@ -65,7 +65,7 @@ function triggerLinkDownload(url: string, filename: string) {
 
 export const useLogoAssets = () => {
   const appConfig = useAppConfig()
-  const colorMode = useColorMode()
+  const colorMode = useColorMode() as { value: string, forced?: boolean }
   const toast = useToast()
   const { t } = useDocusI18n()
 

package/app/composables/useSubNavigation.ts

@@ -0,0 +1,55 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+function getFirstPagePath(item: ContentNavigationItem): string {
+  let current = item
+  while (current.children?.length) {
+    current = current.children[0]!
+  }
+  return current.path
+}
+
+export function useSubNavigation(providedNavigation?: Ref<ContentNavigationItem[] | null | undefined>) {
+  const route = useRoute()
+  const appConfig = useAppConfig()
+  const navigation = providedNavigation ?? inject<Ref<ContentNavigationItem[]>>('navigation')
+
+  const isDocsPage = computed(() => route.meta.layout === 'docs')
+
+  const subNavigationMode = computed(() => {
+    if (!isDocsPage.value) return undefined
+    return (appConfig.navigation as { sub?: 'header' | 'aside' } | undefined)?.sub
+  })
+
+  const currentSection = computed(() => {
+    if (!subNavigationMode.value || !navigation?.value) return undefined
+    return navigation.value.find(item =>
+      route.path === item.path || route.path.startsWith(item.path + '/'),
+    )
+  })
+
+  const sections = computed(() => {
+    if (!subNavigationMode.value || !navigation?.value) return []
+    return navigation.value
+      .filter(item => item.children?.length)
+      .map(item => ({
+        label: item.title,
+        icon: item.icon as string | undefined,
+        to: getFirstPagePath(item),
+        active: route.path === item.path || route.path.startsWith(item.path + '/'),
+      }))
+  })
+
+  const sidebarNavigation = computed(() => {
+    if (subNavigationMode.value && currentSection.value) {
+      return currentSection.value.children || []
+    }
+    return navigation?.value || []
+  })
+
+  return {
+    subNavigationMode,
+    sections,
+    currentSection,
+    sidebarNavigation,
+  }
+}

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

@@ -131,19 +131,10 @@ addPrerenderPath(`/raw${route.path}.md`)
       <UContentSurround :surround="surround" />
     </UPageBody>
 
-    <template
-      v-if="page?.body?.toc?.links?.length && !shouldHideToc"
-      #right
-    >
-      <UContentToc
-        highlight
-        :title="appConfig.toc?.title || t('docs.toc')"
-        :links="page.body?.toc?.links"
-      >
-        <template #bottom>
-          <DocsAsideRightBottom />
-        </template>
-      </UContentToc>
+    <template #right>
+      <DocsAsideRight
+        :page="page"
+      />
     </template>
   </UPage>
 </template>

package/i18n/locales/ar.json

@@ -16,6 +16,7 @@
     },
     "links": "المجتمع",
     "toc": "في هذه الصفحة",
+    "menu": "قائمة",
     "report": "الإبلاغ عن مشكلة",
     "edit": "تحرير هذه الصفحة"
   },

package/i18n/locales/be.json

@@ -16,6 +16,7 @@
     },
     "links": "Супольнасць",
     "toc": "На гэтай старонцы",
+    "menu": "Меню",
     "report": "Паведаміць пра праблему",
     "edit": "Рэдагаваць гэтую старонку"
   },

package/i18n/locales/bg.json

@@ -16,6 +16,7 @@
     },
     "links": "Общност",
     "toc": "На тази страница",
+    "menu": "Меню",
     "report": "Докладване на проблем",
     "edit": "Редактиране на тази страница"
   },

package/i18n/locales/bn.json

@@ -16,6 +16,7 @@
     },
     "links": "কমিউনিটি",
     "toc": "এই পেজে",
+    "menu": "মেনু",
     "report": "সমস্যা রিপোর্ট করুন",
     "edit": "এই পেজ সম্পাদনা করুন"
   },

package/i18n/locales/ca.json

@@ -16,6 +16,7 @@
     },
     "links": "Comunitat",
     "toc": "En aquesta pàgina",
+    "menu": "Menú",
     "report": "Informar d'un problema",
     "edit": "Editar aquesta pàgina"
   },

package/i18n/locales/ckb.json

@@ -12,6 +12,7 @@
     },
     "links": "کۆمەڵگا",
     "toc": "لەم پەڕەدا",
+    "menu": "مینیو",
     "report": "ڕاپۆرتکردنی کێشە",
     "edit": "دەستکاریکردنی ئەم پەڕەیە"
   },

package/i18n/locales/cs.json

@@ -16,6 +16,7 @@
     },
     "links": "Komunita",
     "toc": "Na této stránce",
+    "menu": "Nabídka",
     "report": "Nahlásit problém",
     "edit": "Upravit tuto stránku"
   },

package/i18n/locales/da.json

@@ -16,6 +16,7 @@
     },
     "links": "Fællesskab",
     "toc": "På denne side",
+    "menu": "Menu",
     "report": "Rapporter et problem",
     "edit": "Rediger denne side"
   },