Begin support for translations

app/components/language-switcher.hbs

@@ -0,0 +1,19 @@
+<div id="language-switcher">
+  <Popover>
+    <:trigger>{{this.current}}</:trigger>
+    <:content as |close|>
+      {{#each this.locales as |info|}}
+        <LinkTo @query={{hash locale=info.locale}} {{on 'click' close}}>
+          {{info.localName}}
+        </LinkTo>
+      {{/each}}
+
+
+      <div class="language-links">
+        <a href="https://github.com/ember-learn/ember-website/issues/new?assignees=&labels=&template=general_issue.md">
+          Preferred language missing? Open an issue
+        </a>
+      </div>
+    </:content>
+  </Popover>
+</div>

app/components/language-switcher.js

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+import { inject as service } from '@ember/service';
+
+/**
+ * These are not translated, because someone who knows the language knows what
+ * their language is called in their language, and it doesn't matter if
+ * non-speakers can't read it.
+ */
+const LOCALES = [
+  { locale: 'en-us', localName: 'English' },
+  // Spanish
+  { locale: 'es-es', localName: 'Español' },
+  // Chinese
+  { locale: 'cmn', localName: '中国语訳' },
+  // Russian
+  { locale: 'ru', localName: 'Pусский' },
+  // Japanese
+  { locale: 'ja-jp', localName: '日本' },
+];
+
+export default class LanguageSwitcherComponent extends Component {
+  @service intl;
+  @service router;
+
+  locales = LOCALES;
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    watchLocale(this, () => {
+      let locale = this.router.currentRoute.queryParams.locale;
+
+      this.intl.setLocale(locale || this.intl.primaryLocale);
+    });
+  }
+
+  get current() {
+    let locale = this.intl.locale[0];
+
+    let info = LOCALES.find((info) => info.locale === locale);
+
+    assert(
+      `${locale} not found in static list of LOCALES. ` +
+        `Something is maybe misconfigured? ` +
+        `Known locale codes are: ${LOCALES.map((i) => i.locale).join(', ')}`,
+      info
+    );
+
+    return info.localName;
+  }
+}
+
+function watchLocale(ctx, callback) {
+  ctx.router.on('routeDidChange', callback);
+  registerDestructor(ctx, () => ctx.router.off('routeDidChange', callback));
+}

app/components/popover.hbs

@@ -0,0 +1,17 @@
+<PopperJS as |reference popover|>
+  <EsButton
+    {{reference}}
+    type="button"
+    @secondary={{true}}
+    @onClicked={{this.toggle}}
+  >
+    {{yield to="trigger"}}
+  </EsButton>
+
+  {{#if this.isOpen}}
+    {{!-- TODO: escape also has to close this --}}
+    <div {{popover}} {{focus-trap}} class="popover-content">
+      {{yield this.toggle to="content"}}
+    </div>
+  {{/if}}
+</PopperJS>

app/components/popover.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class Popover extends Component {
+  @tracked isOpen = false;
+
+  toggle = () => (this.isOpen = !this.isOpen);
+}

app/formats.js

@@ -0,0 +1,27 @@
+export default {
+  time: {
+    hhmmss: {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    },
+  },
+  date: {
+    hhmmss: {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    },
+  },
+  number: {
+    compact: { notation: 'compact' },
+    EUR: {
+      style: 'currency',
+      currency: 'EUR',
+    },
+    USD: {
+      style: 'currency',
+      currency: 'USD',
+    },
+  },
+};

app/routes/application.js

@@ -7,6 +7,10 @@ export default class AplicationRoute extends Route {
   @service fastboot;
   @service router;
 
+  queryParams = {
+    locale: {},
+  };
+
   constructor() {
     super(...arguments);
 

app/styles/app.css

@@ -50,3 +50,31 @@ h1 + *,
 .mt-4 {
   margin-top: var(--spacing-4);
 }
+
+/**
+  temporary hack to get this styled in the proper place
+  while we discuss UX, etc
+ */
+#language-switcher {
+  position: absolute;
+  right: 0.5rem;
+  margin-top: -1rem;
+}
+
+#language-switcher .es-button-secondary {
+  padding: calc(var(--spacing-1) * 0.5) var(--spacing-1);
+  font-size: var(--font-size-sm);
+}
+
+.popover-content {
+  min-width: 200px;
+  padding: var(--spacing-2);
+  background: white;
+  display: grid;
+  gap: var(--spacing-1);
+}
+
+.popover-content .language-links {
+  border-top: 1px solid;
+  font-size: var(--font-size-sm);
+}

app/templates/application.hbs

@@ -7,7 +7,9 @@
 <EsHeader
   @home="/"
   @links={{this.links}}
-/>
+>
+  <LanguageSwitcher />
+</EsHeader>
 
 <main>
   {{outlet}}
@@ -16,4 +18,4 @@
 <EsFooter
   @contributeLink="https://github.com/ember-learn/ember-website"
   @infoLinks={{this.infoLinks}}
-/>
+/>

app/templates/browser-support.hbs

@@ -1,15 +1,12 @@
-{{page-title "Browser Support"}}
+{{page-title (t "browser-support.title")}}
+
 <div class="container layout">
   <section aria-labelledby="section-browser-support-policy">
-    <h1 id="section-browser-support-policy">Ember.js Browser Support Policy</h1>
-
-    <h2>Ember 3.0.0</h2>
-
-    <p>
-      Ember currently targets Internet Explorer 11 as a baseline for support. This means that generally all modern and relatively recent browsers will work with Ember, since browsers are backwards compatible by design. Ember runs tests against the latest desktop versions of the following browsers:
-    </p>
+    <h1 id="section-browser-support-policy">{{t "browser-support.heading"}}</h1>
 
+    <h2>{{t "browser-support.ember3.heading"}}</h2>
 
+    <p>{{t "browser-support.ember3.support"}}</p>
 
     <div class="layout my-3">
       <div class="card lg:col-2 lg:start-3">
@@ -25,15 +22,13 @@
       </div>
     </div>
 
-    <h2>Ember 4.0.0</h2>
+    <h2>{{t "browser-support.ember4.heading"}}</h2>
 
-    <p>
-      In Ember 4.0.0, the framework will support the following major browsers:
-    </p>
+    <p>{{t "browser-support.ember4.support"}}</p>
 
     <ul class="list-unstyled layout my-3">
       <EsCard class="lg:col-2">
-        <div class="text-center text-md">Desktop</div>
+        <div class="text-center text-md">{{t "form-factors.desktop"}}</div>
         <ul>
           <li>Google Chrome</li>
           <li>Mozilla Firefox</li>
@@ -42,134 +37,104 @@
         </ul>
       </EsCard>
       <EsCard class="lg:col-2">
-        <div class="text-center text-md">Mobile</div>
+        <div class="text-center text-md">{{t "form-factors.mobile"}}</div>
         <ul>
           <li>Google Chrome</li>
           <li>Mozilla Firefox</li>
           <li>Safari</li>
         </ul>
       </EsCard>
       <EsCard class="lg:col-2">
-        <div class="text-center text-md">Testing</div>
+        <div class="text-center text-md">{{t "form-factors.testing"}}</div>
         <ul>
           <li>Google Chrome</li>
           <li>Mozilla Firefox</li>
         </ul>
       </EsCard>
     </ul>
 
-    <p>
-      Other browsers may work with Ember.js, but are not explicitly supported. If you
-      would like to add support for a new browser, please <a href="https://github.com/emberjs/rfcs">submit an RFC or RFC issue for discussion</a>!
-    </p>
-
+    <p>{{t "browser-support.ember4.other-browsers" htmlSafe=true}}</p>
+    <p>{{t "browser-support.ember4.evergreen.support" htmlSafe=true}}</p>
 
-    <p>
-      We determine support on a browser-by-browser basis. Browsers are categorized as
-      either <em>evergreen</em> or <em>non-evergreen</em>. The categorization is as follows:
-    </p>
-
-    <h3 class="text-center">Evergreen</h3>
+    <h3 class="text-center">{{t "browser-support.ember4.evergreen.sub-heading"}}</h3>
 
     <ul class="list-unstyled layout my-3">
       <EsCard class="lg:col-2">
-        <div class="text-center text-md">Desktop</div>
+        <div class="text-center text-md">{{t "form-factors.desktop"}}</div>
         <ul>
           <li>Google Chrome</li>
           <li>Mozilla Firefox</li>
           <li>Microsoft Edge</li>
         </ul>
       </EsCard>
       <EsCard class="lg:col-2">
-        <div class="text-center text-md">Mobile</div>
+        <div class="text-center text-md">{{t "form-factors.mobile"}}</div>
         <ul>
           <li>Google Chrome</li>
           <li>Mozilla Firefox</li>
         </ul>
       </EsCard>
       <EsCard class="lg:col-2">
-        <div class="text-center text-md">Testing</div>
+        <div class="text-center text-md">{{t "form-factors.testing"}}</div>
         <ul>
           <li>Google Chrome</li>
           <li>Mozilla Firefox</li>
         </ul>
       </EsCard>
     </ul>
 
-    <h3 class="text-center">Non-evergreen</h3>
+    <h3 class="text-center">{{t "browser-support.ember4.non-evergreen.sub-heading"}}</h3>
 
     <div class="layout">
       <ul class="list-unstyled layout lg:col-4 lg:start-2 my-3">
         <EsCard class="lg:col-3">
-          <div class="text-center text-md">Desktop</div>
+          <div class="text-center text-md">{{t "form-factors.desktop"}}</div>
           <ul>
             <li>Safari</li>
           </ul>
         </EsCard>
         <EsCard class="lg:col-3">
-          <div class="text-center text-md">Mobile</div>
+          <div class="text-center text-md">{{t "form-factors.mobile"}}</div>
           <ul>
             <li>Safari</li>
           </ul>
         </EsCard>
       </ul>
     </div>
 
-    <p>
-      For evergreen browsers, the minimum version of the browser that we support is
-      determined at the time of every minor release, following this formula:
-    </p>
+    <p>{{t "browser-support.ember4.formula.intro"}}</p>
 
     <div class="layout my-3">
       <div class="card">
         <div class="card__content">
-          <p>Whichever browser version is greater/more recent out of:</p>
-
-          <ol>
-            <li>
-              The lowest/least recent version that fulfills any one of these properties:
-              <ul>
-                <li>It is the latest version of the browser.</li>
-                <li>It is the latest LTS/extended support version of the browser (such as Firefox ESR).</li>
-                <li>It has at least <em>0.25%</em> of global marketshare usage across mobile and
-              desktop, based on <a href="https://gs.statcounter.com/">statcounter</a>.</li>
-              </ul>
-            </li>
-            <li>
-              The minimum version supported in the previous release
-            </li>
-          </ol>
+          <p>{{t "browser-support.ember4.formula.query"}}</p>
+
+          {{t "browser-support.ember4.formula.properties" htmlSafe=true}}
         </div>
       </div>
     </div>
 
-    <p>
-      To simplify, the supported version either moves forward or stays the same for
-      each release based on overall usage and LTS/current release versions.
-    </p>
-
-    <p>
-      For non-evergreen browsers, support is locked at a specific major version, and
-      we support all major versions above that version:
-    </p>
+    <p>{{t "browser-support.ember4.formula.p1"}}</p>
+    <p>{{t "browser-support.ember4.formula.p2"}}</p>
 
     <div class="layout">
       <ul class="list-unstyled layout lg:col-4 lg:start-2 my-3">
         <EsCard class="lg:col-3">
-          <div class="text-center text-md">Desktop</div>
+          <div class="text-center text-md">{{t "form-factors.desktop"}}</div>
           <ul>
             <li>Safari: 12</li>
           </ul>
         </EsCard>
         <EsCard class="lg:col-3">
-          <div class="text-center text-md">Mobile</div>
+          <div class="text-center text-md">{{t "form-factors.mobile"}}</div>
           <ul>
             <li>Safari: 12</li>
           </ul>
         </EsCard>
       </ul>
     </div>
 
-    Within a version of a browser, we only support the most recent patch release.
+
+    {{t "browser-support.ember4.patch-stipulation"}}
   </section>
 </div>