WIP: tracking branch for the website redesign RFC

app/app.js

@@ -2,10 +2,13 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'ember-api-docs/config/environment';
-
-import './deprecation-workflow';
+import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
 import 'ember-power-select/styles';
 
+if (macroCondition(isDevelopingApp())) {
+  importSync('./deprecation-workflow');
+}
+
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;

app/components/class-field-description.hbs

@@ -1,9 +1,5 @@
 <section class='{{@type}}'>
-  {{!-- TODO: Fix this link for a11y --}}
-  <h3 class='class-field-description--link' data-anchor='{{@field.name}}' role='link' {{on 'click' (fn this.updateAnchor @field.name)}}>
-    <a class='anchor' {{!-- template-lint-disable link-href-attributes --}}>
-      {{svg-jar 'fa-link' class='class-field-description--link-hover' width='20px' height='20px'}}
-    </a>
+  <h3 data-anchor='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -19,6 +15,10 @@
     {{#if @field.deprecated}}
       <span class='access'>deprecated</span>
     {{/if}}
+    {{!-- TODO: Fix this link for a11y --}}
+    <a class='class-field-description--link' data-test-anchor="{{@field.name}}" role='link' {{on 'click' (fn this.updateAnchor @field.name)}} {{!-- template-lint-disable link-href-attributes --}}>
+      {{svg-jar 'link' width='20px' height='20px'}}
+    </a>
   </h3>
   {{#if @model.module}}
     <div class='attributes'>

app/components/ember-data-landing-page.hbs

@@ -2,6 +2,7 @@
   <h1>
     Ember Data API Documentation
   </h1>
+  <hr>
   <p>
     Ember Data is a library for robustly managing data in applications built with Ember.js.
   </p>

app/components/ember-landing-page.hbs

@@ -1,5 +1,6 @@
 <article class="chapter">
   <h1>Ember API Documentation</h1>
+  <hr>
   <p>
     To get started, choose a project (Ember or Ember Data) and a version
     from the dropdown menu. Ember has core methods used in any app, while Ember Data has

app/components/search-input.hbs

@@ -16,10 +16,9 @@
     @targetAttachment='bottom left'
     @attachment='top left'
     @constraints={{this._resultTetherConstraints}}
-    @class='ds-dropdown-results'
+    class='ds-dropdown-results'
   >
     <SearchInput::Dropdown
-      @isVisible={{this._focused}}
       @results={{this.searchService.results}}
       @noResults={{if
         (and

app/components/search-input/dropdown.js

@@ -14,8 +14,6 @@ export default class Dropdown extends Component {
   // Public API
   role = 'listbox';
 
-  isVisible = false;
-
   // show
   // Massage data to make it easier for displaying on the template
   // Returned object:

app/components/table-of-contents.hbs

@@ -1,43 +1,43 @@
-<ol class='toc-level-0'>
-  <li class='toc-level-0'>
-    <a {{on 'click' (fn this.toggle 'modules')}} href='#' data-test-toc-title='packages'>Packages</a>
-    <ol class='toc-level-1 modules selected'>
+<ul class='table-of-contents '>
+  <li class='toc-item toc-group' data-test-toc-title="packages">
+    Packages
+    <ul class='sub-table-of-contents modules'>
       {{#each @moduleIDs as |moduleID|}}
 
         {{#if (not-eq moduleID '@ember/object/computed')}}
-          <li class='toc-level-1' data-test-module={{moduleID}}>
+          <li class='toc-item toc-link' data-test-module={{moduleID}}>
             <LinkTo @route='project-version.modules.module' @models={{array @version moduleID}}>{{moduleID}}</LinkTo>
           </li>
         {{/if}}
 
       {{/each}}
-    </ol>
+    </ul>
   </li>
 
   {{#if @isShowingNamespaces}}
-    <li class='toc-level-0'>
-      <a {{on 'click' (fn this.toggle 'namespaces')}} href='#' data-test-toc-title='namespaces'>Namespaces</a>
-      <ol class='toc-level-1 namespaces selected'>
+    <li class='table-of-contents' data-test-toc-title="namespaces">
+      Namespaces
+      <ul class='sub-table-of-contents namespaces'>
         {{#each @namespaceIDs as |namespaceID|}}
-          <li class='toc-level-1' data-test-namespace={{namespaceID}}>
+          <li class='toc-item toc-link' data-test-namespace={{namespaceID}}>
             <LinkTo @route='project-version.namespaces.namespace' @models={{array @version namespaceID}}>{{namespaceID}}</LinkTo>
           </li>
         {{/each}}
-      </ol>
+      </ul>
     </li>
   {{/if}}
 
-  <li class='toc-level-0'>
-    <a {{on 'click' (fn this.toggle 'classes')}} href='#' data-test-toc-title='classes'>Classes</a>
-    <ol class='toc-level-1 classes selected'>
+  <li class='table-of-contents' data-test-toc-title="classes">
+    Classes
+    <ul class='sub-table-of-contents classes'>
       {{#each @classesIDs as |classID|}}
-        <li class='toc-level-1' data-test-class={{classID}}>
+        <li class='toc-item toc-link' data-test-class={{classID}}>
           <LinkTo @route='project-version.classes.class' @models={{array @version classID}}>{{classID}}</LinkTo>
         </li>
       {{/each}}
-    </ol>
+    </ul>
   </li>
-</ol>
+</ul>
 <label class='toc-private-toggle'>
   <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
   Show Private / Deprecated

app/components/table-of-projects.hbs

@@ -0,0 +1,11 @@
+<ul class="table-of-contents">
+  <li class="toc-item" data-test-home>
+    <LinkTo @route="project" @model="ember">Home</LinkTo>
+  </li>
+  <li>Projects</li>
+  <ul class="sub-table-of-contents">
+    <li class="toc-item"><LinkTo @route="project" @model="ember" @current-when={{eq @activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
+    <li class="toc-item"><LinkTo @route="project" @model="ember-data" @current-when={{eq @activeProject "ember-data"}} class="spec-ember-data">EmberData</LinkTo></li>
+    <li class="toc-item"><LinkTo @route="project" @model="ember-cli" @current-when={{eq @activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
+  </ul>
+</ul>

app/controllers/project-version.js

@@ -2,7 +2,7 @@
 import { action, computed, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { readOnly, alias } from '@ember/object/computed';
-import Controller from '@ember/controller';
+import Controller, { inject as controller } from '@ember/controller';
 import { A } from '@ember/array';
 import values from 'lodash.values';
 import groupBy from 'lodash.groupby';
@@ -19,6 +19,16 @@ export default class ProjectVersionController extends Controller {
   @service
   project;
 
+  @service router;
+  @service('project') projectService;
+
+  @controller('project-version.classes.class') classController;
+  @controller('project-version.modules.module') moduleController;
+  @controller('project-version.namespaces.namespace') namespaceController;
+  @controller('project-version.classes.class.methods') methodsController;
+  @controller('project-version.classes.class.events') eventsController;
+  @controller('project-version.classes.class.properties') propertiesController;
+
   @alias('filterData.sideNav.showPrivate')
   showPrivateClasses;
 
@@ -128,4 +138,102 @@ export default class ProjectVersionController extends Controller {
   togglePrivateClasses() {
     set(this, 'showPrivateClasses', !this.showPrivateClasses);
   }
+
+  @action
+  updateProject(project, ver /*, component */) {
+    let projectVersionID = ver.compactVersion;
+    let endingRoute;
+    switch (this.router.currentRouteName) {
+      case 'project-version.classes.class': {
+        let className = this._getEncodedNameForCurrentClass();
+        endingRoute = `classes/${className}`;
+        break;
+      }
+      case 'project-version.classes.class.index': {
+        let className = this._getEncodedNameForCurrentClass();
+        endingRoute = `classes/${className}`;
+        break;
+      }
+      case 'project-version.modules.module.index': {
+        let moduleName = encodeURIComponent(this.moduleController.model.name);
+        endingRoute = `modules/${moduleName}`;
+        break;
+      }
+      case 'project-version.namespaces.namespace.index': {
+        let namespaceName = this.namespaceController.model.name;
+        endingRoute = `namespaces/${namespaceName}`;
+        break;
+      }
+      case 'project-version.classes.class.methods.index': {
+        let className = this._getEncodedNameForCurrentClass();
+        endingRoute = `classes/${className}/methods`;
+        break;
+      }
+      case 'project-version.classes.class.events.index': {
+        let className = this._getEncodedNameForCurrentClass();
+        endingRoute = `classes/${className}/events`;
+        break;
+      }
+      case 'project-version.classes.class.properties.index': {
+        let className = this._getEncodedNameForCurrentClass();
+        endingRoute = `classes/${className}/properties`;
+        break;
+      }
+      case 'project-version.classes.class.methods.method': {
+        let className = this._getEncodedNameForCurrentClass();
+        let methodName = this.methodsController.anchor;
+        endingRoute = `classes/${className}/methods/${methodName}?anchor=${methodName}`;
+        break;
+      }
+      case 'project-version.classes.class.events.event': {
+        let className = this._getEncodedNameForCurrentClass();
+        let eventName = this.eventsController.anchor;
+        endingRoute = `classes/${className}/events/${eventName}?anchor=${eventName}`;
+        break;
+      }
+      case 'project-version.classes.class.properties.property': {
+        let className = this._getEncodedNameForCurrentClass();
+        let propertyName = this.propertiesController.anchor;
+        endingRoute = `classes/${className}/properties/${propertyName}?anchor=${propertyName}`;
+        break;
+      }
+      default:
+        endingRoute = '';
+        break;
+    }
+    // if the user is navigating to/from api versions >= 2.16, take them
+    // to the home page instead of trying to translate the url
+    let shouldConvertPackages = this._shouldConvertPackages(
+      ver,
+      this.projectService.version
+    );
+    let isEmberProject = project === 'ember';
+
+    if (!isEmberProject || !shouldConvertPackages) {
+      this.router.transitionTo(
+        `/${project}/${projectVersionID}/${endingRoute}`
+      );
+    } else {
+      this.router.transitionTo(`/${project}/${projectVersionID}`);
+    }
+  }
+
+  _getEncodedNameForCurrentClass() {
+    // escape any reserved characters for url, like slashes
+    return encodeURIComponent(this.classController.model.get('name'));
+  }
+
+  // Input some version info, returns a boolean based on
+  // whether the user is switching versions for a 2.16 docs release or later.
+  // The urls for pre-2.16 classes and later packages are quite different
+  _shouldConvertPackages(targetVer, previousVer) {
+    let targetVersion = getCompactVersion(targetVer.id);
+    let previousVersion = getCompactVersion(previousVer);
+    let previousComparison = semverCompare(previousVersion, '2.16');
+    let targetComparison = semverCompare(targetVersion, '2.16');
+    return (
+      (previousComparison < 0 && targetComparison >= 0) ||
+      (previousComparison >= 0 && targetComparison < 0)
+    );
+  }
 }

app/deprecation-workflow.js

@@ -1,13 +1,14 @@
 import setupDeprecationWorkflow from 'ember-cli-deprecation-workflow';
 
 setupDeprecationWorkflow({
+  throwOnUnhandled: true,
   workflow: [
-    { handler: 'silence', matchId: 'ember.component.reopen' },
-    { handler: 'silence', matchId: 'implicit-injections' },
-    { handler: 'silence', matchId: 'this-property-fallback' },
-    { handler: 'silence', matchId: 'ember-component.is-visible' },
+    { handler: 'throw', matchId: 'ember.component.reopen' },
+    { handler: 'throw', matchId: 'implicit-injections' },
+    { handler: 'throw', matchId: 'this-property-fallback' },
+    { handler: 'throw', matchId: 'ember-component.is-visible' },
     {
-      handler: 'silence',
+      handler: 'throw',
       matchId: 'deprecated-run-loop-and-computed-dot-access',
     },
   ],

app/router.js

@@ -89,6 +89,7 @@ AppRouter.map(function () {
   this.route('module', { path: '/modules/:module' });
   this.route('data-class', { path: '/data/classes/:class' });
   this.route('data-module', { path: '/data/modules/:module' });
+  this.route('not-found', { path: '/*' });
 });
 
 /*

app/routes/application.js

@@ -2,7 +2,6 @@ import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
 import { set } from '@ember/object';
 import ENV from 'ember-api-docs/config/environment';
-import getCompactVersion from 'ember-api-docs/utils/get-compact-version';
 
 export default class ApplicationRoute extends Route {
   @service
@@ -11,22 +10,6 @@ export default class ApplicationRoute extends Route {
   @service
   legacyModuleMappings;
 
-  title(tokens) {
-    let [version, entity] = tokens;
-    if (!entity) {
-      entity = 'Ember';
-    }
-    if (version) {
-      const compactVersion = getCompactVersion(version);
-      const title = `${[entity, compactVersion].join(
-        ' - '
-      )} - Ember API Documentation`;
-      set(this, 'headData.title', title);
-      return title;
-    }
-    return '';
-  }
-
   async afterModel() {
     set(this, 'headData.cdnDomain', ENV.API_HOST);
     await this.legacyModuleMappings.initMappings();

app/routes/not-found.js

@@ -0,0 +1,14 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class NotFoundRoute extends Route {
+  @service fastboot;
+
+  beforeModel() {
+    if (!this.fastboot.isFastBoot) {
+      return;
+    }
+
+    this.fastboot.response.statusCode = 404;
+  }
+}