feat: add code blocks to the homepage

.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

@@ -19,4 +19,7 @@
 # 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

.eslintrc.js

@@ -54,7 +54,7 @@ module.exports = {
       },
     },
     {
-      // Test files:
+      // test files
       files: ['tests/**/*-test.{js,ts}'],
       extends: ['plugin:qunit/recommended'],
       rules: {

.gitignore

@@ -26,8 +26,14 @@ jsconfig.json
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
 
 /.lighthouseci/
 
 /.idea/
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# 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

README.md

@@ -11,8 +11,8 @@ Components come from [ember-styleguide](https://github.com/ember-learn/ember-sty
 You will need the following things properly installed on your computer.
 
 * [Git](https://git-scm.com/)
-* [Node.js](https://nodejs.org/)
-* [Ember CLI](https://ember-cli.com/)
+* [Node.js](https://nodejs.org/) (with npm)
+* [Ember CLI](https://cli.emberjs.com/release/)
 * [Google Chrome](https://google.com/chrome/)
 
 ## Installation
@@ -52,7 +52,7 @@ The app is continuously deployed to Netlify when a pull request is merged and pa
 ## Further Reading / Useful Links
 
 * [ember.js](https://emberjs.com/)
-* [ember-cli](https://ember-cli.com/)
+* [ember-cli](https://cli.emberjs.com/release/)
 * Development Browser Extensions
   * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
   * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

app/components/code-preview.hbs

@@ -0,0 +1,12 @@
+<div class='grid lg:grid-2 code-preview'>
+  <div class='lg:col-3 code-preview__code'>
+    <h4 class="code-preview__title">Code</h4>
+    <CodeBlock @code={{@code}} @language='gjs' @showCopyButton={{false}} />
+  </div>
+  <div class='lg:col-3 code-preview__result'>
+    <h4 class="code-preview__title">Result</h4>
+    <div class="code-preview__rendered">
+      {{yield}}
+    </div>
+  </div>
+</div>

app/components/index/ember-code-examples.hbs

@@ -0,0 +1,45 @@
+<div class="grid lg:grid-2">
+  <div class='lg:col-3'>
+    <h3 class='text-lg'>Components embrace HTML</h3>
+    <p>
+      Ember components are a superset of HTML - that means
+      <span class="inline-code">&lt;p&gt;Hello World&lt;/p&gt;</span>
+      is a fully-fledged Ember Component. Simply wrap your HTML with a <span class="inline-code">&lt;template&gt;</span> tag to make it a reusable component.
+    </p>
+  </div>
+</div>
+<CodePreview @code={{this.simpleComponent}}>
+  Hello, World!
+</CodePreview>
+
+<div class="grid lg:grid-2 mt-4">
+  <div class='lg:col-3'>
+    <h3 class='text-lg'>Simple composability</h3>
+    <p>
+      Ember components accept arguments to make them dynamic. To pass data into components, use the <span class="inline-code">@</span> symbol along with an argument name.
+    </p>
+  </div>
+</div>
+<CodePreview @code={{this.composableComponent}}>
+  Hello, Ember!
+  <p>Components can easily be reused 🚀</p>
+</CodePreview>
+
+<div class="grid lg:grid-2 mt-4">
+  <div class='lg:col-3'>
+    <h3 class='text-lg'>Delightful reactivity</h3>
+    <p>
+      State can be added to Ember components progressively by wrapping the template in a JavaScript class. The component will automatically rerender when a property decorated with
+      <span class="inline-code">@tracked</span> is changed.
+    </p>
+  </div>
+</div>
+<CodePreview @code={{this.stateManagemnent}}>
+  <Index::EmberCodeExamples::Counter />
+</CodePreview>
+
+<div class="lg:col-4 lg:start-2 text-center">
+  <p class="mt-4 text-gray">
+    The code examples above use the <a href="https://guides.emberjs.com/release/components/template-tag-format/">Template Tag format</a>. It is a powerful, new way to write components in Ember as a single-file format that combines the JavaScript and Glimmer template code. The format is part of the <a href="https://emberjs.com/editions/polaris/">Ember Polaris edition</a>.
+  </p>
+</div>

app/components/index/ember-code-examples.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+
+export default class IndexEmberAddonsComponent extends Component {
+  simpleComponent = `<template>
+  <p>Hello, World!</p>
+</template>`;
+
+  composableComponent = `const Welcome = <template>
+  <p>Hello, {{@name}}!</p>
+</template>;
+
+<template>
+  <Welcome @name="Ember" />
+  <p>Components can easily be reused 🚀</p>
+</template>`;
+
+  stateManagemnent = `import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+
+export default class Counter extends Component {
+  @tracked count = 0;
+
+  add = () => this.count += 1;
+
+  <template>
+    <p>You have clicked {{this.count}} times.</p>
+    <button {{on "click" this.add}}>Click</button>
+  </template>
+}`;
+}

app/components/index/ember-code-examples/counter.hbs

@@ -0,0 +1,2 @@
+<p>You have clicked {{this.count}} times.</p>
+<button type="button" {{on "click" this.increment}}>Click</button>

app/components/index/ember-code-examples/counter.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class GridDotsComponent extends Component {
+  @tracked count = 0;
+
+  increment = () => (this.count += 1);
+}

app/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="description" content="Ember.js helps developers be more productive out of the box. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta property="og:description" content="Ember.js helps developers be more productive out of the box. Designed with developer ergonomics in mind, its friendly APIs help you get your job done—fast." />

app/styles/app.css

@@ -3,6 +3,7 @@
 @import "components/ecosystem-icons.css";
 @import "components/cta-emberconf.css";
 @import "components/faqs.css";
+@import "components/code-preview.css";
 @import "components/homepage-image-grid.css";
 @import "components/homepage-hero-callout.css";
 @import "components/lts-table.css";

app/styles/components/code-preview.css

@@ -0,0 +1,88 @@
+/* stylelint-disable selector-class-pattern */
+code:not([class*="language-"]) {
+  background-color: initial;
+}
+
+.text-gray {
+  color: var(--color-gray-600);
+}
+
+.inline-code {
+  font-family: var(--font-family-mono);
+  background-color: var(--color-gray-300);
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.code-preview {
+  gap: 0;
+  box-shadow: 0 5px 15px -10px rgb(0 0 0 / 75%);
+  border-radius: var(--radius-lg);
+}
+
+.code-preview .shiki {
+  /* Shiki sets inline background color. Force using our own. */
+  background-color: var(--color-gray-900) !important;
+
+  --ember-shiki-padding-x: 16px;
+  --ember-shiki-padding-y: 16px;
+  --ember-shiki-border-radius: var(--radius-lg);
+}
+
+.code-preview pre:focus {
+  box-shadow: none;
+}
+
+.code-preview__title {
+  padding: 16px;
+  border-bottom: 1px solid;
+  font-weight: var(--font-weight-3);
+  margin-bottom: 0;
+}
+
+.code-preview__code {
+  background-color: var(--color-gray-900);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  min-width: 0;
+
+  /* Makes the scrollbar dark */
+  color-scheme: dark;
+}
+
+.code-preview__code .code-preview__title {
+  color: var(--color-gray-100);
+  border-bottom-color: var(--color-gray-700);
+}
+
+.code-preview__result {
+  background-color: var(--color-white);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  min-width: 0;
+}
+
+.code-preview__result .code-preview__title {
+  color: var(--color-gray-900);
+  border-bottom-color: var(--color-gray-300);
+}
+
+.code-preview__rendered {
+  padding: 16px;
+}
+
+@media (min-width: 1008px) {
+  .code-preview__code {
+    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  }
+
+  .code-preview__result {
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  }
+
+  .bg-shape-swipe-top-right {
+    background-image: url("/images/swipe-top-right.svg");
+    background-repeat: no-repeat;
+    background-position: top right;
+  }
+}

app/templates/index.hbs

@@ -27,6 +27,12 @@
   </div>
 </section>
 
+<section aria-labelledby="section-code" class="bg-light bg-shape-swipe-top-right">
+  <div class="container layout">
+    <Index::EmberCodeExamples />
+  </div>
+</section>
+
 <section aria-labelledby="section-batteries-included" class="bg-light-muted">
   <div class="container layout">
     <div class="lg:col-4 lg:start-2 text-center">

config/ember-cli-update.json

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

config/environment.js

@@ -5,8 +5,7 @@ module.exports = function (environment) {
     modulePrefix: 'ember-website',
     environment,
     rootURL: '/',
-    locationType: 'trailing-history',
-    historySupportMiddleware: true,
+    locationType: 'history',
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build

config/fastboot.js

@@ -0,0 +1,23 @@
+module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        fetch: 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/targets.js

@@ -6,21 +6,6 @@ const browsers = [
   'last 1 Safari 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',