Fixes to class item descriptions

app/components/class-field-description.hbs

@@ -1,24 +1,23 @@
 {{! template-lint-disable no-invalid-interactive }}
-<section class='{{@type}}'>
-  <h3 id='{{@field.name}}'>
-    <span class='{{@type}}-name'>{{@field.name}}</span>
-    {{#if @field.params}}
-      <span class='args'>
-        ({{join ', ' (map-by 'name' @field.params)}})
+<section class='class-field-description {{@type}}'>
+  <h3 id='{{@field.name}}' class="class-field-description--header">
+    <span class="signature">
+      <span class='{{@type}}-name'>
+        {{@field.name}}
       </span>
-    {{/if}}
-    {{#if @field.return}}
-      <span class='return-type'>{{@field.return.type}}</span>
-    {{/if}}
+      {{#if @field.params}}(<span class='args'>{{join ', ' (map-by 'name' @field.params)}}</span>){{/if}}
+      {{#if @field.return}}
+        : <span class='return-type'>{{@field.return.type}}</span>
+      {{/if}}
+    </span>
     {{#if @field.access}}
       <span class='access'>{{@field.access}}</span>
     {{/if}}
     {{#if @field.deprecated}}
       <span class='access'>deprecated</span>
     {{/if}}
-    {{!-- TODO: Fix this link for a11y --}}
-    <a class='class-field-description--link' href="#{{@field.name}}">
-      {{svg-jar 'link' width='20px' height='20px'}}
+    <a class='class-field-description--link' href="#{{@field.name}}" aria-label="Jump to {{@field.name}}">
+      {{svg-jar 'link' width='20px' height='20px' aria-hidden='true'}}
     </a>
   </h3>
   {{#if @model.module}}

app/components/events.hbs

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

app/components/methods.hbs

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

app/components/properties.hbs

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

app/controllers/project-version.js

@@ -25,9 +25,6 @@ export default class ProjectVersionController extends Controller {
   @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;
@@ -159,39 +156,6 @@ export default class ProjectVersionController extends Controller {
         endingRoute = `namespaces/${namespaceName}`;
         break;
       }
-      case 'project-version.classes.class.methods': {
-        let className = this._getEncodedNameForCurrentClass();
-        endingRoute = `classes/${className}/methods`;
-        break;
-      }
-      case 'project-version.classes.class.events': {
-        let className = this._getEncodedNameForCurrentClass();
-        endingRoute = `classes/${className}/events`;
-        break;
-      }
-      case 'project-version.classes.class.properties': {
-        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;

app/router.js

@@ -41,35 +41,23 @@ AppRouter.map(function () {
     'project-version',
     { path: '/:project/:project_version' },
     function () {
-      // this.route('classes-redirect', {path: '/classes'});
-
-      // project-version.classes-redirect => project-version.classes.index
-      // project-version.class => project-version.classes.class
       this.route('classes', function () {
         this.route('class', { path: '/:class' });
       });
-      // this.route('class', {path: '/classes/:class'}, itemRoutes);
 
       this.route('functions', function () {
         this.route('function', { path: '/:module/:fn' });
       });
 
       // Namespace routes
-      // 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' });
       });
-      // this.route('namespace', {path: '/namespaces/:namespace'}, itemRoutes);
 
       // Module routes
-      // project-version.module => project-version.modules.module
-      //    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' });
       });
-      // this.route('module', {path: '/modules/:module'}, itemRoutes);
     }
   );
   this.route('class', { path: '/classes/:class' });
@@ -94,6 +82,8 @@ MAYBE REDIRECTS
 /data/classes/:class
 /modules/:module
 /classes/:class
+
+See _redirects for netlify redirects
 */
 
 export default AppRouter;

app/routes/not-found.js

@@ -11,4 +11,23 @@ export default class NotFoundRoute extends Route {
 
     this.fastboot.response.statusCode = 404;
   }
+
+  redirect() {
+    if (typeof window === 'undefined' || !window.location) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    const anchor = url.searchParams.get('anchor');
+    const redirected = url.searchParams.get('redirected');
+    if (anchor && !redirected) {
+      url.searchParams.set('redirected', '1');
+      // If we get here with an anchor query param, it means something in the
+      // api docs app is continuing to link to it (sometimes in the markdown)
+      // Force full reload to get netlify redirects
+      window.location.replace(url.toString());
+      // A more elegant solution would be to restore the various routes that
+      // handled ?anchor previously and redirect from there but that would
+      // necessitate adding support to the Ember Router to redirect to #anchors
+    }
+  }
 }

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

@@ -3,7 +3,6 @@ import { resolve, all } from 'rsvp';
 import Route from '@ember/routing/route';
 import { set } from '@ember/object';
 
-import { pluralize } from 'ember-inflector';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
 import createExcerpt from 'ember-api-docs/utils/create-excerpt';
 
@@ -60,27 +59,7 @@ export default class ClassRoute extends Route {
     });
   }
 
-  redirect(model, transition) {
-    const lookupParams = (routeName) => {
-      let route = transition.routeInfos.find(({ name }) => name === routeName);
-      return route ? route.params : {};
-    };
-
-    let {
-      to: { queryParams },
-    } = transition;
-
-    if (queryParams.anchor && queryParams.type) {
-      let type = queryParams.type;
-      this.router.transitionTo(
-        `project-version.classes.class.${pluralize(type)}.${type}`,
-        lookupParams('project-version').project,
-        lookupParams('project-version').project_version,
-        lookupParams('project-version.classes.class').class,
-        queryParams.anchor
-      );
-    }
-
+  redirect(model) {
     if (model.isError) {
       let error = new Error(
         'Error retrieving model in routes/project-version/classes/class'

app/styles/app.css

@@ -11,14 +11,16 @@ html {
 }
 
 .module-name {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
   margin-bottom: 0;
 }
 
 .access {
   color: #fff;
   background-color: var(--color-gray-600);
-  margin-left: var(--spacing-1);
   padding: 0.25rem var(--spacing-1);
   font-size: var(--font-size-md);
   border-radius: var(--radius);
@@ -103,8 +105,15 @@ li.toc-heading:first-child {
   margin-top: var(--spacing-2);
 }
 
+.class-field-description--header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: var(--spacing-1);
+}
+
 a.class-field-description--link {
-  margin-left: 12px;
+  margin-left: 0;
   vertical-align: middle;
   background: none;
   cursor: pointer;
@@ -136,7 +145,12 @@ dd {
   margin: 0;
 }
 
+.class-field-description .args {
+  font-weight: var(--font-weight-2);
+}
+
 .parameter-type,
+.class-field-description .return-type,
 .return .return-type {
   font-style: italic;
   color: var(--color-gray-600);

package.json

@@ -98,6 +98,7 @@
     "ember-qunit": "^6.2.0",
     "ember-resolver": "^10.0.0",
     "ember-rfc176-data": "^0.3.17",
+    "ember-router-scroll": "^4.1.2",
     "ember-showdown-shiki": "^1.2.1",
     "ember-sinon": "^4.1.1",
     "ember-source": "~4.12.0",