Migrate docudjeex to Docus v4 with EN/FR content

app/components/app/AppHeader.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const { forced: forcedColorMode } = useDocusColorMode()
+
+const { isEnabled: isAssistantEnabled } = useAssistant()
+const { isEnabled, locales } = useDocusI18n()
+const { subNavigationMode } = useSubNavigation()
+
+const links = computed(() => {
+  const list = []
+  if (appConfig.socials?.gitea) {
+    list.push({
+      'icon': 'i-simple-icons-gitea',
+      'to': appConfig.socials.gitea,
+      'target': '_blank',
+      'aria-label': 'Gitea',
+    })
+  }
+  if (appConfig.github?.url) {
+    list.push({
+      'icon': 'i-simple-icons-github',
+      'to': appConfig.github.url,
+      'target': '_blank',
+      'aria-label': 'GitHub',
+    })
+  }
+  return list
+})
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: 'flex-1' }"
+    :class="{ 'flex flex-col': subNavigationMode === 'header' }"
+  >
+    <AppHeaderCenter />
+
+    <template #left>
+      <AppHeaderLeft />
+    </template>
+
+    <template #right>
+      <AppHeaderCTA />
+
+      <template v-if="isAssistantEnabled">
+        <AssistantChat />
+      </template>
+
+      <template v-if="isEnabled && locales.length > 1">
+        <ClientOnly>
+          <LanguageSelect />
+
+          <template #fallback>
+            <div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
+          </template>
+        </ClientOnly>
+
+        <USeparator
+          orientation="vertical"
+          class="h-8"
+        />
+      </template>
+
+      <UContentSearchButton class="lg:hidden" />
+
+      <ClientOnly v-if="!forcedColorMode">
+        <UColorModeButton />
+
+        <template #fallback>
+          <div class="h-8 w-8 animate-pulse bg-neutral-200 dark:bg-neutral-800 rounded-md" />
+        </template>
+      </ClientOnly>
+
+      <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>
+
+    <template
+      v-if="subNavigationMode === 'header'"
+      #bottom
+    >
+      <AppHeaderBottom />
+    </template>
+  </UHeader>
+</template>

app/components/app/AppHeaderBottom.vue

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

app/components/app/AppHeaderCenter.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const { sections } = useSubNavigation()
+
+const navMenuVariants = useUIConfig('navigationMenu')
+</script>
+
+<template>
+  <template v-if="sections.length">
+    <!-- Empty spacer: keeps the header's flex-1 center slot from collapsing
+         while the real menu below is absolutely positioned so it can match
+         the article's content-column width instead of this slot's width. -->
+    <div class="hidden lg:block w-full" />
+
+    <UContainer class="absolute inset-x-0 inset-y-0 hidden lg:flex items-center pointer-events-none">
+      <!-- Mirrors the docs page's actual layout: an outer 10-col grid (left
+           doc-tree sidebar = col-span-2) containing a second, nested 10-col
+           grid for the article body (right TOC sidebar = col-span-2 of that
+           inner grid). Matching both levels is what lines this menu up with
+           the real content column instead of a naive single-level fraction. -->
+      <div class="grid grid-cols-10 gap-10 w-full pointer-events-auto">
+        <div class="col-span-8 col-start-3 grid grid-cols-10 gap-10">
+          <div class="col-span-8 col-start-1">
+            <UNavigationMenu
+              :items="sections"
+              :highlight="navMenuVariants.highlight ?? true"
+              :highlight-color="navMenuVariants.highlightColor"
+              :variant="navMenuVariants.variant ?? 'pill'"
+              :color="navMenuVariants.color"
+              class="-mx-[10px] w-[calc(100%+20px)] [&>div]:w-full"
+              :ui="{ list: 'w-full justify-between', item: 'py-0' }"
+            />
+          </div>
+        </div>
+      </div>
+    </UContainer>
+  </template>
+
+  <UContentSearchButton
+    v-else
+    :collapsed="false"
+    class="w-full"
+    variant="soft"
+    :ui="{
+      leadingIcon: 'size-4 mx-0.5',
+    }"
+  />
+</template>

app/components/content/Ellipsis.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  width?: string
+  height?: string
+  zIndex?: string
+  top?: string
+  left?: string
+  right?: string
+  blur?: string
+  colors?: string[]
+}>(), {
+  width: '10rem',
+  height: '10rem',
+  zIndex: '10',
+  top: '0',
+  left: 'auto',
+  right: 'auto',
+  blur: '50px',
+  colors: () => ['rgba(0, 71, 225, 0.34)', 'rgba(26, 214, 255, 0.22)', 'rgba(0, 71, 225, 0.22)'],
+})
+</script>
+
+<template>
+  <div
+    class="pointer-events-none absolute w-full"
+    :style="{
+      top,
+      insetInlineStart: left,
+      insetInlineEnd: right,
+      zIndex,
+      maxWidth: width,
+      height,
+      filter: `blur(${blur})`,
+    }"
+  >
+    <div
+      class="w-full h-full"
+      :style="{
+        background: `linear-gradient(97.62deg, ${colors[0]} 2.27%, ${colors[1]} 65%, ${colors[2]} 98.48%)`,
+      }"
+    />
+  </div>
+</template>

app/components/docs/DocsAsideLeftBody.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { sidebarNavigation } = useSubNavigation()
+
+const contentNavVariants = useUIConfig('contentNavigation')
+</script>
+
+<template>
+  <UContentNavigation
+    :collapsible="true"
+    :default-open="false"
+    :highlight="contentNavVariants.highlight ?? true"
+    :highlight-color="contentNavVariants.highlightColor"
+    :variant="contentNavVariants.variant ?? 'link'"
+    :color="contentNavVariants.color"
+    :navigation="sidebarNavigation"
+  />
+</template>

app/components/docs/DocsAsideLeftTop.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { subNavigationMode, sections } = useSubNavigation()
+</script>
+
+<template>
+  <div
+    v-if="subNavigationMode === 'aside'"
+    class="mb-2"
+  >
+    <UPageAnchors :links="sections" />
+    <USeparator
+      type="dashed"
+      class="my-4"
+    />
+  </div>
+
+  <div
+    v-else
+    class="mb-4"
+  >
+    <UContentSearchButton
+      :collapsed="false"
+      class="w-full"
+      variant="soft"
+      :ui="{
+        leadingIcon: 'size-4 mx-0.5',
+      }"
+    />
+  </div>
+</template>

app/components/docs/DocsPageHeaderLinks.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { joinURL, withTrailingSlash } from 'ufo'
+import { useRuntimeConfig } from '#imports'
+
+const route = useRoute()
+const toast = useToast()
+const runtimeConfig = useRuntimeConfig()
+const appBaseURL = runtimeConfig.app?.baseURL || '/'
+const mcpRoute = (runtimeConfig.public.mcp as { route?: string } | undefined)?.route || '/mcp'
+
+const { copy, copied } = useClipboard()
+const { t } = useDocusI18n()
+
+const markdownLink = computed(() => `${window?.location?.origin}${withTrailingSlash(appBaseURL)}raw${route.path}.md`)
+const mcpServerUrl = computed(() => `${window?.location?.origin}${joinURL(appBaseURL, mcpRoute)}`)
+const mcpDeeplink = computed(() => `${window?.location?.origin}${joinURL(appBaseURL, mcpRoute, 'deeplink')}`)
+const items = computed(() => [
+  [{
+    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(mcpServerUrl.value)
+        toast.add({
+          title: 'Copied to clipboard',
+          icon: 'i-lucide-check-circle',
+        })
+      },
+    },
+    {
+      label: 'Add MCP Server',
+      icon: 'i-simple-icons:cursor',
+      target: '_blank',
+      to: mcpDeeplink.value,
+    },
+  ],
+])
+
+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"
+      class="bg-[rgba(12,13,12,0.8)] hover:bg-[rgba(18,17,16,0.9)] border border-[#121110]"
+      :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="bg-[rgba(12,13,12,0.8)] hover:bg-[rgba(18,17,16,0.9)] border border-[#121110] border-l-[#121110]"
+      />
+    </UDropdownMenu>
+  </UFieldGroup>
+</template>