[cleanup] Simplify the API doc navigation

* Simplifies the API doc navigation. It now only shows the modules
themselves, and none of their items (that is left to the API docs page).

* Brings back nested subnavigation menus

* Adds the `break-on` helper which allows us to specify when a string
should break by inserting zero-width spaces

Author: pzuraq

addon/components/docs-hero/template.hbs

@@ -3,23 +3,21 @@
   {{if (eq style 'light') 'text-grey-darkest'}}
   {{if (eq style 'dark') 'bg-black text-white'}}
 ">
-  <div class='docs-container'>
-    <h1 class='text-5xl md:text-jumbo leading-none'>
-      {{#if logo}}
-        <div class='md:-mb-1 -mt-4 md:-mt-8'>
-          <span class='inline-block h-6 opacity-50'>
-            {{docs-logo logo=logo}}
-          </span>
-        </div>
-      {{/if}}
+  <h1 class='text-5xl md:text-jumbo leading-none'>
+    {{#if logo}}
+      <div class='md:-mb-1 -mt-4 md:-mt-8'>
+        <span class='inline-block h-6 opacity-50'>
+          {{docs-logo logo=logo}}
+        </span>
+      </div>
+    {{/if}}
 
-      <span class='font-thin'>{{slimHeading}}</span>{{strongHeading}}
-    </h1>
+    <span class='font-thin'>{{slimHeading}}</span>{{strongHeading}}
+  </h1>
 
-    <p class='opacity-75 text-xl mt-4 w-3/4 mx-auto leading-tight'>
-      {{byline}}
-    </p>
+  <p class='opacity-75 text-xl mt-4 w-3/4 mx-auto leading-tight'>
+    {{byline}}
+  </p>
 
-    {{yield}}
-  </div>
+  {{yield}}
 </div>

addon/components/docs-viewer/x-nav-item/component.js

@@ -1,8 +1,9 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import layout from './template';
 import { next } from '@ember/runloop';
 
+import layout from './template';
+
 export default Component.extend({
   layout,
   tagName: '',
@@ -21,7 +22,6 @@ export default Component.extend({
       this.get('docsRoutes.items').addObject(this);
     });
   }
-
 }).reopenClass({
 
   positionalParams: ['label', 'route', 'model']

addon/components/docs-viewer/x-nav-list/component.js

@@ -1,11 +1,14 @@
 import Component from '@ember/component';
-import layout from './template';
+import hbs from 'htmlbars-inline-precompile'
 
 export default Component.extend({
-  layout,
+  tagName: 'ul',
 
-  tagName: ''
-
-  // classNames: 'docs-viewer__nav-list'
+  classNames: ['list-reset'],
 
+  layout: hbs`
+    {{yield (hash
+      item=(component 'docs-viewer/x-nav-item')
+    )}}
+  `
 });

addon/components/docs-viewer/x-nav-list/template.hbs

@@ -31,40 +31,20 @@
       {{yield (hash
         section=(component 'docs-viewer/x-section')
         item=(component 'docs-viewer/x-nav-item')
-        subnav=(component 'docs-viewer/x-nav-list')
+        subnav=(component 'docs-viewer/x-nav-list' class='ml-4')
       )}}
 
       {{!-- Autogenerated API docs --}}
       {{#if (gt project.modules.length 0)}}
         {{docs-viewer/x-section 'API Reference' style='large'}}
 
-        {{#docs-viewer/x-nav-list as |subnav|}}
-          {{#each-in project.navigationIndex as |type items|}}
-            {{docs-viewer/x-section type}}
+        {{#each-in project.navigationIndex as |type items|}}
+          {{docs-viewer/x-section type}}
 
-            {{#docs-viewer/x-nav-list as |subnav|}}
-              {{#if (is-array items)}}
-                {{#each items as |item|}}
-                  {{subnav.item item.name (concat root '.api.item') item.path}}
-                {{/each}}
-              {{else}}
-                {{#each-in items as |module items|}}
-                  {{subnav.item module
-                    (concat root '.api.item')
-                    (concat 'modules/' module)
-                    class="docs-viewer__module-heading"
-                  }}
-
-                  {{#docs-viewer/x-nav-list as |subnav|}}
-                    {{#each items as |item|}}
-                      {{subnav.item item.name (concat root '.api.item') item.path}}
-                    {{/each}}
-                  {{/docs-viewer/x-nav-list}}
-                {{/each-in}}
-              {{/if}}
-            {{/docs-viewer/x-nav-list}}
-          {{/each-in}}
-        {{/docs-viewer/x-nav-list}}
+          {{#each items as |item|}}
+            {{docs-viewer/x-nav-item (break-on item.name '/') (concat root '.api.item') item.path}}
+          {{/each}}
+        {{/each-in}}
       {{/if}}
     {{/docs-viewer/x-nav-list}}
 

addon/components/docs-viewer/x-nav/template.hbs

@@ -1,5 +1,5 @@
 <nav class="hidden lg:block lg:w-1/5 pl-4" data-test-page-index>
-  <div class="sticky pin-t pt-4 -mt-4 max-h-screen overflow-y-scroll">
+  <div class="sticky pin-t pt-4 pb-8 -mt-4 max-h-screen overflow-y-scroll">
     <ul class="list-reset border-l border-grey-lighter pl-6 leading-normal">
       {{#if pageIndex.length}}
         <li class="mt-20 text-grey font-bold tracking-wide uppercase text-xs">

addon/components/docs-viewer/x-page-index/template.hbs

@@ -1,12 +1,18 @@
 import Component from '@ember/component';
-import layout from './template';
+import hbs from 'htmlbars-inline-precompile';
 
 export default Component.extend({
+  tagName: '',
 
-  layout,
-
-  tagName: ''
-
+  layout: hbs`
+    <li class='
+      mt-8 text-grey font-bold
+      tracking-wide uppercase
+      {{if (eq style 'large') '-mb-4 text-sm' 'text-xs'}}
+    '>
+      {{label}}
+    </li>
+  `
 }).reopenClass({
 
   positionalParams: [ 'label' ]

addon/components/docs-viewer/x-section/component.js

@@ -0,0 +1,13 @@
+import { helper } from '@ember/component/helper';
+
+/**
+  Helper function that inserts zero-width spaces after the break character, so
+  that the string will break when wrapping only after that character.
+
+  @hide
+*/
+export function breakOn([string, breakChar]) {
+  return string.replace(new RegExp(breakChar, 'g'), `${breakChar}\u200B`)
+}
+
+export default helper(breakOn);

addon/components/docs-viewer/x-section/template.hbs

@@ -109,26 +109,6 @@ function generateResolvedTypeNavigationItems(modules, type) {
   return _.sortBy(items, ['path']);
 }
 
-function generateModuleNavigationItems(modules, type) {
-  return modules.reduce((navItems, m) => {
-    let items = m[type].map((item) => {
-      let path = item.id ? item.id : `${m.id}#${item.name}`;
-
-      return {
-        path: `modules/${path}`,
-        name: item.name,
-        isDefault: item.exportType === 'default'
-      };
-    });
-
-    if (items.length > 0) {
-      navItems[m.file] = _.sortBy(items, ['name']);
-    }
-
-    return navItems;
-  }, {});
-}
-
 function generateNavigationIndex(modules, klasses) {
   let navigationIndex = {};
 
@@ -138,13 +118,20 @@ function generateNavigationIndex(modules, klasses) {
     navigationIndex[type] = generateResolvedTypeNavigationItems(resolvedModules, type);
   }
 
-  let nonResolvedModules = modules.filter(m => {
-    return !m.file.match(new RegExp(`(${RESOLVED_TYPES.join('|')})/`)) || m.file.match('utils/');
-  })
+  navigationIndex.modules = modules
+    .filter(m => {
+      return (
+        !m.file.match(new RegExp(`(${RESOLVED_TYPES.join('|')})/`)) ||
+        m.file.match('utils/')
+      );
+    })
+    .map(m => {
+      return {
+        path: `modules/${m.id}`,
+        name: m.id
+      };
+    });
 
-  navigationIndex.classes = generateModuleNavigationItems(nonResolvedModules, 'classes');
-  navigationIndex.functions = generateModuleNavigationItems(nonResolvedModules, 'functions');
-  navigationIndex.variables = generateModuleNavigationItems(nonResolvedModules, 'variables');
 
   for (let type in navigationIndex) {
     let items = navigationIndex[type];