Merge branch 'main' into guide-for-deprecate-import-from-ember

Author: NullVoxPopuli

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
   pull_request:
 
 env:
-  NODE_VERSION: 14
+  NODE_VERSION: 20
   PERCY_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}
   PERCY_PARALLEL_TOTAL: 1
 
@@ -21,40 +21,28 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 3
     steps:
-      - name: Check out a copy of the repo
-        uses: actions/checkout@v3
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          cache: 'npm'
+          cache: 'pnpm'
           node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Lint
-        run: npm run lint
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm run lint
 
   test-app:
     name: Test app
     runs-on: ubuntu-latest
     timeout-minutes: 3
     steps:
-      - name: Check out a copy of the repo
-        uses: actions/checkout@v3
-
-      - name: Use Node.js ${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          cache: 'npm'
+          cache: 'pnpm'
           node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Test
-        run: npx percy exec -- npm run test
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm percy exec -- pnpm run test
         env:
           PERCY_PARALLEL_NONCE: ${{ env.PERCY_PARALLEL_NONCE }}
           PERCY_PARALLEL_TOTAL: ${{ env.PERCY_PARALLEL_TOTAL }}

.markdownlint.json

@@ -0,0 +1,19 @@
+{
+  "default": false,
+  "MD040": {
+    "allowed_languages": [
+      "js",
+      "ts",
+      "javascript",
+      "typescript",
+      "bash",
+      "shell",
+      "handlebars",
+      "plaintext",
+      "text",
+      "json",
+      "html",
+      "css"
+    ]
+  }
+}

.npmrc

@@ -0,0 +1 @@
+use-node-version=20.15.1

app/styles/app.scss

@@ -23,6 +23,36 @@ table {
   padding: 2rem;
 }
 
+// 404 styling
+.whoops {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-6)
+}
+
+.whoops img {
+    width: 240px;
+    margin: var(--spacing-2);
+}
+
+@media (max-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;
+  }
+}
+
 // override ember-styleguide. Needed to contain code blocks.
 .main {
   grid-area: main;
@@ -97,24 +127,6 @@ table {
   width: 1px;
 }
 
-// anchor links used on h3 headings
-.toc-anchor {
-  display: inline;
-  margin-right: var(--spacing-1);
-
-  &,
-  main &,
-  main &:link,
-  main &:visited {
-    background: none;
-    color: var(--color-gray-500);
-  }
-
-  &:hover {
-    opacity: 0.75;
-  }
-}
-
 @media (max-width: 1007px) {
   body.no-scroll {
     overflow: hidden;
@@ -586,7 +598,9 @@ p a:hover {
         .ember-version-graphic {
           $height: 132px;
           width: $height;
-          height: $height;
+          min-height: $height;
+          height: inherit;
+          background-position-y: center;
 
           .text {
             font-size: 64px;

app/templates/components/main-layout.hbs

@@ -12,12 +12,17 @@
       {{#each result.contents as |content|}}
         <DeprecationArticle @model={{content}}>
           <h3 id="{{id-for-deprecation (or content.displayId content.id) content.anchor}}">
-            <LinkTo @route="id" @model={{content.id}} title={{content.title}} class="toc-anchor">§</LinkTo>
             {{markdown-to-html
               content.title
               extensions="no-wrapper"
               tagName=""
             }}
+            <LinkTo @route="id" @model={{content.id}} title={{content.title}}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <path
+                  d="M326.61 185.4c59.75 59.8 58.93 155.69.36 214.58-.1.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.7 59.26-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.1-37.1c9.85-9.85 26.8-3.3 27.3 10.6a184.27 184.27 0 0 0 9.7 52.72 16.1 16.1 0 0 1-3.8 16.61l-13.08 13.1c-28.02 28.02-28.9 73.65-1.15 101.95 28.02 28.58 74.08 28.75 102.32.51l67.2-67.19a71.98 71.98 0 0 0-10.34-110.4 16.04 16.04 0 0 1-6.95-12.6 39.83 39.83 0 0 1 11.7-29.81l21.06-21.06a16.06 16.06 0 0 1 20.58-1.73 152.48 152.48 0 0 1 20.52 17.2zM467.55 44.44c-59.26-59.26-155.7-59.27-214.96 0l-67.2 67.2-.36.37c-58.57 58.9-59.39 154.78.36 214.59a152.45 152.45 0 0 0 20.52 17.2 16.07 16.07 0 0 0 20.58-1.74l21.06-21.05a39.83 39.83 0 0 0 11.7-29.8 16.04 16.04 0 0 0-6.95-12.61 71.98 71.98 0 0 1-10.34-110.4l67.2-67.2c28.23-28.23 74.3-28.06 102.32.52 27.75 28.3 26.87 73.93-1.15 101.96l-13.1 13.09a16.1 16.1 0 0 0-3.77 16.6c5.86 17.2 9.04 35 9.69 52.73.5 13.9 17.45 20.44 27.29 10.6l37.1-37.1c59.28-59.26 59.28-155.7 0-214.96z"></path>
+              </svg>
+            </LinkTo>
           </h3>
         </DeprecationArticle>
       {{/each}}

app/templates/error.hbs

@@ -0,0 +1,9 @@
+{{page-title "Page Not Found"}}
+
+<article class="whoops">
+  <img src="/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/index.hbs

@@ -52,6 +52,9 @@
         <li class='list-unstyled' data-test-ember-5-link>
           <LinkTo @route='ember' @model='v5.x'>v5.x</LinkTo>
         </li>
+        <li class='list-unstyled' data-test-ember-6-link>
+          <LinkTo @route='ember' @model='v6.x'>v6.x</LinkTo>
+        </li>
       </ul>
     </li>
     <li class='item list-unstyled'>
@@ -75,6 +78,12 @@
             @models={{array 'ember-cli' 'v5.x'}}
           >v5.x</LinkTo>
         </li>
+        <li class='list-unstyled' data-test-ember-cli-6-link>
+          <LinkTo
+            @route='show'
+            @models={{array 'ember-cli' 'v6.x'}}
+          >v6.x</LinkTo>
+        </li>
       </ul>
     </li>
     <li class='item list-unstyled'>

config/fastboot.js

@@ -1,4 +1,3 @@
-/* global atob */
 module.exports = function () {
   return {
     buildSandboxGlobals(defaultGlobals) {

content/ember-cli/v4/ember-cli-blacklist-whitelist-build-options.md

@@ -9,14 +9,12 @@ displayId: ember-cli.blacklist-whitelist-build-options
 Using the `blacklist` and `whitelist` build options has been deprecated. Please 
 use `exclude` and `include` respectively instead.
 
-```diff
-// ember-cli-build.js
-
+```js {data-filename="ember-cli-build.js" data-diff="-4,+5"}
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
     addons: {
--     blacklist: ['addon-name'],
-+     exclude: ['addon-name'],
+      blacklist: ['addon-name'],
+      exclude: ['addon-name'],
     },
   };
 };

content/ember-cli/v5/ember-cli-output-paths-build-option.md

@@ -10,21 +10,21 @@ Using the `outputPaths` build option is deprecated, as output paths will no long
 
 To resolve the deprecation, please remove the `outputPaths` build option from your `ember-cli-build.js` file:
 
-```diff
+```js {data-diff="-3,-4,-5,-6,-7"}
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
--   outputPaths: {
--     app: {
--       js: `/assets/foo.js`,
--     },
--   },
+    outputPaths: {
+      app: {
+        js: `/assets/foo.js`,
+      },
+    },
   };
 };
 ```
 
 And update your `app/index.html` file accordingly:
 
-```diff
+```html {data-diff="-20,+21"}
 <!DOCTYPE html>
 <html>
   <head>
@@ -44,8 +44,8 @@ And update your `app/index.html` file accordingly:
     {{content-for "body"}}
 
     <script src="{{rootURL}}assets/vendor.js"></script>
--   <script src="{{rootURL}}assets/foo.js"></script>
-+   <script src="{{rootURL}}assets/my-app-name.js"></script>
+    <script src="{{rootURL}}assets/foo.js"></script>
+    <script src="{{rootURL}}assets/my-app-name.js"></script>
 
     {{content-for "body-footer"}}
   </body>