fix: fix bottom navigation query and improve grouping (#440)

* fix: fix bottom navigation query and improve grouping

* fix: ignore pages without title

nuxtjs.org/content/1.examples/index.md

@@ -2,4 +2,5 @@
 title: Examples
 navigation: 
   exclusive: true
+  redirect: /examples/routing/hello-world
 ---

src/core/storage/driver.ts

@@ -87,6 +87,20 @@ export const docusDriver = defineDriver((options: DriverOptions) => {
     const parents = await getItemParents(key)
     document.layout = defu(document.layout, ...parents.map(p => p.layout))
 
+    /**
+     * Find nearest exclusive parent
+     * This document will inherit features from his parents
+     * Also parent will be used to group up children in bottom navigation (prev/next page)
+     */
+    if (document.navigation !== false) {
+      const exclusiveParent = parents.find(p => p.navigation?.exclusive)
+      if (exclusiveParent) {
+        document.navigation = document.navigation || {}
+        // Store nearest parent path
+        document.navigation.parent = exclusiveParent.path
+      }
+    }
+
     // call beforeInsert Hook
     await callHook('docus:storage:beforeInsert', document)
 

src/defaultTheme/components/organisms/page/PagePrevNext.vue

@@ -22,8 +22,8 @@
         "
       >
         <span class="relative flex flex-col items-end truncate">
-          <span v-if="prev.category" class="mb-1 text-xs leading-tight text-gray-400">
-            {{ prev.category }}
+          <span class="mb-1 text-xs leading-tight text-gray-400">
+            {{ directory(prev.to) }}
           </span>
           <span class="flex items-center w-full leading-tight">
             <IconArrowLeft class="flex-shrink-0 w-4 h-4 mr-2 text-primary" />
@@ -56,8 +56,8 @@
         "
       >
         <span class="relative flex flex-col items-start truncate">
-          <span v-if="next.category" class="mb-1 text-xs leading-tight text-gray-400">
-            {{ next.category }}
+          <span class="mb-1 text-xs leading-tight text-gray-400">
+            {{ directory(next.to) }}
           </span>
           <span class="flex items-center w-full leading-tight">
             <span class="truncate text-primary">{{ next.title }}</span>
@@ -71,6 +71,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import { upperFirst } from 'scule'
 
 export default defineComponent({
   props: {
@@ -82,6 +83,13 @@ export default defineComponent({
       type: Object,
       default: null
     }
+  },
+  methods: {
+    directory(link) {
+      const dirs = link.split('/')
+      const directory = dirs.length > 1 ? dirs[dirs.length - 2] : ''
+      return directory.split('-').map(upperFirst).join(' ')
+    }
   }
 })
 </script>

src/defaultTheme/components/templates/Docs.vue

@@ -70,6 +70,10 @@ export default defineComponent({
         .where({
           language,
           draft,
+          parent: props.page.parent,
+          // Ignore pages without any title
+          // Most of `index` pages are use for parenting configuration and they don't need to be listed here
+          title: { $not: { $type: 'undefined' } },
           navigation: {
             $and: [
               // Ignore contents that has disabled navigations
@@ -81,7 +85,7 @@ export default defineComponent({
         })
         .only(['title', 'slug', 'to', 'category'])
         .sortBy('position', 'asc')
-        .surround(props.page.slug, { before: 1, after: 1 })
+        .surround(props.page.path, { before: 1, after: 1 })
         .fetch()
 
       prev.value = prevLink

src/types/core.ts

@@ -77,6 +77,9 @@ export interface DocusDocument {
     title: string
     slot: string
     nested: boolean
+    // url of nearest exclusive parent
+    // parent uses to filter pages to find currect previous and next page
+    parent: string
     [key: string]: any
   }
   // Template