WIP: tracking branch for the website redesign RFC

.ember-cli

@@ -5,5 +5,11 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": false,
+
+  /**
+    Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+    rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
 }

.eslintignore

@@ -16,10 +16,13 @@
 .*/
 .eslintcache
 
+# data git checkout
+/ember-api-docs-data/
+
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
-
-# data git checkout
-/ember-api-docs-data/
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.eslintrc.js

@@ -2,12 +2,15 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
+      ],
     },
   },
   plugins: ['ember'],
@@ -35,6 +38,7 @@ module.exports = {
       files: [
         './.eslintrc.js',
         './.prettierrc.js',
+        './.stylelintrc.js',
         './.template-lintrc.js',
         './ember-cli-build.js',
         './testem.js',
@@ -55,16 +59,10 @@ module.exports = {
         browser: false,
         node: true,
       },
-      plugins: ['node'],
-      extends: ['plugin:node/recommended'],
-      rules: {
-        // this can be removed once the following is fixed
-        // https://github.com/mysticatea/eslint-plugin-node/issues/77
-        'node/no-unpublished-require': 'off',
-      },
+      extends: ['plugin:n/recommended'],
     },
     {
-      // Test files:
+      // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
     },

.github/workflows/ci.yml

@@ -3,59 +3,52 @@ name: CI
 on:
   push:
     branches:
+      - main
       - master
-  pull_request:
+  pull_request: {}
 
 env:
   NODE_VERSION: 20
   PERCY_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}
   PERCY_PARALLEL_TOTAL: 1
 
+concurrency:
+  group: ci-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   lint:
-    name: Lint files
+    name: "Lint"
     runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - name: Check out a copy of the repo
-        uses: actions/checkout@v4
+    timeout-minutes: 10
 
+    steps:
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
+          cache: pnpm
           node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install dependencies
-        run: pnpm i --frozen-lockfile
-
+      - name: Install Dependencies
+        run: pnpm install
       - name: Lint
         run: pnpm run lint
 
-
-  test-app:
-    name: Test app
+  test:
+    name: "Test"
     runs-on: ubuntu-latest
     timeout-minutes: 10
-    steps:
-      - name: Check out a copy of the repo
-        uses: actions/checkout@v4
 
+    steps:
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
+          cache: pnpm
           node-version: ${{ env.NODE_VERSION }}
-
-      - run: pnpm install --frozen-lockfile
-
+      - run: pnpm install
       - run: pnpm run clone
-
-      - name: Test
+      - name: Run Tests
         env:
           PERCY_PARALLEL_NONCE: ${{ env.PERCY_PARALLEL_NONCE }}
           PERCY_PARALLEL_TOTAL: ${{ env.PERCY_PARALLEL_TOTAL }}

.gitignore

@@ -36,10 +36,17 @@ browserstack-local.pid
 local.log
 .vscode/
 
+# ember-api-docs-data checkout
+/ember-api-docs-data/
+/ember-api-docs-data
+
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
 
-/ember-api-docs-data/
-/ember-api-docs-data
+# broccoli-debug
+/DEBUG/

.prettierignore

@@ -14,8 +14,12 @@
 /coverage/
 !.*
 .eslintcache
+.lint-todo/
 
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.prettierrc.js

@@ -1,5 +1,12 @@
 'use strict';
 
 module.exports = {
-  singleQuote: true,
+  overrides: [
+    {
+      files: '*.{js,ts}',
+      options: {
+        singleQuote: true,
+      },
+    },
+  ],
 };

.stylelintignore

@@ -0,0 +1,8 @@
+# unconventional files
+/blueprints/*/files/
+
+# compiled output
+/dist/
+
+# addons
+/.node_modules.ember-try/

.stylelintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+};

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,6 @@
+{{! template-lint-disable no-invalid-interactive }}
 <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 +16,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}}" {{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,14 +1,22 @@
 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',
     },
+    {
+      handler: 'silence',
+      matchId: 'ember-data:deprecate-non-strict-relationships',
+    },
+    { handler: 'silence', matchId: 'ember-data:deprecate-store-find' },
+    { handler: 'silence', matchId: 'remove-owner-inject' },
+    { handler: 'silence', matchId: 'ember-polyfills.deprecate-assign' },
   ],
 });

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

app/routes/project-version.js

@@ -1,8 +1,6 @@
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Route from '@ember/routing/route';
 import semverCompare from 'semver-compare';
-import getCompactVersion from 'ember-api-docs/utils/get-compact-version';
 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';
@@ -21,13 +19,11 @@ export default class ProjectVersionRoute extends Route {
   @service
   router;
 
+  @service store;
+
   @service('project')
   projectService;
 
-  titleToken(model) {
-    return model.version;
-  }
-
   async model({ project, project_version }) {
     let projectObj = await this.store.findRecord('project', project);
     let projectVersion = getFullVersion(
@@ -130,122 +126,13 @@ export default class ProjectVersionRoute extends Route {
     }
   }
 
-  _getEncodedNameForCurrentClass() {
-    // escape any reserved characters for url, like slashes
-    return encodeURIComponent(
-      this.modelFor('project-version.classes.class').get('name')
-    );
-  }
-
   serialize(model) {
     return {
       project: model.get('project.id'),
       project_version: model.get('compactVersion'),
     };
   }
 
-  @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.paramsFor('project-version.modules.module').module
-        );
-        endingRoute = `modules/${moduleName}`;
-        break;
-      }
-      case 'project-version.namespaces.namespace.index': {
-        let namespaceName = this.paramsFor(
-          'project-version.namespaces.namespace'
-        ).namespace;
-        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.paramsFor(
-          'project-version.classes.class.methods.method'
-        ).method;
-        endingRoute = `classes/${className}/methods/${methodName}?anchor=${methodName}`;
-        break;
-      }
-      case 'project-version.classes.class.events.event': {
-        let className = this._getEncodedNameForCurrentClass();
-        let eventName = this.paramsFor(
-          'project-version.classes.class.events.event'
-        ).event;
-        endingRoute = `classes/${className}/events/${eventName}?anchor=${eventName}`;
-        break;
-      }
-      case 'project-version.classes.class.properties.property': {
-        let className = this._getEncodedNameForCurrentClass();
-        let propertyName = this.paramsFor(
-          'project-version.classes.class.properties.property'
-        ).property;
-        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}`);
-    }
-  }
-
-  // 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)
-    );
-  }
-
   /**
      splits the first encoded revision string in the list and takes the string after the version (which is the encoded name), then decodes the result.
      */

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

@@ -18,9 +18,7 @@ export default class ClassRoute extends Route.extend(ScrollTracker) {
   @service
   metaStore;
 
-  titleToken(model) {
-    return model.name;
-  }
+  @service store;
 
   async model(params) {
     const { project, project_version: compactVersion } =

app/routes/project-version/functions/function.js

@@ -14,9 +14,7 @@ export default class FunctionRoute extends Route {
   @service
   scrollPositionReset;
 
-  titleToken(model) {
-    return model?.fn?.name;
-  }
+  @service store;
 
   async model(params) {
     const pVParams = this.paramsFor('project-version');

app/routes/project-version/modules/module.js

@@ -1,8 +1,11 @@
 import ClassRoute from '../classes/class';
 import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
+import { inject as service } from '@ember/service';
 
 export default class ModuleRoute extends ClassRoute.extend(ScrollTracker) {
+  @service store;
+
   async model(params) {
     const { project, project_version: compactVersion } =
       this.paramsFor('project-version');

app/routes/project-version/namespaces/namespace.js

@@ -1,23 +1,32 @@
 import ClassRoute from '../classes/class';
 import ScrollTracker from 'ember-api-docs/mixins/scroll-tracker';
 import getFullVersion from 'ember-api-docs/utils/get-full-version';
+import { inject as service } from '@ember/service';
 
 export default class NamespaceRoute extends ClassRoute.extend(ScrollTracker) {
+  @service store;
+
   templateName = 'project-version/classes/class';
 
   async model(params) {
     const { project, project_version: compactVersion } =
       this.paramsFor('project-version');
 
-    let projectRecord = await this.store.findRecord('project', project);
+    let projectRecord = await this.store.findRecord(
+      'project',
+      project.toLowerCase()
+    );
     let projectVersion = getFullVersion(
       compactVersion,
       project,
       projectRecord,
       this.metaStore
     );
     const klass = params['namespace'];
-    return this.find('namespace', `${project}-${projectVersion}-${klass}`);
+    return this.find(
+      'namespace',
+      `${project}-${projectVersion}-${klass}`.toLowerCase()
+    );
   }
 
   serialize(model) {

app/routes/project.js

@@ -7,6 +7,8 @@ export default class ProjectRoute extends Route.extend(ScrollTracker) {
   @service
   router;
 
+  @service store;
+
   model({ project: projectName }) {
     let projectNameToLookUp = 'ember';
 

app/styles/app.css

@@ -0,0 +1,178 @@
+/* stylelint-disable no-descending-specificity, selector-class-pattern */
+.article-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.module-name {
+  display: inline-block;
+  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);
+  vertical-align: middle;
+}
+
+main a.edit-icon {
+  height: 1rem;
+  width: 16px;
+  display: inline-block;
+  background: none;
+}
+
+.sidebar-container {
+  --sidebar-width: min-content;
+}
+
+.es-sidebar-content .table-of-contents:first-child {
+  margin-block-start: 0;
+}
+
+.table-of-contents {
+  list-style-type: none;
+  padding-left: 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-3);
+}
+
+.sub-table-of-contents {
+  padding-left: var(--spacing-1);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-2);
+}
+
+.sub-table-of-contents .sub-table-of-contents {
+  padding-left: var(--spacing-3);
+  margin-bottom: 0;
+}
+
+.table-of-contents a:link {
+  background: none;
+}
+
+.sub-table-of-contents .toc-item a {
+  display: block;
+  padding: var(--spacing-1);
+  border-radius: var(--radius);
+  line-height: var(--line-height-xs);
+  color: var(--color-gray-700);
+  border-left: 0 solid transparent;
+  transition: border-width 0.3s;
+}
+
+.sub-table-of-contents .toc-item a:hover {
+  border-left: 4px solid var(--color-gray-400);
+  border-radius: 0;
+}
+
+.sub-table-of-contents .toc-item.selected > a,
+.sub-table-of-contents .toc-item > a.active {
+  border-left: 4px solid var(--color-brand-hc-dark);
+  border-radius: 0;
+}
+
+.table-of-contents li {
+  margin: 3px 0;
+  list-style-type: none;
+  color: var(--color-gray-600);
+}
+
+li.toc-heading {
+  margin-top: var(--spacing-4);
+  color: var(--color-gray-600);
+}
+
+li.toc-heading:first-child {
+  margin-top: 0;
+}
+
+a.class-field-description--link {
+  margin-left: 12px;
+  vertical-align: middle;
+  background: none;
+  cursor: pointer;
+}
+
+a.class-field-description--link svg {
+  height: 18px;
+  fill: var(--color-gray-600);
+  transform: rotate(45deg);
+  vertical-align: middle;
+}
+
+a.class-field-description--link:hover svg {
+  fill: var(--color-brand);
+}
+
+.parameter,
+.return {
+  display: flex;
+  gap: var(--spacing-1);
+}
+
+.parameter dt,
+.return dt {
+  font-weight: bold;
+}
+
+dd {
+  margin: 0;
+}
+
+.parameter-type,
+.return .return-type {
+  font-style: italic;
+  color: var(--color-gray-600);
+}
+
+.whoops {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-6);
+}
+
+.whoops img {
+  width: 240px;
+  margin: var(--spacing-2);
+}
+
+@media (width >= 845px) {
+  .es-header {
+    padding: 0 var(--spacing-4);
+    justify-content: start;
+  }
+
+  .es-sidebar {
+    padding: var(--spacing-4);
+    background-color: var(--color-gray-200);
+  }
+
+  .content {
+    margin-top: var(--spacing-4);
+  }
+}
+
+@media (width <= 450px) {
+  .whoops {
+    flex-direction: column;
+    padding: var(--spacing-3);
+  }
+
+  .whoops img {
+    width: 80%;
+    margin: var(--spacing-4);
+  }
+
+  .whoops__message {
+    margin: var(--spacing-2);
+    text-align: center;
+  }
+}

app/templates/application.hbs

@@ -1,14 +1,14 @@
+{{page-title "Ember API Documentation"}}
+
+<HeadLayout />
+
 <EsHeader>
-  <EsNavbar @links={{this.links}}>
-    <SearchInput />
-  </EsNavbar>
+  {{!-- <SearchInput /> --}}
 </EsHeader>
-<main class="container">
+
+<main>
   {{outlet}}
 </main>
-<EsFooter />
-
-{{!-- required by ember-cli-meta-tags --}}
-<HeadLayout />
 
-<BasicDropdownWormhole />
+<EsFooter />
+<BasicDropdownWormhole />

app/templates/ember-cli.hbs

@@ -1,23 +1,12 @@
-{{! template-lint-disable no-inline-styles }}
-{{!-- Template is copied from project-version.hbs --}}
-<aside class="sidebar">
-  <ol class="toc-level-0">
-    <li class="toc-level-0" data-test-home>
-      <LinkTo @route="project" @model="ember">Home</LinkTo>
-    </li>
-    <li class="toc-level-0">
-      Projects
-      <ol class="toc-level-1 selected" style="display: block;">
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
-      </ol>
-    </li>
-  </ol>
-</aside>
-<section class="content">
-  <article class="chapter">
-    <h1>Ember CLI API Documentation</h1>
-    <p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
-  </article>
-</section>
+{{page-title "Ember CLI - Ember API Documentation"}}
+
+<div class="sidebar-container sidebar-container--full-width">
+  <EsSidebar><TableOfProjects @activeProject='ember-cli' /></EsSidebar>
+  <section class="content">
+    <article class="chapter">
+      <h1>Ember CLI API Documentation</h1>
+      <hr>
+      <p>Ember CLI API documentation is available on <a href="https://ember-cli.com/api">ember-cli.com/api</a>.</p>
+    </article>
+  </section>
+</div>

app/templates/head.hbs

@@ -1,12 +1,10 @@
-<title>{{this.model.title}}</title>
-
 <link rel="dns-prefetch" href="{{this.model.cdnDomain}}">
-<meta property="og:title" content={{this.model.title}}>
 
 {{#if this.model.description}}
   <meta name="description" content={{this.model.description}}>
   <meta property="og:description" content={{this.model.description}}>
 {{/if}}
+
 {{#unless this.model.isRelease}}
   <link rel="canonical" href={{this.model.canonicalUrl}}>
 {{/unless}}

app/templates/not-found.hbs

@@ -0,0 +1,9 @@
+{{page-title "Page Not Found"}}
+
+<article class="whoops">
+  <img src="/assets/images/stinky-fish.png" alt="tomster stinky fish"/>
+  <div class="whoops__message">
+    <h2>Ack! 404 friend, you're in the wrong place</h2>
+    <LinkTo @route='index'>Click here to go home</LinkTo>
+  </div>
+</article>

app/templates/project-version.hbs

@@ -1,44 +1,35 @@
-{{! template-lint-disable no-inline-styles }}
-<aside class="sidebar">
-  <ol class="toc-level-0">
-    <li class="toc-level-0" data-test-home>
-      <LinkTo @route="project" @model="ember">Home</LinkTo>
-    </li>
-    <li class="toc-level-0">
-      Projects
-      <ol class="toc-level-1 selected" style="display: block;">
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember" @current-when={{eq this.activeProject "ember"}} class="spec-ember">Ember</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-data" @current-when={{eq this.activeProject "ember-data"}} class="spec-ember-data">Ember Data</LinkTo></li>
-        <li class="toc-level-1"><LinkTo @route="project" @model="ember-cli" @current-when={{eq this.activeProject "ember-cli"}} class="spec-ember">Ember CLI</LinkTo></li>
-      </ol>
-    </li>
-  </ol>
+{{page-title @model.version}}
 
-  <div class="select-container">
-    <PowerSelect
-      @onChange={{route-action "updateProject" this.activeProject}}
-      @options={{this.projectVersions}}
-      @selected={{this.selectedProjectVersion}}
-      @ariaLabel="Select a version"
-      @required={{true}}
-      @searchField="compactVersion"
-      @searchEnabled={{true}}
-      as |ver|
-    >
-      {{ver.compactVersion}}
-    </PowerSelect>
-  </div>
+<div class="sidebar-container sidebar-container--full-width">
+  <EsSidebar>
+   <TableOfProjects @activeProject={{this.activeProject}} />
 
-  <TableOfContents
-    @version={{this.urlVersion}}
-    @classesIDs={{this.shownClassesIDs}}
-    @moduleIDs={{this.shownModuleIDs}}
-    @namespaceIDs={{this.shownNamespaceIDs}}
-    @showPrivateClasses={{this.showPrivateClasses}}
-    @togglePrivateClasses={{this.togglePrivateClasses}}
-    @isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
-  />
-</aside>
-<section class="content">
-  {{outlet}}
-</section>
+    <div class="select-container">
+      <PowerSelect
+        @onChange={{fn this.updateProject this.activeProject}}
+        @options={{this.projectVersions}}
+        @selected={{this.selectedProjectVersion}}
+        @ariaLabel="Select a version"
+        @required={{true}}
+        @searchField="compactVersion"
+        @searchEnabled={{true}}
+        as |ver|
+      >
+        {{ver.compactVersion}}
+      </PowerSelect>
+    </div>
+
+    <TableOfContents
+      @version={{this.urlVersion}}
+      @classesIDs={{this.shownClassesIDs}}
+      @moduleIDs={{this.shownModuleIDs}}
+      @namespaceIDs={{this.shownNamespaceIDs}}
+      @showPrivateClasses={{this.showPrivateClasses}}
+      @togglePrivateClasses={{this.togglePrivateClasses}}
+      @isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
+    />
+  </EsSidebar>
+  <section class="content">
+    {{outlet}}
+  </section>
+</div>

app/templates/project-version/classes/class.hbs

@@ -1,11 +1,18 @@
 {{! template-lint-disable no-action }}
-<article class="chapter">
-  {{#if (and @model.project.id @model.file @model.line (is-latest version=@model.projectVersion.version allVersions=this.allVersions))}}
-    <a data-tooltip="Edit on Github" class="heading__link__edit" href="{{github-link @model.project.id @model.projectVersion.version @model.file @model.line isEdit=true}}" target="_blank" rel="noopener noreferrer">{{svg-jar "fa-pencil"}}</a>
-  {{/if}}
-  <h1 class="module-name">Class {{@model.name}}</h1>
-  {{#if @model.access}}<span class="access">{{@model.access}}</span>{{/if}}
+{{page-title @model.name}}
 
+<article class="chapter">
+  <div class="article-title-wrapper">
+    <h1 class="module-name">Class {{@model.name}}
+      {{#if @model.access}}
+        <span class="access">{{@model.access}}</span>
+      {{/if}}
+    </h1>
+    {{#if (and @model.project.id @model.file @model.line (is-latest version=@model.projectVersion.version allVersions=this.allVersions))}}
+      <a data-tooltip="Edit on Github" class="edit-icon" href="{{github-link @model.project.id @model.projectVersion.version @model.file @model.line isEdit=true}}" target="_blank" rel="noopener noreferrer">{{svg-jar "pen"}}</a>
+    {{/if}}
+  </div>
+  <hr>
   <div class="attributes">
     {{#if @model.extends}}
       <div class="attribute">

app/templates/project-version/functions/function.hbs

@@ -1,2 +1,4 @@
+{{page-title @model.fn.name}}
 <h1 class="module-name">Function</h1>
+<hr>
 <ClassFieldDescription @type="method" @field={{@model.fn}} @model={{@model.fnModule}} />

app/templates/project-version/modules/module.hbs

@@ -1,10 +1,15 @@
+{{! template-lint-disable no-invalid-link-text }}
 <article class="chapter">
-  {{#if (eq this.model.name 'ember-data-overview')}}
-    <h1 class="module-name">EmberData Overview</h1>
-  {{else}}
-    <h1 class="module-name">Package {{this.model.name}}</h1>
-  {{/if}}
-  {{#if this.model.access}}<span class="access">{{this.model.access}}</span>{{/if}}
+  <div class="article-title-wrapper">
+    {{#if (eq this.model.name 'ember-data-overview')}}
+      <h1 class="module-name">EmberData Overview</h1>
+    {{else}}
+      <h1 class="module-name">Package {{this.model.name}}
+        {{#if this.model.access}}<span class="access">{{this.model.access}}</span>{{/if}}
+      </h1>
+    {{/if}}
+  </div>
+  <hr>
 
   <p class="attributes">
     {{#if this.model.parent}}

config/ember-cli-update.json

@@ -3,7 +3,7 @@
   "packages": [
     {
       "name": "ember-cli",
-      "version": "3.28.6",
+      "version": "4.12.3",
       "blueprints": [
         {
           "name": "app",

config/environment.js

@@ -6,12 +6,12 @@ module.exports = function (environment) {
   let ALGOLIA_API_KEY =
     process.env.ALGOLIA_API_KEY || 'c35425b69b31be1bb4786f0a72146306';
 
-  let ENV = {
+  const ENV = {
     modulePrefix: 'ember-api-docs',
     environment,
     rootURL: '/',
     routerRootURL: '/',
-    locationType: 'auto',
+    locationType: 'history',
     API_HOST: process.env.API_HOST || 'https://api-store.emberjs.com',
     EmberENV: {
       EXTEND_PROTOTYPES: false,

config/targets.js

@@ -7,21 +7,6 @@ const browsers = [
   'last 1 Edge versions',
 ];
 
-// Ember's browser support policy is changing, and IE11 support will end in
-// v4.0 onwards.
-//
-// See https://deprecations.emberjs.com/v3.x#toc_3-0-browser-support-policy
-//
-// If you need IE11 support on a version of Ember that still offers support
-// for it, uncomment the code block below.
-//
-// const isCI = Boolean(process.env.CI);
-// const isProduction = process.env.EMBER_ENV === 'production';
-//
-// if (isCI || isProduction) {
-//   browsers.push('ie 11');
-// }
-
 module.exports = {
   browsers,
   node: 'current',

ember-cli-build.js

@@ -3,35 +3,16 @@
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 const envIsProduction = process.env.EMBER_ENV === 'production';
 const premberUrls = require('./prember-urls');
-const nodeSass = require('node-sass');
 
 module.exports = function (defaults) {
-  let app = new EmberApp(defaults, {
+  const app = new EmberApp(defaults, {
     prember: {
       urls: premberUrls(),
     },
     fingerprint: {
-      extensions: [
-        'js',
-        'css',
-        'jpg',
-        'png',
-        'gif',
-        'map',
-        'svg',
-        'webmanifest',
-      ],
+      extensions: ['js', 'css', 'jpg', 'png', 'gif', 'map', 'webmanifest'],
       generateAssetMap: true,
     },
-    sassOptions: {
-      implementation: nodeSass,
-      sourceMapEmbed: !envIsProduction,
-      includePaths: [
-        'app/styles',
-        'node_modules/bourbon-neat/app/assets/stylesheets',
-        'node_modules/normalize.css',
-      ],
-    },
     autoprefixer: {
       enabled: true,
       cascade: true,

package.json

@@ -15,8 +15,10 @@
   "scripts": {
     "clone": "rm -rf ember-api-docs-data && git clone --depth=1 https://github.com/ember-learn/ember-api-docs-data.git",
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"**/*.css\"",
+    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
@@ -27,10 +29,14 @@
     "test:ember": "ember test"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.6.0",
+    "@ember/string": "^3.0.1",
+    "@ember/test-helpers": "^2.9.3",
     "@embroider/compat": "^3.4.3",
     "@embroider/core": "^3.4.3",
+    "@embroider/macros": "^1.18.0",
     "@embroider/webpack": "^3.2.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
@@ -55,73 +61,67 @@
     "@types/ember__test-helpers": "^2.8.2",
     "@types/ember__utils": "^4.0.2",
     "algoliasearch": "^4.20.0",
-    "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.6.2",
-    "bourbon": "5.1.0",
-    "bourbon-neat": "^1.9.1",
     "broccoli-asset-rev": "^3.0.0",
     "broccoli-funnel": "^2.0.1",
+    "concurrently": "^8.0.1",
     "ember-a11y-testing": "^5.2.1",
     "ember-anchor": "^1.0.3",
     "ember-auto-import": "^2.10.0",
     "ember-basic-dropdown": "^8.6.0",
-    "ember-cli": "~3.28.6",
-    "ember-cli-app-version": "^5.0.0",
+    "ember-cli": "~4.12.3",
+    "ember-cli-app-version": "^6.0.0",
     "ember-cli-autoprefixer": "^1.0.0",
     "ember-cli-babel": "^8.2.0",
-    "ember-cli-bourbon": "^2.0.1",
     "ember-cli-browserstack": "^1.0.1",
     "ember-cli-clipboard": "^1.1.0",
-    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deploy": "^1.0.1",
     "ember-cli-deploy-build": "^1.1.0",
     "ember-cli-deploy-gzip": "^1.0.0",
     "ember-cli-deprecation-workflow": "^3.0.1",
-    "ember-cli-document-title-northm": "^1.0.3",
     "ember-cli-fastboot": "^4.1.5",
-    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-htmlbars": "^6.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-meta-tags": "^7.0.0",
-    "ember-cli-sass": "^10.0.1",
     "ember-cli-showdown": "^9.0.1",
     "ember-cli-terser": "^4.0.2",
     "ember-composable-helpers": "^3.1.1",
     "ember-concurrency": "^4.0.3",
-    "ember-data": "~3.28.6",
-    "ember-data-fastboot": "https://github.com/cardstack/ember-data-fastboot#6e6fb8bbf0b405ae174160cc1e4833c5582f68cd",
-    "ember-export-application-global": "^2.0.1",
-    "ember-fetch": "^8.1.1",
+    "ember-data": "~4.6.0",
+    "ember-data-fastboot": "https://github.com/mainmatter/ember-data-fastboot#update-babel",
+    "ember-decorators": "^6.1.1",
+    "ember-fetch": "^8.1.2",
     "ember-inflector": "^4.0.3",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^0.1.6",
     "ember-metrics": "^1.5.2",
-    "ember-page-title": "^6.2.2",
+    "ember-modifier": "^4.1.0",
+    "ember-page-title": "^7.0.0",
     "ember-power-select": "^8.7.0",
-    "ember-qunit": "^5.1.5",
-    "ember-resolver": "^8.0.3",
+    "ember-qunit": "^6.2.0",
+    "ember-resolver": "^10.0.0",
     "ember-rfc176-data": "^0.3.17",
-    "ember-route-action-helper": "^2.0.8",
     "ember-showdown-shiki": "^1.2.1",
     "ember-sinon": "^4.1.1",
-    "ember-source": "~3.28.8",
-    "ember-styleguide": "^3.3.0",
+    "ember-source": "~4.12.0",
+    "ember-styleguide": "^11.0.3",
     "ember-svg-jar": "^2.4.2",
-    "ember-template-lint": "^3.15.0",
+    "ember-template-lint": "^5.7.2",
     "ember-test-selectors": "^6.0.0",
-    "ember-tether": "1.0.0",
-    "ember-truth-helpers": "^2.1.0",
-    "ember-web-app": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-ember": "^10.5.8",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-qunit": "^6.2.0",
+    "ember-tether": "3.1.0",
+    "ember-truth-helpers": "^4.0.3",
+    "ember-web-app": "^5.0.1",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-ember": "^11.5.0",
+    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.4",
     "express-sslify": "^1.2.0",
     "fastboot-app-server": "^3.3.2",
-    "lint-to-the-future": "^2.0.0",
-    "lint-to-the-future-ember-template": "^1.2.0",
-    "lint-to-the-future-eslint": "^2.0.1",
+    "lint-to-the-future": "^2.6.3",
+    "lint-to-the-future-ember-template": "^3.1.0",
+    "lint-to-the-future-eslint": "^3.1.0",
+    "lint-to-the-future-stylelint": "^2.1.0",
     "loader.js": "^4.7.0",
     "lodash.groupby": "^4.6.0",
     "lodash.last": "^3.0.0",
@@ -132,21 +132,24 @@
     "minimist": "^1.2.6",
     "node-sass": "^9.0.0",
     "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
     "prember": "^2.1.0",
-    "prettier": "^2.5.1",
-    "qunit": "^2.17.2",
-    "qunit-dom": "^1.6.0",
+    "prettier": "^2.8.7",
+    "qunit": "^2.19.4",
+    "qunit-dom": "^2.0.0",
     "sanitize-html": "^2.3.2",
     "semver": "^7.5.4",
     "semver-compare": "^1.0.0",
     "spawndamnit": "2.0.0",
+    "stylelint": "^15.4.0",
+    "stylelint-config-standard": "^32.0.0",
+    "stylelint-prettier": "^3.0.0",
     "testem": "^3.10.0",
+    "tracked-built-ins": "^3.1.1",
     "typescript": "^4.9.3",
     "webpack": "^5.90.0"
   },
   "engines": {
-    "node": "16.* || 18.* || 20.*",
+    "node": "14.* || 16.* || >= 18",
     "npm": "7 || 8 || >= 9"
   },
   "cacheDirectories": [
@@ -156,6 +159,7 @@
     "edition": "octane"
   },
   "fastbootDependencies": [
+    "crypto",
     "algoliasearch",
     "node-fetch",
     "abortcontroller-polyfill",
@@ -168,8 +172,7 @@
   },
   "pnpm": {
     "overrides": {
-      "node-sass": "^9.0.0",
-      "ember-truth-helpers": "^4.0.0"
+      "node-sass": "^9.0.0"
     }
   },
   "packageManager": "pnpm@9.5.0"