feat: navigation (#288)

* feat: navigation generator

* chore: remove depth

* fix: navigation `get`

* feat: introduce `navigation` front matter and remove `menu`, `menuTitle` and `category`

* feat: add nuxt hook

* chore: cleanup

* chore: update core

* feat: exclusive navigation

* docs: update docs

* 🐛 (merge) import duplicate due to merging

* fix: update `currentNav` generation

Co-authored-by: Yaël Guilloux <[email protected]>

docs/pages/1.get-started/1.installation.md

@@ -1,7 +1,3 @@
----
-category: Getting Started
----
-
 # Installation
 
 > Setting up beautiful documentation with Docus is one command away 🤙

docs/pages/1.get-started/2.configuration.md

@@ -1,7 +1,3 @@
----
-category: Getting Started
----
-
 # Configuration
 
 > Tailor Docus for your own identity easily :rainbow:

docs/pages/2.usage/1.content.md

@@ -1,6 +1,6 @@
 ---
-menuTitle: Content
-category: Usage
+navigation:
+  title: Content
 ---
 
 # Writing content for the docs
@@ -31,11 +31,13 @@ Every markdown file should define properties in its front-matter in order to wor
 |---------|--------| -----|
 | `title` | `String` | Title of the page (will also be injected in metas) |
 | `description` | `String` | Description of the page, will be added below the title and injected into the metas |
-| `category` | `String` | Group documents in the navigation, if `category` is falsy or not a string, it is coerced to be an empty string, and isn't rendered in the sidebar |
+| `navigation` | `false \| Object` | If set to `false`, the page will not display in Docus navigation menus and Next/Prev links |
+| `navigation.title` | `String` | If set, overrides the title that will be displayed in navigation menus | 
+| `navigation.nested`| `Boolean`| If set to `false`, the nested pages will not display in Docus navigation menus |
+| `navigation.slot`  | `String` | Mark the page to show in specific menu |
+| `navigation.exclusive` | `Boolean` | If set to `true`, other pages will not show in the left menu when user visiting the page or its nested pages. |
 | `version` | `Float` | Alert users that the page is new with a badge. Once the page is seen, the version is stored in localStorage and the badge won't be shown again until the version is incremented  |
 | `fullscreen` | `Boolean` | Expands the page content and hides the table of contents |
-| `menu` | `Boolean` | If set to `false`, the page will not display in the left menu and Next/Prev links |
-| `menuTitle` | `String` | If set, overrides the title that will be displayed in the left menu |
 | `badge` | `String` | Adds a badge next to the page title |
 | `position` | `Number` | Position of the page within the category. By default we use the filename prefix `POSITION.`, example: `1.first-page.md` |
 | `draft` | `Boolean` | Mark the page as draft (and only display it in development mode). By default we use the filename suffix `.draft`, example: `3.my-draft-page.draft.md` |

docs/pages/2.usage/2.components.md

@@ -1,7 +1,3 @@
----
-category: Usage
----
-
 # Components
 
 You can create your own Vue components in the `components/` folder. Check out [this section](https://content.nuxtjs.org/writing#vue-components).

docs/pages/2.usage/3.assets.md

@@ -1,6 +1,6 @@
 ---
-menuTitle: Assets
-category: Usage
+navigation:
+  title: Assets
 ---
 
 # Assets

docs/pages/2.usage/4.template.md

@@ -1,7 +1,3 @@
----
-category: Usage
----
-
 # Template
 
 > Customize your docs with slots or overwrite the templates components 🧩

docs/pages/2.usage/_example.md

@@ -1,5 +1,5 @@
 ---
-menu: false
+navigation: false
 ---
 
 ```js

docs/pages/3.more/1.example.md

@@ -1,5 +1,4 @@
 ---
-category: More
 csb_link: https://codesandbox.io/embed/docus-starter-1xsm7?hidenavigation=1&theme=dark
 fullscreen: true
 ---

docs/pages/3.more/2.showcases.md

@@ -1,5 +1,4 @@
 ---
-category: More
 fullscreen: true
 draft: true
 showcases:

docs/pages/3.more/3.deployment.md

@@ -1,7 +1,3 @@
----
-category: More
----
-
 # Deployment
 
 > Deploy your documentation with Docus to any static hosting 🪶

docs/pages/3.more/4.migration.md

@@ -1,6 +1,6 @@
 ---
-menuTitle: Migration
-category: More
+navigation:
+  title: Migration
 ---
 
 # Migrate from @nuxt/content-theme-docs

docs/pages/3.more/5.extend.md

@@ -1,6 +1,6 @@
 ---
-menuTitle: Extend
-category: More
+navigation:
+  title: Extend
 ---
 
 # Extend

docs/pages/blog/0.index.md

@@ -1,5 +1,7 @@
 ---
 template: blog
+navigation:
+  nested: false
 ---
 
 # Blog

docs/pages/blog/build-dev-to-clone-with-nuxt-new-fetch.md

@@ -3,7 +3,6 @@ title: 'Build a dev.to clone with Nuxt new fetch'
 description: Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI.
 imgUrl: https://source.unsplash.com/user/remithorel/1280x720
 date: 2020-04-08
-menu: false
 authors:
   - name: Sergey Bedritsky
     avatarUrl: https://pbs.twimg.com/profile_images/1244291720566669315/pGg6Xn-M_400x400.jpg

docs/pages/blog/creating-a-nuxt-module.md

@@ -3,7 +3,6 @@ title: Creating a Nuxt Module
 description: Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development.
 imgUrl: https://source.unsplash.com/user/jasebloor/1280x720
 date: 2020-11-27
-menu: false
 authors:
   - name: "Debbie O'Brien"
     avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg

docs/pages/blog/creating-blog-with-nuxt-content.md

@@ -3,7 +3,6 @@ title: 'Create a Blog with Nuxt Content'
 description: 'The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.'
 imgUrl: https://source.unsplash.com/user/agk42/1280x720
 date: 2020-07-02
-menu: false
 authors:
   - name: "Debbie O'Brien"
     avatarUrl: https://pbs.twimg.com/profile_images/1252900852156772352/JLIVJ-TC_400x400.jpg

docs/pages/index.md

@@ -1,9 +1,9 @@
 ---
-menu: false
 template: landing
 title: Documentation Generator based on Nuxt and Windi.
 description: >-
   Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
+navigation: false
 ---
 
 :::block-hero{yml}

src/app/pages/_.vue

@@ -16,7 +16,7 @@ export default {
   async asyncData({ $docus, app, params, error }) {
     const language = app.i18n.locale
     const to = withoutTrailingSlash(`/${params.pathMatch || ''}`) || '/'
-    const draft = $docus.ui?.draft ? undefined : false
+    const draft = false
     const [page] = await $docus.search({ deep: true }).where({ language, to, draft }).fetch()
     if (!page) {
       return error({ statusCode: 404, message: 'Page not found' })

src/core/module.ts

@@ -10,6 +10,7 @@ import { destroyDB, useDB } from './database'
 import { createServerMiddleware } from './server'
 import { initParser } from './parser'
 import { destroyHooks } from './hooks'
+import { updateNavigation } from './utils/navigation'
 import { useHooks, logger } from './'
 
 const fs = gracefulFs.promises
@@ -70,10 +71,9 @@ export default <Module>async function docusModule() {
     const defaultLocale = options.i18n?.defaultLocale || 'en'
 
     const regexp = new RegExp(`^/(${locales})`, 'gi')
-    const { dir, slug, category } = document
+    const { dir, slug } = document
     const _dir = dir.replace(regexp, '')
     const _language = dir.replace(_dir, '').replace(/\//, '') || defaultLocale
-    const _category = category && typeof category === 'string' ? category : ''
     const _to = `${_dir}/${slug}`.replace(/\/+/, '/')
     const position = generatePosition(_to, document)
 
@@ -83,7 +83,6 @@ export default <Module>async function docusModule() {
     document.position = position
     document.to = generateTo(_to)
     document.language = _language
-    document.category = _category
     document.draft = document.draft || isDraft(slug)
   })
 
@@ -107,6 +106,7 @@ export default <Module>async function docusModule() {
     nuxt.hook('listen', server => server.on('upgrade', (...args) => coreHooks.callHook('upgrade', ...args)))
 
     storage.watch((event, key) => {
+      updateNavigation(nuxt)
       logger.info(`File ${event}: ${key}`)
     })
   }
@@ -120,11 +120,15 @@ export default <Module>async function docusModule() {
   })
 
   nuxt.hook('build:before', () => {
-    lazyIndex()
+    ;(async () => {
+      await lazyIndex()
+      await updateNavigation(nuxt)
+    })()
   })
 
   nuxt.hook('generate:before', async () => {
     await lazyIndex()
+    await updateNavigation(nuxt)
   })
 
   if (isSSG) {

src/core/runtime/composables/api.ts

@@ -1,3 +1,4 @@
+import { NavItem } from 'src/types'
 import { joinURL } from 'ufo'
 
 export const useDocusApi = createQuery => {
@@ -18,14 +19,18 @@ export const useDocusApi = createQuery => {
     return this.search(path).fetch()
   }
 
-  function findLinkBySlug(links: any[], slug: string) {
-    return links.find(link => link.slug === slug)
+  function findLink(links: NavItem[], to: string) {
+    return links.find(link => link.to === to)
   }
 
+  // function findLinkBySlug(links: NavItem[], slug: string) {
+  //   return links.find(link => link.slug === slug)
+  // }
+
   return {
     data,
     search,
     page,
-    findLinkBySlug
+    findLink
   }
 }