AV-54034 top nav highlighting WIP

This is more complicated than it looks, partly because the Nav data-structure
is a bit odd (e.g. the Home icon isn't generated from the Home configuration for...
reasons?)

This involves grubbing around in the site keys, and is therefore dependent
on magic globals that are created while running templating code...

(e.g. it works, but will require some documentation or rework, as will be fun
to debug in future)

Author: osfameron

src/helpers/nav-group-selected.js

@@ -0,0 +1,22 @@
+'use strict'
+
+module.exports = module.exports = (navGroup, {
+  data: {
+    root: { page, site },
+  },
+}) => {
+  if (navGroup === 'home') {
+    // FAKE value to signal that we instead check all the navgroups
+    const navGroups = site.keys.navGroups
+    // NB this must be called after nav-groups has already prepared the data (:scream:)
+    const possible = navGroups.filter((it) => selected(it, page))
+    return possible.length === 1 && possible[0].title === 'Home'
+  } else {
+    return selected(navGroup, page)
+  }
+}
+
+function selected (navGroup, page) {
+  return (navGroup.url === page?.url) ||
+    (navGroup.components?.includes(page.component?.name))
+}

src/helpers/nav-groups.js

@@ -2,29 +2,34 @@
 
 module.exports = ({
   data: {
-    root: { contentCatalog = { resolvePage: () => undefined }, site, page },
+    root: { contentCatalog = { resolvePage: () => undefined }, site },
   },
 }) => {
   let navGroups = site.keys.navGroups
+
   if (!navGroups) return []
   if (navGroups._compiled) return navGroups
+
   const components = site.components
   const componentNames = Object.keys(components)
   const claimed = []
-  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)))
-      } else if (componentName in components) {
-        return matched.concat(componentName)
-      }
-      return matched
-    }, [])
+
+  navGroups = JSON.parse(navGroups).map((navGroup) => {
+    const componentNamesInGroup =
+      (navGroup.components || []).flatMap(
+        (componentName) => componentNames.filter(globbify(componentName)))
+
     claimed.push(...componentNamesInGroup)
-    return accum.concat(compileNavGroup(navGroup, componentNamesInGroup, contentCatalog, components))
-  }, [])
-  const orphaned = componentNames.filter((it) => claimed.indexOf(it) < 0)
+
+    return compileNavGroup(
+      navGroup,
+      componentNamesInGroup,
+      contentCatalog,
+      components)
+  })
+
+  const orphaned = componentNames.filter((it) => !claimed.includes(it))
+
   if (orphaned.length) {
     const homeIdx = orphaned.indexOf('home')
     if (~homeIdx) {
@@ -41,25 +46,36 @@ module.exports = ({
         : navGroups.push(compileNavGroup({ title: 'General' }, orphaned, contentCatalog, components))
     }
   }
+
   navGroups._compiled = true
   console.log(navGroups)
-  console.log(page)
-  return (site.keys.navGroups = navGroups)
+
+  site.keys.navGroups = navGroups
+  return navGroups
 }
 
 function compileNavGroup (navGroup, componentNamesInGroup, contentCatalog, components) {
-  navGroup.components = componentNamesInGroup
   let startPage = navGroup.startPage
   if (startPage) {
     startPage = contentCatalog.resolvePage(startPage)
     if (startPage) navGroup.url = startPage.pub.url
     delete navGroup.startPage
   }
+
+  navGroup.components = componentNamesInGroup
   if (componentNamesInGroup.length) {
     navGroup.latestVersions = componentNamesInGroup.reduce((latestVersionMap, it) => {
       latestVersionMap[it] = components[it].latest.version
       return latestVersionMap
     }, {})
   }
+  // if ((navGroup.url === page?.url) || componentNamesInGroup.includes(page.component.name)) {
+  //   navGroup.selected = true
+  // }
   return navGroup
 }
+
+function globbify (componentName) {
+  const rx = new RegExp(`^${componentName.replace(/[*]/g, '.*?')}$`)
+  return (it) => rx.test(it)
+}

src/partials/header-content.hbs

@@ -9,7 +9,8 @@
                   </a>
                 </li>
                 <li>
-                  <a class="navbar-brand cb-documentation" href="{{#with (and site.url site.homeUrl)}}{{{@root.site.url}}}{{{this}}}{{else}}{{{siteRootPath}}}{{/with}}">
+                  <a class="navbar-brand cb-documentation"
+                      href="{{#if (and site.url site.homeUrl)}}{{{site.url}}}{{{site.homeUrl}}}{{else}}{{{siteRootPath}}}{{/if}}">
                     <img src="{{{uiRootPath}}}/img/cb-documentation.svg" alt="Couchbase Documentation" class="cb-docs" />
                     <img src="{{{uiRootPath}}}/img/cb-docs-hover.svg" alt="Couchbase Documentation" class="hide cb-hover-docs" />
                   </a>
@@ -33,14 +34,16 @@
 
               <div class="navbar-collapse collapse" id="navbar2">
                 <ul class="navbar-nav w-100 justify-content-start">
-                  <li class="nav-item {{#if (eq "home" page.component.name)}}nav-item-selected{{/if}}"">
-                    <a href="{{#with (and site.url site.homeUrl)}}{{@root.site.url}}{{this}}{{else}}{{siteRootPath}}{{/with}}" class="nav-link">
+                  {{#with (nav-groups)}}
+
+                  <li class="nav-item {{#if (nav-group-selected "home")}}nav-item-selected{{/if}}"">
+                    <a href="{{#if (and @root.site.url @root.site.homeUrl)}}{{@root.site.url}}{{@root.site.homeUrl}}{{else}}{{siteRootPath}}{{/if}}" class="nav-link">
                       <i class="fas fa-home"></i>
                     </a>
                   </li>
-                  {{#each (nav-groups)}}
+                  {{#each this}}
                   {{#if ./url}}
-                  <li class="nav-item {{#if (or (eq ./url @root.page.url) (includes ./components @root.page.component.name))}}nav-item-selected{{/if}}">
+                  <li class="nav-item {{#if (nav-group-selected this)}}nav-item-selected{{/if}}">
                     <a class="nav-link" href="{{relativize ./url}}">
                       {{{./title}}}
                       
@@ -53,6 +56,7 @@
                   </li>
                   {{/if}}
                   {{/each}}
+                  {{/with}}
                 </ul>
               </div>
               <div class="primary-action">