implement template nav mode for use with default site generator

- add helper to detect nav mode
- allow UI preview model to specify nav mode
- define nav groups using JSON
- reuse existing General catagory for orphaned component names, if present

Author: mojavelinux

gulp.d/tasks/build-preview-pages.js

@@ -131,7 +131,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
               }
             },
             function (done) {
-              this.push(exportSiteNavigationData(baseUiModel.site.components))
+              if (baseUiModel.navMode === 'client') this.push(exportSiteNavigationData(baseUiModel.site.components))
               vfs
                 .src('js/vendor/fontawesome-icon-defs.js', { base: src, cwd: src })
                 .pipe(

preview-src/ui-model.yml

@@ -1,22 +1,16 @@
 antoraVersion: '2.3.1'
+navMode: template # set value to client to generate navigation on the client
 site:
   title: Couchbase Docs
   url: http://localhost:5252
   homeUrl: &home_url /home.html
   keys:
     navGroups: |
-      - title: Server
-        startPage: home::server.adoc
-        components: [server, '*-connector']
-        url: /index.html
-      - title: Mobile
-        startPage: home::mobile.adoc
-        components: [couchbase-lite, sync-gateway]
-        url: '#'
-      - title: Cloud
-        startPage: home::cloud.adoc
-        components: [operator]
-        url: '#'
+      [
+        { "title": "Server", "startPage": "home::server.adoc", "components": ["server", "*-connector"], "url": "/index.html" },
+        { "title": "Mobile", "startPage": "home::mobile.adoc", "components": ["couchbase-lite", "sync-gateway"], "url": "#" },
+        { "title": "Cloud", "startPage": "home::cloud.adoc", "components": ["operator"], "url": "#" }
+      ]
   components:
     server:
       versions:
@@ -27,6 +21,8 @@ site:
         version: '5.5'
         title: Couchbase Server
         url: /server/5.5/index.html
+        navigation:
+        - content: Introduction
       - version: '5.1'
         url: /index.html
         navigation:
@@ -143,14 +139,15 @@ site:
         url: /spark-connector/2.4/index.html
         navigation:
         - content: Spark Connector
-          url: /spark-connector/2.4/index.html
           items:
           - content: Getting Started
             url: /spark-connector/2.4/getting-started.html
           - content: Streaming Integration
             url: /spark-connector/2.4/streaming-integration.html
       - version: '2.3'
         url: /spark-connector/2.3/index.html
+        navigation:
+        - content: Spark Connector
       latest: *latest_spark_connector
     couchbase-lite:
       url: /couchbase-lite/2.1/index.html

src/helpers/nav-groups.js

@@ -1,17 +1,14 @@
 'use strict'
 
-const yaml = require('js-yaml')
-
-module.exports = ({ data: { root: { contentCatalog, site } } }) => {
+module.exports = ({ data: { root: { contentCatalog = { resolvePage: () => undefined }, site } } }) => {
   let navGroups = site.keys.navGroups
   if (!navGroups) return []
   if (navGroups._compiled) return navGroups
-  if (!contentCatalog) contentCatalog = { resolvePage: () => undefined }
   const components = site.components
   const componentNames = Object.keys(components)
   const claimed = ['home']
-  navGroups = yaml.load(navGroups).reduce((accum, navGroup) => {
-    const componentNamesInGroup = navGroup.components.reduce((matched, componentName) => {
+  navGroups = JSON.parse(navGroups).reduce((accum, navGroup) => {
+    const componentNamesInGroup = (navGroup.components || []).reduce((matched, componentName) => {
       if (~componentName.indexOf('*')) {
         const rx = new RegExp(`^${componentName.replace(/[*]/g, '.*?')}$`)
         return matched.concat(componentNames.filter((candidate) => rx.test(candidate)))
@@ -24,7 +21,14 @@ module.exports = ({ data: { root: { contentCatalog, site } } }) => {
     return accum.concat(compileNavGroup(navGroup, componentNamesInGroup, contentCatalog, components))
   }, [])
   const orphaned = componentNames.filter((it) => claimed.indexOf(it) < 0)
-  if (orphaned.length) navGroups.push(compileNavGroup({ title: 'General' }, orphaned, contentCatalog, components))
+  if (orphaned.length) {
+    const generalGroup = navGroups.find((it) => it.title === 'General')
+    if (generalGroup) {
+      generalGroup.components.push(...orphaned)
+    } else {
+      navGroups.push(compileNavGroup({ title: 'General' }, orphaned, contentCatalog, components))
+    }
+  }
   navGroups._compiled = true
   return (site.keys.navGroups = navGroups)
 }

src/helpers/nav-mode.js

@@ -0,0 +1,8 @@
+'use strict'
+
+module.exports = ({ data: { root: { contentCatalog = { getSiteStartPage () {} }, navMode } } }) => {
+  if (navMode) return navMode
+  const siteStartPage = contentCatalog.getSiteStartPage()
+  if (siteStartPage && siteStartPage.asciidoc.attributes['export-site-navigation-data'] != null) return 'client'
+  return 'template'
+}

src/js/01-nav.js

@@ -1,15 +1,13 @@
 ;(function () {
   'use strict'
 
-  var pageNavigationGroup = window.pageNavigationGroup
-  if (!pageNavigationGroup) return
-
-  var siteNavigationData = window.siteNavigationData.reduce(function (accum, entry) {
-    return (accum[entry.name] = entry) && accum
-  }, {})
-
   var navContainer = document.querySelector('.nav-container')
-  buildNav(navContainer, getPage(), pageNavigationGroup, siteNavigationData)
+  if (!navContainer.querySelector('.components')) {
+    var siteNavigationData = window.siteNavigationData.reduce(function (accum, entry) {
+      return (accum[entry.name] = entry) && accum
+    }, {})
+    buildNav(navContainer, getPage(), window.pageNavigationGroup, siteNavigationData)
+  }
   activateNav(navContainer)
 
   function getPage () {
@@ -22,7 +20,7 @@
   }
 
   function buildNav (container, page, group, navData) {
-    var groupEl = createElement('div', 'components')
+    var groupEl = createElement('div', 'components is-revealed')
     var groupNameEl = createElement('div', 'components_group-title')
     if (group.url) {
       var groupLinkEl = createElement('a')
@@ -57,11 +55,11 @@
       componentsListItemsEl.appendChild(componentVersionsEl)
       componentNavData.versions.forEach(function (componentVersion) {
         var componentVersionNavEl = createElement('div', 'version_items')
+        componentVersionNavEl.dataset.version = componentVersion.version
         // TODO only open manually after building nav tree if current page is not found
         if (page.component !== componentName || page.version !== componentVersion.version) {
           componentVersionNavEl.classList.add('hide')
         }
-        componentVersionNavEl.dataset.version = componentVersion.version
         buildNavTree(componentVersion.sets, componentVersionNavEl, page, [])
         componentsListItemsEl.appendChild(componentVersionNavEl)
       })
@@ -173,7 +171,19 @@
       if (e.detail > 1 && window.getComputedStyle(e.target).cursor === 'pointer') e.preventDefault()
     })
 
-    scrollItemToMidpoint(container.querySelector('.components'), container.querySelector('a.is-current-page'))
+    var components = container.querySelector('.components')
+
+    scrollItemToMidpoint(components, container.querySelector('a.is-current-page'))
+
+    if (!components.classList.contains('is-revealed')) {
+      find('a.is-current-page', container).forEach(function (currentPage) {
+        var childNavList = currentPage.parentNode.nextElementSibling
+        if (childNavList) childNavList.classList.remove('hide')
+        var ancestor = currentPage
+        while ((ancestor = ancestor.parentNode) && ancestor !== container) ancestor.classList.remove('hide')
+      })
+      components.classList.add('is-revealed')
+    }
 
     find('.component_list_title', container).forEach(function (componentTitleEl) {
       componentTitleEl.style.cursor = 'pointer'

src/partials/footer-scripts.hbs

@@ -1,4 +1,4 @@
-{{#if page.component}}
+{{#if (and page.component (eq (nav-mode) 'client'))}}
 {{!-- may pass this path to site.js and have it load the navigation data itself --}}
 <script src="{{siteRootPath}}/site-navigation-data.js"></script>
 <script>

src/partials/main.hbs

@@ -20,7 +20,6 @@
 {{/with}}
 {{/unless}}
 <div class="article-header">
-{{!-- {{> nav-control}} --}}
 {{> crumbs}}
 </div>
 {{> article}}

src/partials/nav-control.hbs

@@ -1,7 +1,32 @@
-<div class="left-sidebar-menu">
-{{> nav-version-control}}
-<div class="nav-menu">
-{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
+<div class="components">
+  {{#with (nav-group-for-page (nav-groups))}}
+  <div class="components_group-title">
+    {{#if ./url}}<a href="{{relativize ./url}}">{{{./title}}}</a>{{else}}{{{./title}}}{{/if}}
+  </div>
+  <ul class="components_list">
+    {{#each ./components as |componentName|}}
+    {{#with (lookup @root.site.components this)}}
+    <li class="components_list-items">
+      <div class="component_list-version">
+        <span class="component_list_title">{{{./title}}}</span>
+        {{#with (or (and (eq @root.page.component.name componentName) @root.page.version) (lookup ../../latestVersions componentName)) as |activeVersion|}}
+        {{#unless (eq activeVersion 'master')}}
+        <select class="version_list">
+          {{#each ../versions}}
+          <option value="{{./version}}"{{#if (eq ./version activeVersion)}} selected{{/if}}>{{or ./displayVersion ./version}}</option>
+          {{/each}}
+        </select>
+        {{/unless}}
+        {{/with}}
+      </div>
+      {{#each ./versions}}
+      <div class="version_items{{#unless (and (eq @root.page.component.name ../componentName) (eq @root.page.version ./version))}} hide{{/unless}}" data-version="{{./version}}">
+{{> nav-tree navigation=./navigation level=0}}
+      </div>
+      {{/each}}
+    </li>
+    {{/with}}
+    {{/each}}
+  </ul>
+  {{/with}}
 </div>
-<a href="#" class="menu-expand-toggle"> <span>Navigation</span> <i class="fas fa-times-circle"></i> <i class="fas fa-chevron-circle-left"></i></a>
-</div>

src/partials/nav-menu.hbs

@@ -1,38 +1,16 @@
-{{#if navigation}}
-{{#each navigation}}
-{{#if (eq ../crumbAtLevel this)}}
-{{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2 or eq ../crumbLevel 3)}}
-{{!-- <div class="main-nav-parent new " data-depth="{{../level}}"><span class="back-to-menu"><i class="fas fa-chevron-left"></i> Main Menu </span>
-
-</div> --}}
-{{/if}}
-{{/if}}
-{{/each}}
-<ul class="nav-list">
-{{!-- {{log ../crumbAtLevel this 'log output'}} --}}
-{{#each navigation}}
-<li class="nav-item{{#if (eq ../crumbAtLevel this)}}
-{{~#if (eq this (last @root.page.breadcrumbs))}} is-current-page{{~else}} is-current-path{{/if}} is-active
-{{~else if (eq ../level 1)}} {{!--is-active--}} is-inactive{{/if}}{{#if (eq ../crumbAtLevel this (and eq ../level 2))}} is-active-depth-2 {{/if}} " data-depth="{{../level}}">
-
-{{#if ./content}}
-<span class="nav-line "  data-depth="{{../level}}">
-{{#if ./items}}
-{{#if ./icons}}
-<i class="{{./icons}}"></i>
-{{/if}}
-<span class="in-toggle" data-depth="{{../level}}"></span>
-{{!-- <button class="nav-toggle"></button> --}}
-{{/if}}
-{{#if ./url}}
-<a class="nav-link" href="{{#if (eq ./urlType 'internal')}}{{relativize ./url}}{{else}}{{./url}}{{/if}}">{{{./content}}}</a>
-{{else}}
-<span class="nav-text ">{{{./content}}}</span>
-{{/if}}
-</span>
-{{/if}}
-{{> nav-tree navigation=./items level=(add ../level 1) crumbLevel=(add ../crumbLevel (and ./content 1)) crumbAtLevel=(lookup @root.page.breadcrumbs (add ../crumbLevel (and ./content 1)))}}
-</li>
-{{/each}}
+{{#if navigation.length}}
+<ul class="menu_row{{#if ./level}} hide{{/if}}">
+  {{#each navigation}}
+  <li class="menu_list{{#if (eq ./url @root.page.url)}} is-current-page{{/if}}{{#if ./items.length}} is-parent{{/if}}" data-depth="{{../level}}">
+    <span class="menu_line">
+      {{#if ./url}}
+      <a class="menu_title menu_link{{#if (eq ./url @root.page.url)}} is-current-page{{/if}}" href="{{relativize ./url}}">{{{./content}}}</a>
+      {{else}}
+      <span class="menu_title menu_text">{{{./content}}}</span>
+      {{/if}}
+    </span>
+{{> nav-tree navigation=./items level=(add ../level 1)}}
+  </li>
+  {{/each}}
 </ul>
 {{/if}}