NuxtProDocs - Multiple Docs Content Directories - Issues

[Mat4m0]

Hello :wave:,
I am having issues setting up a Documentation site with multiple "docs" inside. I setup a repo where everything is already setup to check the issue in more detail: https://github.com/Mat4m0/fork_nuxt-docs

1) Important: I am having the issue when i have a index page in a docs directory, when pressing a sublink it hides itself. (see images)

The code what computes the links to show (from nuxt.com site) For the main docs:

const navigationLinks = computed(() => {
  const path = ['/docs', route.params.slug?.[0]].filter(Boolean).join('/')

  return mapContentNavigation(navPageFromPath(path, navigation.value)?.children || [])
})

For the docs2

// ...same
  const path = ['/docs2', route.params.slug?.[0]].filter(Boolean).join('/')
// ...same

2) Optional: I just build a whacky solution to keep the link icon active when browsing the subdirectories. A more elegant solution would be appreciated.

3) DocsUpdate : Maybe this workflow could be interesting also for others and can be included in a official Documentation?

Many thanks in advance!! :relaxed:

[everfu]

Maybe you can view the official documentation in the way you add a different version of the documentation?The source code can be found in the repository

[everfu]

<template>
  <UMain>
    <UContainer>
      <UPage>
        <template #left>
          <UAside>
+            <BranchSelect />

            <UNavigationTree :links="mapContentNavigation(navigation)" />
          </UAside>
        </template>

        <slot />
      </UPage>
    </UContainer>
  </UMain>
</template>

<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'

const nav = inject<Ref<NavItem[]>>('navigation')

const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
</script>

this component

BranchSelect.vue

<template>
  <div class="mb-3 lg:mb-6">
    <UDropdown
      class="w-full"
      :items="[branches]"
      color="gray"
      mode="hover"
      :ui="{ width: 'w-full' }"
      :popper="{ strategy: 'absolute', placement: 'bottom' }"
    >
      <UButton color="gray" class="w-full">
        <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />

        <span class="text-gray-900 dark:text-white">{{ branch.label }}</span>

        <span class="text-gray-400 dark:text-gray-500">{{ branch.suffix }}</span>

        <UIcon name="i-heroicons-chevron-down-20-solid" class="w-5 h-5 text-gray-400 dark:text-gray-500 ml-auto -mr-1" />
      </UButton>

      <template #item="{ item }">
        <UIcon v-if="item.icon" :name="item.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />

        <span>{{ item.label }}</span>

        <span class="truncate text-gray-400 dark:text-gray-500">{{ item.suffix }}</span>
      </template>
    </UDropdown>
  </div>
</template>

<script setup lang="ts">
const { branches, branch } = useContentSource()
</script>

[Mat4m0]

Thanks, I already have a solution. @benjamincanac how to handle these scenarios? I could an add a page to the docs folder?

[benjamincanac]

Not sure it answers your question but for the Nuxt UI docs, we use different sources with @nuxt/content: https://github.com/nuxt/ui/blob/dev/docs/nuxt.config.ts#L47 and then compute the navigation based on the route path: https://github.com/nuxt/ui/blob/dev/docs/app.vue#L45.

[everfu]

sorry, may have misled

[Mat4m0]

For me the question is if I should setup a "How to setup a multi docs structure with NuxtUIProDocs"? Think this could be useful for others in the future.

Like Docusaurus

[everfu]

For me the question is if I should setup a "How to setup a multi docs structure with NuxtUIProDocs"? Think this could be useful for others in the future.

Like Docusaurus

multi-document seen Content Docs

[benjamincanac]

Sorry, but I still don't get your issue. If you encounter a bug, please provide a reproduction.