WIP: tracking branch for the website redesign RFC

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/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/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/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;
+  }
+}