@vkuttyp/docus 5.4.6

package/app/components/app/AppHeaderCTA.vue

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

package/app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,10 @@
+<template>
+  <UContentSearchButton
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{
+      leadingIcon: 'size-4 mr-1',
+    }"
+  />
+</template>

package/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/app/components/docs/DocsAsideLeftBody.vue

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

package/app/components/docs/DocsAsideLeftTop.vue

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

package/app/components/docs/DocsAsideRightBottom.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const { t } = useDocusI18n()
+</script>
+
+<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 || t('docs.links')"
+      :links="appConfig.toc?.bottom?.links"
+    />
+  </div>
+</template>

package/app/components/docs/DocsPageHeaderLinks.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { useRuntimeConfig } from '#imports'
+
+const route = useRoute()
+const toast = useToast()
+const appBaseURL = useRuntimeConfig().app?.baseURL || '/'
+
+const { copy, copied } = useClipboard()
+const { t } = useDocusI18n()
+
+const markdownLink = computed(() => `${window?.location?.origin}${appBaseURL}raw${route.path}.md`)
+const items = [
+  [{
+    label: t('docs.copy.link'),
+    icon: 'i-lucide-link',
+    onSelect() {
+      copy(markdownLink.value)
+    },
+  },
+  {
+    label: t('docs.copy.view'),
+    icon: 'i-simple-icons:markdown',
+    target: '_blank',
+    to: markdownLink.value,
+  },
+  {
+    label: t('docs.copy.gpt'),
+    icon: 'i-simple-icons:openai',
+    target: '_blank',
+    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+  },
+  {
+    label: t('docs.copy.claude'),
+    icon: 'i-simple-icons:anthropic',
+    target: '_blank',
+    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${markdownLink.value} so I can ask questions about it.`)}`,
+  }],
+  [
+    {
+      label: 'Copy MCP Server URL',
+      icon: 'i-lucide-link',
+      onSelect() {
+        copy(`${window?.location?.origin}${appBaseURL}mcp`)
+        toast.add({
+          title: 'Copied to clipboard',
+          icon: 'i-lucide-check-circle',
+        })
+      },
+    },
+    {
+      label: 'Add MCP Server',
+      icon: 'i-simple-icons:cursor',
+      target: '_blank',
+      to: `/mcp/deeplink`,
+    },
+  ],
+]
+
+async function copyPage() {
+  const page = await $fetch<string>(`/raw${route.path}.md`)
+  copy(page)
+}
+</script>
+
+<template>
+  <UFieldGroup size="sm">
+    <UButton
+      :label="t('docs.copy.page')"
+      :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+      color="neutral"
+      variant="soft"
+      :ui="{
+        leadingIcon: 'text-neutral size-3.5',
+      }"
+      @click="copyPage"
+    />
+
+    <UDropdownMenu
+      size="sm"
+      :items="items"
+      :content="{
+        align: 'end',
+        side: 'bottom',
+        sideOffset: 8,
+      }"
+    >
+      <UButton
+        icon="i-lucide-chevron-down"
+        color="neutral"
+        variant="soft"
+        class="border-l border-muted"
+      />
+    </UDropdownMenu>
+  </UFieldGroup>
+</template>

package/app/composables/useDocusI18n.ts

@@ -0,0 +1,35 @@
+import type { LocaleObject } from '@nuxtjs/i18n'
+
+export const useDocusI18n = () => {
+  const config = useRuntimeConfig().public
+  const isEnabled = ref(!!config.i18n)
+
+  if (!isEnabled.value) {
+    const locale = useNuxtApp().$locale as string
+    const localeMessages = useNuxtApp().$localeMessages as Record<string, unknown>
+
+    return {
+      isEnabled,
+      locale: ref(locale),
+      locales: [],
+      localePath: (path: string) => path,
+      switchLocalePath: () => {},
+      t: (key: string): string => {
+        const path = key.split('.')
+        return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], localeMessages) as string
+      },
+    }
+  }
+
+  const { locale, t } = useI18n()
+  const filteredLocales = (config.docus as { filteredLocales: LocaleObject<string>[] })?.filteredLocales || []
+
+  return {
+    isEnabled,
+    locale,
+    locales: filteredLocales,
+    t,
+    localePath: useLocalePath(),
+    switchLocalePath: useSwitchLocalePath(),
+  }
+}

package/app/error.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
+import * as nuxtUiLocales from '@nuxt/ui/locale'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
+
+const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
+const lang = computed(() => nuxtUiLocale.value.code)
+const dir = computed(() => nuxtUiLocale.value.dir)
+
+useHead({
+  htmlAttrs: {
+    lang,
+    dir,
+  },
+})
+
+const localizedError = computed(() => {
+  return {
+    ...props.error,
+    statusMessage: t('common.error.title'),
+    message: t('common.error.description'),
+  }
+})
+
+useSeoMeta({
+  title: () => t('common.error.title'),
+  description: () => t('common.error.description'),
+})
+
+if (isEnabled.value) {
+  const route = useRoute()
+  const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!
+  onMounted(() => {
+    const currentLocale = route.path.split('/')[1]
+    if (!locales.some(locale => locale.code === currentLocale)) {
+      return navigateTo(switchLocalePath(defaultLocale) as string)
+    }
+  })
+}
+
+const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
+
+const { data: navigation } = await useAsyncData(`navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
+  transform: (data: ContentNavigationItem[]) => {
+    const rootResult = data.find(item => item.path === '/docs')?.children || data || []
+
+    return rootResult.find(item => item.path === `/${locale.value}`)?.children || rootResult
+  },
+  watch: [locale],
+})
+const { data: files } = useLazyAsyncData(`search_${collectionName.value}`, () => queryCollectionSearchSections(collectionName.value as keyof PageCollections), {
+  server: false,
+})
+
+provide('navigation', navigation)
+</script>
+
+<template>
+  <UApp :locale="nuxtUiLocale">
+    <AppHeader />
+
+    <UError :error="localizedError" />
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>

package/app/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <UMain>
+    <slot />
+  </UMain>
+</template>

package/app/layouts/docs.vue

@@ -0,0 +1,15 @@
+<template>
+  <UMain>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <DocsAsideLeftTop />
+            <DocsAsideLeftBody />
+          </UPageAside>
+        </template>
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { kebabCase } from 'scule'
+import type { ContentNavigationItem, Collections, DocsCollectionItem } from '@nuxt/content'
+import { findPageHeadline } from '@nuxt/content/utils'
+import { addPrerenderPath } from '../../utils/prerender'
+
+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<DocsCollectionItem>),
+  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 })
+}
+
+// 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 = ref(findPageHeadline(navigation?.value, page.value?.path))
+watch(() => navigation?.value, () => {
+  headline.value = findPageHeadline(navigation?.value, page.value?.path) || headline.value
+})
+
+defineOgImageComponent('Docs', {
+  headline: headline.value,
+})
+
+const github = computed(() => appConfig.github ? appConfig.github : null)
+
+const editLink = computed(() => {
+  if (!github.value) {
+    return
+  }
+
+  return [
+    github.value.url,
+    'edit',
+    github.value.branch,
+    github.value.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 as DocsCollectionItem).links"
+          :key="index"
+          size="sm"
+          v-bind="link"
+        />
+
+        <DocsPageHeaderLinks />
+      </template>
+    </UPageHeader>
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+      />
+
+      <USeparator>
+        <div
+          v-if="github"
+          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="`${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>

package/app/plugins/i18n.ts

@@ -0,0 +1,40 @@
+import en from '../../i18n/locales/en.json'
+import type { RouteLocationNormalized } from 'vue-router'
+
+export default defineNuxtPlugin(async () => {
+  const nuxtApp = useNuxtApp()
+
+  const i18nConfig = nuxtApp.$config.public.i18n
+
+  // If i18n is not enabled, fetch and provide the configured locale in app config
+  if (!i18nConfig) {
+    let locale = 'en'
+    let resolvedMessages: Record<string, unknown> = en
+
+    const appConfig = useAppConfig()
+    const configuredLocale = appConfig.docus.locale
+    if (configuredLocale !== 'en') {
+      const localeMessages = await import(`../../i18n/locales/${configuredLocale}.json`)
+      if (!localeMessages) {
+        console.warn(`[Docus] Missing locale file for "${configuredLocale}". Falling back to "en".`)
+      }
+      else {
+        locale = configuredLocale
+        resolvedMessages = localeMessages
+      }
+    }
+
+    nuxtApp.provide('locale', locale)
+    nuxtApp.provide('localeMessages', resolvedMessages)
+
+    return
+  }
+
+  addRouteMiddleware((to: RouteLocationNormalized) => {
+    if (to.path === '/') {
+      const cookieLocale = useCookie('i18n_redirected').value || i18nConfig.defaultLocale || 'en'
+
+      return navigateTo(`/${cookieLocale}`)
+    }
+  })
+})

package/app/templates/landing.vue

@@ -0,0 +1,44 @@
+<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 })
+}
+
+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"
+  />
+</template>

package/app/types/index.d.ts

@@ -0,0 +1,42 @@
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    docus: {
+      locale: string
+    }
+    seo: {
+      titleTemplate: string
+      title: string
+      description: 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
+      rootDir?: string
+    } | false
+  }
+}
+
+export {}

package/app/utils/navigation.ts

@@ -0,0 +1,7 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+export const flattenNavigation = (items?: ContentNavigationItem[]): ContentNavigationItem[] => items?.flatMap(
+  item => item.children
+    ? flattenNavigation(item.children)
+    : [item],
+) || []

package/app/utils/prerender.ts

@@ -0,0 +1,12 @@
+export 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(','),
+    )
+  }
+}

package/content.config.ts

@@ -0,0 +1,67 @@
+import type { DefinedCollection } from '@nuxt/content'
+import { defineContentConfig, defineCollection, z } from '@nuxt/content'
+import { useNuxt } from '@nuxt/kit'
+import { joinURL } from 'ufo'
+
+const { options } = useNuxt()
+const cwd = joinURL(options.rootDir, 'content')
+const locales = options.i18n?.locales
+
+const createDocsSchema = () => z.object({
+  links: z.array(z.object({
+    label: z.string(),
+    icon: z.string(),
+    to: z.string(),
+    target: z.string().optional(),
+  })).optional(),
+})
+
+let collections: Record<string, DefinedCollection>
+
+if (locales && Array.isArray(locales)) {
+  collections = {}
+  for (const locale of locales) {
+    const code = typeof locale === 'string' ? locale : locale.code
+
+    collections[`landing_${code}`] = defineCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: `${code}/index.md`,
+      },
+    })
+
+    collections[`docs_${code}`] = defineCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: `${code}/**/*`,
+        prefix: `/${code}`,
+        exclude: [`${code}/index.md`],
+      },
+      schema: createDocsSchema(),
+    })
+  }
+}
+else {
+  collections = {
+    landing: defineCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: 'index.md',
+      },
+    }),
+    docs: defineCollection({
+      type: 'page',
+      source: {
+        cwd,
+        include: '**',
+        exclude: ['index.md'],
+      },
+      schema: createDocsSchema(),
+    }),
+  }
+}
+
+export default defineContentConfig({ collections })

package/i18n/locales/ar.json

@@ -0,0 +1,22 @@
+{
+  "common": {
+    "or": "أو",
+    "error": {
+      "title": "الصفحة غير موجودة",
+      "description": "نأسف، لكن الصفحة التي تبحث عنها غير موجودة."
+    }
+  },
+  "docs": {
+    "copy": {
+      "page": "نسخ الصفحة",
+      "link": "نسخ صفحة Markdown",
+      "view": "عرض كـ Markdown",
+      "gpt": "فتح في ChatGPT",
+      "claude": "فتح في Claude"
+    },
+    "links": "المجتمع",
+    "toc": "في هذه الصفحة",
+    "report": "الإبلاغ عن مشكلة",
+    "edit": "تحرير هذه الصفحة"
+  }
+}