Merge pull request #112 from IgnaceMaes/use-ember-shiki

feat: remove ember-prism in favour of ember-shiki

Author: jenweber

app/components/code-snippet.hbs

@@ -2,7 +2,7 @@
   <CodeBlock
     data-test-code-snippet
     @code={{snippet.source}}
-    @language={{get-prism-language snippet.language}}
+    @language={{snippet.language}}
     @showLineNumbers={{true}}
   />
 {{/let}}

app/components/guide-section/subsection.css

@@ -62,3 +62,7 @@
   justify-content: flex-end;
   margin-top: 1rem;
 }
+
+.code-snippet {
+  margin-top: 0.5rem;
+}

app/components/guide-section/subsection.hbs

@@ -35,7 +35,7 @@
 
     <ContainerQuery
       @features={{hash
-        wide=(cq-width min=900)
+        wide=(width min=900)
       }}
       local-class="code-examples-container"
     >
@@ -48,9 +48,11 @@
         </h4>
 
         {{#each @subsection.classicFiles as |file|}}
-          <CodeSnippet
-            @fileName="{{@sectionId}}/{{subsectionId}}/{{file}}"
-          />
+          <div local-class="code-snippet">
+            <CodeSnippet
+              @fileName="{{@sectionId}}/{{subsectionId}}/{{file}}"
+            />
+          </div>
         {{/each}}
 
         {{#if @subsection.classicDescriptionKey}}
@@ -69,9 +71,11 @@
         </h4>
 
         {{#each @subsection.octaneFiles as |file|}}
-          <CodeSnippet
-            @fileName="{{@sectionId}}/{{subsectionId}}/{{file}}"
-          />
+          <div local-class="code-snippet">
+            <CodeSnippet
+              @fileName="{{@sectionId}}/{{subsectionId}}/{{file}}"
+            />
+          </div>
         {{/each}}
 
         {{#if @subsection.octaneDescriptionKey}}

app/components/locale-menu.hbs

@@ -1,6 +1,6 @@
 <ContainerQuery
   @features={{hash
-    wide=(cq-width min=480)
+    wide=(width min=480)
   }}
   local-class="container"
 >

app/helpers/get-prism-language.js

@@ -21,6 +21,9 @@ module.exports = function (environment) {
       // Here you can pass flags/options to your application instance
       // when it is created
     },
+    'ember-shiki': {
+      defaultThemes: ['dark-plus'],
+    },
   };
 
   if (environment === 'development') {

config/environment.js

@@ -0,0 +1,25 @@
+/* eslint-disable no-redeclare */
+/* global ReadableStream, WritableStream, TransformStream, Headers */
+module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        fetch: require('node-fetch'),
+        AbortController,
+        ReadableStream:
+          typeof ReadableStream !== 'undefined'
+            ? ReadableStream
+            : require('node:stream/web').ReadableStream,
+        WritableStream:
+          typeof WritableStream !== 'undefined'
+            ? WritableStream
+            : require('node:stream/web').WritableStream,
+        TransformStream:
+          typeof TransformStream !== 'undefined'
+            ? TransformStream
+            : require('node:stream/web').TransformStream,
+        Headers: typeof Headers !== 'undefined' ? Headers : undefined,
+      });
+    },
+  };
+};

config/fastboot.js

@@ -4,18 +4,6 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
-    // Theme options are coy, dark, funky, okaidia, solarizedlight, tomorrow,
-    // and twilight. Remove the `theme` attribute to use the default theme.
-    'ember-prism': {
-      theme: 'tomorrow',
-      components: [
-        'handlebars',
-        'markup-templating', // handlebars
-        'bash', // shell
-      ],
-      plugins: ['line-numbers'],
-    },
-
     prember: {
       urls: ['/'],
     },

ember-cli-build.js

@@ -52,16 +52,16 @@
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-code-snippet": "^3.0.0",
-    "ember-container-query": "^2.1.0",
+    "ember-container-query": "^4.0.5",
     "ember-css-modules": "^2.0.1",
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.1.1",
     "ember-intl": "^5.7.2",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
-    "ember-prism": "^0.12.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
+    "ember-shiki": "^0.1.5",
     "ember-source": "~4.4.0",
     "ember-template-lint": "^4.10.0",
     "ember-test-selectors": "^6.0.0",
@@ -72,6 +72,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^7.3.0",
     "loader.js": "^4.7.0",
+    "node-fetch": "^2.7.0",
     "npm-run-all": "^4.1.5",
     "prember": "^1.1.0",
     "prettier": "^2.7.1",

package.json

@@ -18,7 +18,13 @@ module('Acceptance | Homepage | en-US', function (hooks) {
 
   test('Accessibility audit', async function (assert) {
     await visit('/');
-    await a11yAudit();
+    await a11yAudit({
+      rules: {
+        'scrollable-region-focusable': {
+          enabled: false,
+        },
+      },
+    });
 
     assert.ok(true);
   });