Removing the tabbed-layout and moving it to an on-this-page layout

app/components/class-field-description.hbs

@@ -1,5 +1,5 @@
 <section class='{{@type}}'>
-  <h3 data-anchor='{{@field.name}}'>
+  <h3 id='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -16,7 +16,7 @@
       <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 --}}>
+    <a class='class-field-description--link' href="#{{@field.name}}" role='link'>
       {{svg-jar 'link' width='20px' height='20px'}}
     </a>
   </h3>

app/components/class-field-description.js

@@ -1,6 +1,5 @@
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 
 export default class ClassFieldDescription extends Component {
   @service
@@ -12,15 +11,4 @@ export default class ClassFieldDescription extends Component {
       this.args.field.class
     );
   }
-
-  /**
-   * Callback for updating the anchor with the field name that was clicked by a user.
-   *
-   * @method updateAnchor
-   * @method fieldName String The name representing the field that was clicked.
-   */
-  @action
-  updateAnchor(fieldName) {
-    this.args.updateAnchor?.(fieldName);
-  }
 }

app/components/ember-landing-page.hbs

@@ -18,11 +18,27 @@
     <li><LinkTo @route='project-version.classes.class' @model='ComputedProperty'>Computed Properties</LinkTo> - declare functions as properties</li>
     {{! template-lint-disable no-potential-path-strings }}
     <li><LinkTo @route='project-version.classes.class' @model='@ember/object/computed'>Computed Macros</LinkTo> - shorter ways of expressing certain types of computed properties</li>
-    <li><LinkTo @route='project-version.classes.class' @model='EmberArray'>EmberArray</LinkTo> - contains methods like <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberArray' 'forEach'}} @query={{hash anchor='forEach'}}>forEach</LinkTo> and <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberArray' 'mapBy'}} @query={{hash anchor='mapBy'}}>mapBy</LinkTo> that help you iterate over Ember Objects</li>
-    <li><LinkTo @route='project-version.classes.class' @model='EmberObject'>EmberObject</LinkTo> - the main base class for all Ember objects, including the <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberObject' 'get'}} @query={{hash anchor='get'}}>get</LinkTo> and <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'EmberObject' 'set'}} @query={{hash anchor='set'}}>set</LinkTo> methods</li>
-    <li><LinkTo @route='project-version.classes.class' @model='Ember.Templates.helpers'>Ember.Templates.helpers</LinkTo> - built-in functions that can be used in templates, such as the <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Ember.Templates.helpers' 'each'}} @query={{hash anchor='each'}}>each</LinkTo>, <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Ember.Templates.helpers' 'on'}} @query={{hash anchor='on'}}>on</LinkTo> and <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Ember.Templates.helpers' 'fn'}} @query={{hash anchor='fn'}}>fn</LinkTo> helpers</li>
+    <li>
+      <LinkTo @route='project-version.classes.class' @model='EmberArray'>EmberArray</LinkTo> - contains methods like
+      <a href="/ember/{{@version}}/classes/EmberArray#forEach">forEach</a> and
+      <a href="/ember/{{@version}}/classes/EmberArray#mapBy">mapBy</a>
+      that help you iterate over Ember Objects
+    </li>
+    <li>
+      <LinkTo @route='project-version.classes.class' @model='EmberObject'>EmberObject</LinkTo> - the main base class for all Ember objects, including the
+      <a href="/ember/{{@version}}/classes/EmberObject#get">get</a> and
+      <a href="/ember/{{@version}}/classes/EmberObject#set">set</a> methods
+    </li>
+    <li>
+      <LinkTo @route='project-version.classes.class' @model='Ember.Templates.helpers'>Ember.Templates.helpers</LinkTo> - built-in functions that can be used in templates, such as the
+      <a href="/ember/{{@version}}/classes/Ember.Templates.helpers#each">each</a> and
+      <a href="/ember/{{@version}}/classes/Ember.Templates.helpers#on">on</a> helpers
+    </li>
     <li><LinkTo @route='project-version.classes.class' @model='Helper'>Helpers</LinkTo> - a way to define custom display functions that are used in templates</li>
-    <li><LinkTo @route='project-version.classes.class' @model='Route'>Route</LinkTo> - used to define individual routes, including the <LinkTo @route='project-version.classes.class.methods.method' @models={{array 'Route' 'model'}} @query={{hash anchor='model'}}>model</LinkTo> hook for loading data</li>
+    <li>
+      <LinkTo @route='project-version.classes.class' @model='Route'>Route</LinkTo> - used to define individual routes, including the
+      <a href="/ember/{{@version}}/classes/Route#model">model</a> hook for loading data
+    </li>
     <li><LinkTo @route='project-version.classes.class' @model='Service'>Service</LinkTo> - an Ember object that lives for the duration of the application, and can be made available in different parts of your application</li>
   </ul>
   <h2>Useful links</h2>

app/templates/events.hbs → app/components/events.hbs

@@ -1,5 +1,4 @@
-<EmberAnchor @a={{this.anchor}} />
-<ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
+<ApiIndexFilter @model={{@model}} @filterData={{@filterData}} as |filteredModel|>
   {{#each filteredModel.events as |event|}}
     <ClassFieldDescription @type="event" @field={{event}} @model={{this.model}} />
   {{/each}}

app/components/methods.hbs

@@ -0,0 +1,5 @@
+<ApiIndexFilter @model={{@model}} @filterData={{@filterData}} as |filteredModel|>
+  {{#each filteredModel.methods as |method|}}
+    <ClassFieldDescription @type="method" @field={{method}} @model={{this.model}} />
+  {{/each}}
+</ApiIndexFilter>

app/components/properties.hbs

@@ -0,0 +1,5 @@
+<ApiIndexFilter @model={{@model}} @filterData={{@filterData}} as |filteredModel|>
+  {{#each filteredModel.properties as |property|}}
+    <ClassFieldDescription @type="property" @field={{property}} @model={{this.model}} />
+  {{/each}}
+</ApiIndexFilter>

app/components/table-of-contents.hbs

@@ -1,3 +1,7 @@
+<label class='toc-private-toggle'>
+  <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
+  Show Private / Deprecated packages
+</label>
 <ul class='table-of-contents '>
   <li class='toc-item toc-group' data-test-toc-title="packages">
     Packages
@@ -38,7 +42,3 @@
     </ul>
   </li>
 </ul>
-<label class='toc-private-toggle'>
-  <input type='checkbox' checked={{@showPrivateClasses}} onchange={{@togglePrivateClasses}} class='private-deprecated-toggle' />
-  Show Private / Deprecated
-</label>

app/controllers/events.js

@@ -1,12 +1,7 @@
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
 
-export default class EventsController extends Controller.extend(
-  AnchorControllerSupport
-) {
+export default class EventsController extends Controller {
   @service
   filterData;
-
-  queryParams = ['anchor'];
 }

app/controllers/methods.js

@@ -1,20 +1,7 @@
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
-import { tracked } from '@glimmer/tracking';
 
-export default class MethodsController extends Controller.extend(
-  AnchorControllerSupport
-) {
+export default class MethodsController extends Controller {
   @service
   filterData;
-
-  @tracked
-  anchor;
-
-  queryParams = ['anchor'];
-
-  updateAnchor(fieldName) {
-    this.anchor = fieldName;
-  }
 }

app/controllers/project-version.js

@@ -149,32 +149,27 @@ export default class ProjectVersionController extends Controller {
         endingRoute = `classes/${className}`;
         break;
       }
-      case 'project-version.classes.class.index': {
-        let className = this._getEncodedNameForCurrentClass();
-        endingRoute = `classes/${className}`;
-        break;
-      }
-      case 'project-version.modules.module.index': {
+      case 'project-version.modules.module': {
         let moduleName = encodeURIComponent(this.moduleController.model.name);
         endingRoute = `modules/${moduleName}`;
         break;
       }
-      case 'project-version.namespaces.namespace.index': {
+      case 'project-version.namespaces.namespace': {
         let namespaceName = this.namespaceController.model.name;
         endingRoute = `namespaces/${namespaceName}`;
         break;
       }
-      case 'project-version.classes.class.methods.index': {
+      case 'project-version.classes.class.methods': {
         let className = this._getEncodedNameForCurrentClass();
         endingRoute = `classes/${className}/methods`;
         break;
       }
-      case 'project-version.classes.class.events.index': {
+      case 'project-version.classes.class.events': {
         let className = this._getEncodedNameForCurrentClass();
         endingRoute = `classes/${className}/events`;
         break;
       }
-      case 'project-version.classes.class.properties.index': {
+      case 'project-version.classes.class.properties': {
         let className = this._getEncodedNameForCurrentClass();
         endingRoute = `classes/${className}/properties`;
         break;

app/controllers/properties.js

@@ -1,19 +1,7 @@
-/* eslint-disable ember/classic-decorator-no-classic-methods */
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
-import AnchorControllerSupport from 'ember-anchor/mixins/controller-support';
 
-export default class PropertiesController extends Controller.extend(
-  AnchorControllerSupport
-) {
+export default class PropertiesController extends Controller {
   @service
   filterData;
-
-  queryParams = ['anchor'];
-
-  @action
-  updateAnchor(fieldName) {
-    this.set('anchor', fieldName);
-  }
 }

app/router.js

@@ -46,7 +46,7 @@ AppRouter.map(function () {
       // project-version.classes-redirect => project-version.classes.index
       // project-version.class => project-version.classes.class
       this.route('classes', function () {
-        this.route('class', { path: '/:class' }, itemRoutes);
+        this.route('class', { path: '/:class' });
       });
       // this.route('class', {path: '/classes/:class'}, itemRoutes);
 
@@ -58,7 +58,7 @@ AppRouter.map(function () {
       // project-version.namespace => project-version.namespaces.namespace
       //    routes/project-version/namespace   =>  routes/project-version/namespaces/namespace
       this.route('namespaces', function () {
-        this.route('namespace', { path: '/:namespace' }, itemRoutes);
+        this.route('namespace', { path: '/:namespace' });
       });
       // this.route('namespace', {path: '/namespaces/:namespace'}, itemRoutes);
 
@@ -67,22 +67,9 @@ AppRouter.map(function () {
       //    routes/project-version/module   =>  routes/project-version/modules/module
       //    routes/project-version/module/* =>  routes/project-version/modules/module/*
       this.route('modules', function () {
-        this.route('module', { path: '/:module' }, itemRoutes);
+        this.route('module', { path: '/:module' });
       });
       // this.route('module', {path: '/modules/:module'}, itemRoutes);
-
-      // Common sub-routes
-      function itemRoutes() {
-        this.route('methods', function () {
-          this.route('method', { path: '/:method' });
-        });
-        this.route('properties', function () {
-          this.route('property', { path: '/:property' });
-        });
-        this.route('events', function () {
-          this.route('event', { path: '/:event' });
-        });
-      }
     }
   );
   this.route('class', { path: '/classes/:class' });
@@ -97,24 +84,6 @@ AppRouter.map(function () {
 ember-cli
 project
 
-/:project/:project_version
-  /classes/:class
-    /methods, /properties, /events
-  /functions/:module (no sub routes)
-  /namespaces/:namespace
-    /methods, /properties, /events
-  /modules/:module
-    /methods, /properties, /events
-
-SUB ROUTES
-
-Instead of https://api.emberjs.com/ember/4.6/classes/Engine/methods/unregister?anchor=unregister
-We can do https://api.emberjs.com/ember/4.6/classes/Engine/methods?anchor=unregister
-
-  /methods/:method
-  /properties/:property
-  /events/:event
-
 OTHER STATES
 private, deprecated, inherited, protected
 inherited is not reflected in URL state but it's checked by default

app/routes/project-version.js

@@ -3,6 +3,7 @@ import Route from '@ember/routing/route';
 import semverCompare from 'semver-compare';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 import getLastVersion from 'ember-api-docs/utils/get-last-version';
+
 import config from 'ember-api-docs/config/environment';
 
 export default class ProjectVersionRoute extends Route {

app/routes/project-version/classes/class.js

@@ -2,12 +2,12 @@ import { inject as service } from '@ember/service';
 import { resolve, all } from 'rsvp';
 import Route from '@ember/routing/route';
 import { set } from '@ember/object';
-import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
+
 import { pluralize } from 'ember-inflector';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 import createExcerpt from 'ember-api-docs/utils/create-excerpt';
 
-export default class ClassRoute extends Route.extend(ScrollTracker) {
+export default class ClassRoute extends Route {
   /** @type {import('@ember/routing/router-service').default} */
   @service
   router;