Make generated API reference its own top-level section

addon/components/api/x-section/template.hbs

@@ -12,7 +12,7 @@
     {{/if}}
 
     {{#if (or item.isClass item.isComponent)}}
-      {{#link-to 'docs.api.item' (concat 'modules/' item.id) class='hover:underline'}}
+      {{#link-to 'api.item' (concat 'modules/' item.id) class='hover:underline'}}
         <strong>{{item.name}}</strong>
       {{/link-to}}
     {{else}}

addon/components/docs-header/component.js

@@ -35,6 +35,8 @@ export default Component.extend({
 
   projectVersion: service(),
 
+  store: service(),
+
   projectHref,
   latestVersionName,
 
@@ -56,6 +58,10 @@ export default Component.extend({
 
   currentVersion: reads('projectVersion.currentVersion'),
 
+  project: computed('store', function() {
+    return this.get('store').peekRecord('project', projectName);
+  }),
+
   actions: {
     didVisitPage() {
       this.set('query', null);

addon/components/docs-header/search-result/component.js

@@ -16,7 +16,7 @@ export default Component.extend({
       args = [ this.get('result.document.route') ];
 
     } else {
-      args = [ 'docs.api.item', this.get('result.model.routingId') ];
+      args = [ 'api.item', this.get('result.model.routingId') ];
     }
 
     return args;

addon/components/docs-header/search-results/component.js

@@ -73,7 +73,7 @@ export default Component.extend(EKMixin, {
 
         // Filter out the templates of the API items' pages, since we handle them separately
         .filter(({ document }) => {
-          let isApiItemTemplate = (document.route === 'docs.api.item' && document.type === 'template');
+          let isApiItemTemplate = (document.route === 'api.item' && document.type === 'template');
           return !isApiItemTemplate;
         })
 
@@ -106,7 +106,7 @@ export default Component.extend(EKMixin, {
       if (selectedResult.document.type === 'template') {
         this.get('router').transitionTo(selectedResult.document.route);
       } else {
-        this.get('router').transitionTo('docs.api.item', selectedResult.model.get('routingId'));
+        this.get('router').transitionTo('api.item', selectedResult.model.get('routingId'));
       }
     }
 

addon/components/docs-header/template.hbs

@@ -16,6 +16,12 @@
         Documentation
       {{/docs-header/link}}
 
+      {{#if (gt project.modules.length 0)}}
+        {{#docs-header/link 'api'}}
+          API Reference
+        {{/docs-header/link}}
+      {{/if}}
+
       {{yield (hash
         link=(component 'docs-header/link')
       )}}

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

@@ -72,7 +72,7 @@ export default Component.extend({
     path = path.replace(/\./g, '/');
 
     if (path === 'docs/api/item') {
-      let { path } = getOwner(this).lookup('route:application').paramsFor('docs.api.item');
+      let { path } = getOwner(this).lookup('route:application').paramsFor('api.item');
       let file = addonFiles.find(f => f.match(path));
 
       if (file) {

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

@@ -12,7 +12,7 @@ export default Component.extend({
   layout,
   tagName: '',
 
-  root: 'docs',
+  root: 'api',
 
   store: service(),
 

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

@@ -34,18 +34,6 @@
         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'}}
-
-        {{#each-in project.navigationIndex as |type items|}}
-          {{docs-viewer/x-section type}}
-
-          {{#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}}
 
     <div class="docs-mt-16 lg:docs-mb-16 docs-mr-2 docs-text-xs docs-rounded">

addon/router.js

@@ -41,9 +41,8 @@ export default EmberRouter.extend(RouterScroll);
 export function docsRoute(router, callback) {
   router.route('docs', function() {
     callback.apply(this);
-
-    apiRoute(this);
   });
+  apiRoute(router);
 }
 
 export function apiRoute(router) {

addon/routes/api.js

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import config from 'dummy/config/environment';
+
+const projectName = config['ember-cli-addon-docs'].projectName;
+
+export default Route.extend({
+
+  model() {
+    return this.store.findRecord('project', projectName);
+  }
+
+});

addon/routes/api/index.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+
+  beforeModel() {
+    let parentModel = this.modelFor('api');
+    let modules = parentModel.getWithDefault('navigationIndex.modules', []);
+    if (modules.length) {
+      return this.transitionTo('api.item', modules[0].path);
+    }
+    return this.transitionTo('docs');
+  }
+});

app/templates/api.hbs

@@ -0,0 +1,25 @@
+{{#docs-viewer as |viewer|}}
+
+  {{#viewer.nav as |nav|}}
+    {{!-- Autogenerated API docs --}}
+    {{#if (gt model.modules.length 0)}}
+      {{docs-viewer/x-section 'API Reference' style='large'}}
+
+      {{#each-in model.navigationIndex as |type items|}}
+        {{docs-viewer/x-section type}}
+
+        {{#each items as |item|}}
+          {{docs-viewer/x-nav-item (break-on item.name '/') 'api.item' item.path}}
+        {{/each}}
+      {{/each-in}}
+    {{/if}}
+  {{/viewer.nav}}
+
+  {{#viewer.main}}
+    <div class="docs-container">
+      {{outlet}}
+    </div>
+  {{/viewer.main}}
+
+{{/docs-viewer}}
+