feat: i18n

studio/package.json

@@ -8,7 +8,9 @@
     "dist/"
   ],
   "scripts": {
-    "prebuild": "node ./scripts/rm-www.js",
+    "clean": "node ./scripts/rm-www.js",
+    "i18n": "node ./scripts/i18n.types.js",
+    "prebuild": "npm run clean && npm run i18n",
     "build": "stencil build",
     "build:staging": "npm run build -- --staging",
     "postbuild": "./scripts/config.index.js",

studio/scripts/i18n.types.js

@@ -0,0 +1,37 @@
+const {writeFileSync, readFileSync} = require('fs');
+
+const prettier = require('prettier');
+
+const generate = async () => {
+  const buffer = readFileSync('./src/assets/i18n/en.json');
+  const i18n = JSON.parse(buffer.toString());
+
+  const data = Object.keys(i18n).map((key) => {
+    const properties = Object.keys(i18n[key]).map((prop) => `${prop}: string;`);
+
+    return {
+      key,
+      name: `I18n${key.charAt(0).toUpperCase()}${key.slice(1)}`,
+      properties,
+    };
+  });
+
+  const lang = `lang: 'en';`;
+
+  const main = `\n\ninterface I18n {${lang}${data.map((i) => `${i.key}: ${i.name};`).join('')}}`;
+  const interfaces = data.map((i) => `\n\ninterface ${i.name} {${i.properties.join('')}}`).join('');
+
+  const output = prettier.format(`${interfaces}${main}`, {semi: false, parser: 'babel', singleQuote: true});
+
+  writeFileSync('./src/app/definitions/i18.d.ts', output);
+};
+
+(async () => {
+  try {
+    await generate();
+
+    console.log(`i18n type declarations generated!`);
+  } catch (err) {
+    console.error(`Error while generating i18n types.`, err);
+  }
+})();

studio/src/app/components/core/app-footer/app-links.tsx

@@ -1,5 +1,7 @@
 import {Component, h} from '@stencil/core';
 
+import i18n from '../../../stores/i18n.store';
+
 @Component({
   tag: 'app-links',
   styleUrl: 'app-links.scss',
@@ -13,78 +15,79 @@ export class AppLinks {
           <ion-label class="ion-padding-top">DeckDeckGo</ion-label>
 
           <a href="https://deckdeckgo.com/en/" rel="noopener norefferer" target="_blank">
-            <ion-label>Home</ion-label>
+            <ion-label>{i18n.state.links.home}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/discover" rel="noopener norefferer" target="_blank">
-            <ion-label>Discover</ion-label>
+            <ion-label>{i18n.state.links.discover}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/enterprise" rel="noopener norefferer" target="_blank">
-            <ion-label>Enterprise</ion-label>
+            <ion-label>{i18n.state.links.enterprise}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/about" rel="noopener norefferer" target="_blank">
-            <ion-label>About</ion-label>
+            <ion-label>{i18n.state.links.about}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/team" rel="noopener norefferer" target="_blank">
-            <ion-label>Team</ion-label>
+            <ion-label>{i18n.state.links.team}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/newsletter" rel="noopener norefferer" target="_blank">
-            <ion-label>Newsletter</ion-label>
+            <ion-label>{i18n.state.links.newsletter}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/contact" rel="noopener norefferer" target="_blank">
-            <ion-label>Contact</ion-label>
+            <ion-label>{i18n.state.links.contact}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/press" rel="noopener norefferer" target="_blank">
-            <ion-label>Press</ion-label>
+            <ion-label>{i18n.state.links.press}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/faq" rel="noopener norefferer" target="_blank">
-            <ion-label>FAQ</ion-label>
+            <ion-label>{i18n.state.links.faq}</ion-label>
           </a>
         </section>
 
         <section>
-          <ion-label class="ion-padding-top">Developers</ion-label>
+          <ion-label class="ion-padding-top">{i18n.state.links.developers}</ion-label>
 
           <a href="https://deckdeckgo.com/en/opensource" rel="noopener norefferer" target="_blank">
-            <ion-label>Open source</ion-label>
+            <ion-label>{i18n.state.links.open_source}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/services" rel="noopener norefferer" target="_blank">
-            <ion-label>Services</ion-label>
+            <ion-label>{i18n.state.links.services}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/en/developer" rel="noopener norefferer" target="_blank">
-            <ion-label>Developer</ion-label>
+            <ion-label>{i18n.state.links.developer}</ion-label>
           </a>
         </section>
 
         <section>
-          <ion-label class="ion-padding-top">Terms</ion-label>
+          <ion-label class="ion-padding-top">{i18n.state.links.terms}</ion-label>
 
           <a href="https://deckdeckgo.com/terms" rel="noopener norefferer" target="_blank">
-            <ion-label>Terms of use</ion-label>
+            <ion-label>{i18n.state.links.terms_of_use}</ion-label>
           </a>
 
           <a href="https://deckdeckgo.com/privacy" rel="noopener norefferer" target="_blank">
-            <ion-label>Privacy Policy</ion-label>
+            <ion-label>{i18n.state.links.privacy_policy}</ion-label>
           </a>
         </section>
 
         <div class="social ion-padding-top ion-margin-top">
-          <a href="https://twitter.com/deckdeckgo" rel="noopener norefferer" target="_blank">
+          <a href="https://twitter.com/deckdeckgo" rel="noopener norefferer" target="_blank" aria-label="Twitter">
             <ion-icon name="logo-twitter"></ion-icon>
           </a>
-          <a href="https://github.com/deckgo" rel="noopener noreferrer">
+          <a href="https://github.com/deckgo" rel="noopener noreferrer" aria-label="GitHub">
             <ion-icon name="logo-github"></ion-icon>
           </a>
           <a
+            aria-label="Slack"
             href="https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY"
             rel="noopener noreferrer">
             <ion-icon name="logo-slack"></ion-icon>

studio/src/app/components/core/app-menu/app-menu.tsx

@@ -2,11 +2,12 @@ import {Component, Element, Fragment, h} from '@stencil/core';
 
 import navStore from '../../../stores/nav.store';
 import authStore from '../../../stores/auth.store';
+import {NavDirection} from '../../../stores/nav.store';
+import i18n from '../../../stores/i18n.store';
 
 import {signIn} from '../../../utils/core/signin.utils';
 
 import {AuthService} from '../../../services/auth/auth.service';
-import {NavDirection} from '../../../stores/nav.store';
 
 @Component({
   tag: 'app-menu',
@@ -66,7 +67,7 @@ export class AppMenu {
     return (
       <ion-item button class="home" href="/dashboard" routerDirection="forward">
         <ion-icon lazy={true} name="apps-outline" slot="start"></ion-icon>
-        <ion-label>Dashboard</ion-label>
+        <ion-label>{i18n.state.menu.dashboard}</ion-label>
       </ion-item>
     );
   }
@@ -76,14 +77,14 @@ export class AppMenu {
       return (
         <ion-item button class="signout" onClick={() => this.signOut()}>
           <ion-icon lazy={true} name="log-out-outline" slot="start" style={{transform: 'translate(3px, 0px)'}}></ion-icon>
-          <ion-label>Sign out</ion-label>
+          <ion-label>{i18n.state.nav.sign_out}</ion-label>
         </ion-item>
       );
     } else {
       return (
         <ion-item button onClick={() => this.signIn()}>
           <ion-icon lazy={true} name="log-in-outline" slot="start" style={{transform: 'translate(-3px, 0px)'}}></ion-icon>
-          <ion-label>Sign in</ion-label>
+          <ion-label>{i18n.state.nav.sign_in}</ion-label>
         </ion-item>
       );
     }
@@ -94,12 +95,12 @@ export class AppMenu {
       <Fragment>
         <ion-item button class="home" href="/poll" routerDirection="forward">
           <ion-icon lazy={true} name="chatbubble-ellipses-outline" slot="start"></ion-icon>
-          <ion-label>Poll</ion-label>
+          <ion-label>{i18n.state.menu.poll}</ion-label>
         </ion-item>
 
         <ion-item button class="home remote" href="https://deckdeckgo.app" target="_blank">
           <ion-icon lazy={true} name="phone-portrait-outline" slot="start"></ion-icon>
-          <ion-label>Remote control</ion-label>
+          <ion-label>{i18n.state.menu.remote_control}</ion-label>
         </ion-item>
       </Fragment>
     );
@@ -113,15 +114,15 @@ export class AppMenu {
 
         <ion-list class="settings">
           <ion-item button class="home" href="/profile" routerDirection="forward">
-            <ion-label>Profile</ion-label>
+            <ion-label>{i18n.state.nav.profile}</ion-label>
             <ion-icon lazy={true} name="person-outline" slot="start"></ion-icon>
           </ion-item>
           <ion-item button class="home" href="/customization" routerDirection="forward">
-            <ion-label>Customization</ion-label>
+            <ion-label>{i18n.state.nav.customization}</ion-label>
             <ion-icon lazy={true} name="color-palette-outline" slot="start"></ion-icon>
           </ion-item>
           <ion-item button class="home" href="/templates" routerDirection="forward">
-            <ion-label>Templates</ion-label>
+            <ion-label>{i18n.state.nav.templates}</ion-label>
             <ion-icon lazy={true} name="reader-outline" slot="start"></ion-icon>
           </ion-item>
         </ion-list>

studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx

@@ -5,6 +5,7 @@ import {popoverController} from '@ionic/core';
 import themeStore from '../../../stores/theme.store';
 import authStore from '../../../stores/auth.store';
 import userStore from '../../../stores/user.store';
+import i18n from '../../../stores/i18n.store';
 
 import {signIn} from '../../../utils/core/signin.utils';
 
@@ -47,7 +48,7 @@ export class AppNavigationActions {
     } else if (this.presentation || this.publish) {
       return (
         <button class="wide-device ion-padding-start ion-padding-end signin" onClick={() => signIn()} tabindex={0}>
-          <ion-label>Sign in</ion-label>
+          <ion-label>{i18n.state.nav.sign_in}</ion-label>
         </button>
       );
     }
@@ -56,7 +57,7 @@ export class AppNavigationActions {
   private renderLoggedIn() {
     if (authStore.state.loggedIn && userStore.state.loaded) {
       return (
-        <button class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)} aria-label="Open menu" tabindex={0}>
+        <button class="ion-padding-end" onClick={(e: UIEvent) => this.openMenu(e)} aria-label={i18n.state.nav.menu} tabindex={0}>
           <app-avatar src={userStore.state.photoUrl}></app-avatar>
         </button>
       );
@@ -75,7 +76,7 @@ export class AppNavigationActions {
           routerDirection="root"
           mode="md"
           color={themeStore.state.darkTheme ? 'light' : 'dark'}>
-          <ion-label>Write a presentation</ion-label>
+          <ion-label>{i18n.state.nav.write_a_presentation}</ion-label>
         </ion-button>
       );
     } else {
@@ -92,7 +93,7 @@ export class AppNavigationActions {
           onClick={() => this.actionPublish.emit()}
           mode="md"
           color={themeStore.state.darkTheme ? 'light' : 'dark'}>
-          <ion-label>Ready to share?</ion-label>
+          <ion-label>{i18n.state.nav.ready_to_share}</ion-label>
         </ion-button>
       );
     } else {

studio/src/app/components/core/app-navigation/app-navigation.tsx

@@ -1,7 +1,7 @@
 import {Component, Prop, h} from '@stencil/core';
 
 import offlineStore from '../../../stores/offline.store';
-
+import i18n from '../../../stores/i18n.store';
 import store from '../../../stores/deck.store';
 
 @Component({
@@ -104,7 +104,7 @@ export class AppNavigation {
       return (
         <ion-buttons slot="start">
           <ion-menu-toggle>
-            <ion-button>
+            <ion-button aria-label={i18n.state.nav.menu}>
               <ion-icon slot="icon-only" name="menu"></ion-icon>
             </ion-button>
           </ion-menu-toggle>
@@ -138,7 +138,7 @@ export class AppNavigation {
 
     return (
       <ion-router-link href={`/editor/${offlineStore.state.offline.id}`} routerDirection="root" slot="end" class="offline-info ion-padding-end">
-        <ion-label>You are editing offline.</ion-label>
+        <ion-label>{i18n.state.offline.editing}</ion-label>
       </ion-router-link>
     );
   }

studio/src/app/components/core/app-signin/app-signin.tsx

@@ -7,10 +7,13 @@ import {User as FirebaseUser, UserCredential, AuthCredential, OAuthCredential} f
 import navStore, {NavDirection} from '../../../stores/nav.store';
 import authStore from '../../../stores/auth.store';
 import tokenStore from '../../../stores/token.store';
+import i18n from '../../../stores/i18n.store';
 
 import {AuthUser} from '../../../models/auth/auth.user';
 
 import {Utils} from '../../../utils/core/utils';
+import {renderI18n} from '../../../utils/core/i18n.utils';
+
 import {EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config';
 
 import {EnvironmentConfigService} from '../../../services/core/environment/environment-config.service';
@@ -293,16 +296,16 @@ export class AppSignIn {
         <div id="firebaseui-auth-container"></div>
 
         <p class="ion-text-center ion-padding-start ion-padding-end">
-          <small>DeckDeckGo is free and open source 😃.</small>
+          <small>{i18n.state.core.free_open_source}</small>
         </p>
       </main>,
     ];
   }
 
   private renderMsg() {
     return [
-      <h1 class="ion-text-center ion-padding-start ion-padding-end">Oh, hi 👋! Good to have you.</h1>,
-      <p class="ion-text-center ion-padding">Sign in to unleash all features of the editor and to share your presentation online.</p>,
+      <h1 class="ion-text-center ion-padding-start ion-padding-end">{i18n.state.sign_in.hi}</h1>,
+      <p class="ion-text-center ion-padding">{i18n.state.sign_in.why}</p>,
     ];
   }
 
@@ -312,8 +315,8 @@ export class AppSignIn {
     } else {
       return (
         <ion-buttons class="back">
-          <ion-button onClick={() => this.navigateBack()} color="dark">
-            <ion-icon aria-label="Close" src="/assets/icons/ionicons/close.svg"></ion-icon>
+          <ion-button onClick={() => this.navigateBack()} color="dark" aria-label={i18n.state.core.close}>
+            <ion-icon src="/assets/icons/ionicons/close.svg"></ion-icon>
           </ion-button>
         </ion-buttons>
       );
@@ -323,7 +326,7 @@ export class AppSignIn {
   private renderGitHub() {
     return (
       <p class="ion-text-center ion-padding-start ion-padding-end ion-padding-bottom">
-        Additionally, push the source code of your slides to repos with the GitHub <ion-icon name="logo-github"></ion-icon> logging.
+        {renderI18n(i18n.state.sign_in.additionally, {placeholder: '{0}', value: <ion-icon name="logo-github"></ion-icon>})}
       </p>
     );
   }

studio/src/app/components/core/app-template-showcase/app-template-showcase.tsx

@@ -1,5 +1,7 @@
 import {Component, Prop, h, State, Fragment} from '@stencil/core';
 
+import i18n from '../../../stores/i18n.store';
+
 import {Template, TemplateDataSlot} from '../../../models/data/template';
 
 import {TemplateUtils} from '../../../utils/editor/template.utils';
@@ -61,7 +63,7 @@ export class AppTemplateShowcase {
     return (
       <div class="spinner">
         <ion-spinner color="medium"></ion-spinner>
-        <ion-label>Loading...</ion-label>
+        <ion-label>{i18n.state.core.loading}</ion-label>
       </div>
     );
   }