Add translations to the app

Setup translations

.template-lintrc.js

@@ -2,4 +2,27 @@
 
 module.exports = {
   extends: 'recommended',
+
+  rules: {
+    'no-bare-strings': [
+      'Diversity TED Talks playlist',
+      'The myth of bringing your full, authentic self to work',
+      'Mismatch: How Inclusion Shapes Design',
+      '"Designing for disability" TED Talks playlist',
+      'Autism: How to be normal (and why not to be)',
+      "It's Not Easy Seeing Green: The Complexities of Color Blindness",
+      'To Bi or not to Bi (NL)',
+      'Women at Work podcast',
+      'Survival of the Kindest podcast',
+      '"Stop telling women they have imposter syndrome"',
+      'A Conversation on the Trans Experience and Embracing Who You Really Are',
+      'Rebel Ideas: The Power of Diverse Thinking',
+      'How to Be an Inclusive Leader: Your Role in Creating Cultures of Belonging Where Everyone Can Thrive',
+      'UNBIAS: Addressing Unconscious Bias at Work',
+      'Invisible Women: Data Bias in a World Designed for Men',
+      'Hoe bewust ben jij je van je vooroordelen? (NL)',
+      'Regenboog Taaltips (NL)',
+      'Go to {{t item.title}}',
+    ],
+  },
 };

app/components/contribute-modal.hbs

@@ -1,13 +1,13 @@
 <div class="contribute-modal" style={{blobcolor @data.selected.title}}>
   <button type="button" class="modal-close" {{on 'click' @close}}><FaIcon @icon='close'/></button>
   {{svg-jar @data.selected.icon class='illustration'}}
-  <p class="modal-title">{{@data.selected.title}}</p>
-  <p class="modal-description">{{@data.selected.description}}</p>
-  <button type="button" class="button button-secondary" {{on 'click' @close}}>I'll come back</button>
+  <p class="modal-title">{{t @data.selected.title}}</p>
+  <p class="modal-description">{{t @data.selected.description}}</p>
+  <button type="button" class="button button-secondary" {{on 'click' @close}}>{{t "contribute.cancel"}}</button>
   {{#if @data.selected.completed}}
-    <button type="button" class="button complete" {{on 'click' (fn @data.removeSquare @close)}}>Remove from my roles</button>
+    <button type="button" class="button complete" {{on 'click' (fn @data.removeSquare @close)}}>{{t "contribute.remove"}}</button>
   {{else}}
-    <button type="button" class="button complete" {{on 'click' (fn @data.completeSquare @close)}}>Add to my roles</button>
+    <button type="button" class="button complete" {{on 'click' (fn @data.completeSquare @close)}}>{{t "contribute.add"}}</button>
   {{/if}}
 </div>
 

app/controllers/application.js

@@ -0,0 +1,19 @@
+import Controller from '@ember/controller';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ApplicationController extends Controller {
+  @service intl;
+
+  @tracked activeLocale = this.intl.primaryLocale;
+
+  locales = this.intl.locales.slice(1);
+
+  @action
+  changeLocale(locale) {
+    this.activeLocale = locale.target.value;
+    this.intl.setLocale(this.activeLocale);
+    localStorage.setItem('locale', this.activeLocale);
+  }
+}

app/controllers/glossary.js

@@ -1,7 +1,8 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
-
+import { service } from '@ember/service';
 export default class GlossaryController extends Controller {
+  @service intl;
   @tracked query = '';
 
   get results() {
@@ -16,13 +17,23 @@ export default class GlossaryController extends Controller {
       });
     }
     const caps = [];
-    return model.map((e) => {
-      if (caps.includes(e.title[0])) {
-        return { ...e, caps: '' };
-      } else {
-        caps.push(e.title[0]);
-        return { ...e, caps: e.title[0] };
-      }
-    });
+    return model
+      .sort((a, b) =>
+        this.intl
+          .t(a.title)
+          .localeCompare(this.intl.t(b.title), localStorage.getItem('locale')),
+      )
+      .map((e) => {
+        if (caps.includes(this.intl.t(e.title)[0])) {
+          return { ...e, link: this.intl.lookup(e.title, 'en'), caps: '' };
+        } else {
+          caps.push(this.intl.t(e.title)[0]);
+          return {
+            ...e,
+            link: this.intl.lookup(e.title, 'en'),
+            caps: this.intl.t(e.title)[0],
+          };
+        }
+      });
   }
 }

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/helpers/countryflag.js

@@ -0,0 +1,16 @@
+const langToCode = {
+  en: 'US',
+  hi: 'IN',
+  zh: 'CN',
+  nl: 'NL',
+  de: 'DE',
+  es: 'ES',
+  fr: 'FR',
+};
+
+export default function countryflag(countryCode /*, named*/) {
+  const codePoints = langToCode[countryCode.split('-')[0]]
+    .split('')
+    .map((char) => 127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}

app/helpers/language.js

@@ -0,0 +1,13 @@
+const codeToName = {
+  en: 'English',
+  hi: 'हिंदी',
+  zh: '汉语 ',
+  nl: 'Nederlands',
+  de: 'Deutsch',
+  es: 'Español',
+  fr: 'Francais',
+};
+
+export default function language(countryCode /*, named*/) {
+  return codeToName[countryCode];
+}

app/routes/application.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ApplicationRoute extends Route {
+  @service intl;
+
+  beforeModel() {
+    this.intl.setLocale(localStorage.getItem('locale') || ['en']);
+  }
+}