Prototype with proposed i18n architecture

client/i18n.js

@@ -0,0 +1,37 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+// import detector from 'i18next-browser-languagedetector';//
+// import Fetch from 'i18next-fetch-backend';
+// import Fetch from 'i18next-fetch-backend';
+import Backend from 'i18next-http-backend';
+
+const fallbackLng = ['en'];
+const availableLanguages = ['en', 'es'];
+
+const options = {
+  loadPath: '/locales/{{lng}}/translations.json',
+  requestOptions: { // used for fetch, can also be a function (payload) => ({ method: 'GET' })
+    mode: 'no-cors'
+  },
+  allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
+};
+
+i18n
+  .use(initReactI18next) // pass the i18n instance to react-i18next.
+  .use(Backend).init({
+    lng: 'en',
+    defaultNS: 'menu',
+    fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
+    debug: true,
+    backend: options,
+    getAsync: false,
+    initImmediate: false,
+    useSuspense: true,
+    whitelist: availableLanguages,
+    interpolation: {
+      escapeValue: false
+    },
+    saveMissing: true,
+  });
+
+export default i18n;

client/index.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
 import configureStore from './store';
 import routes from './routes';
+import i18n from './i18n';
 
 require('./styles/main.scss');
 
@@ -25,6 +26,8 @@ const App = () => (
 const HotApp = hot(App);
 
 render(
-  <HotApp />,
+  <Suspense fallback={(<div>Loading translations</div>)}>
+    <HotApp />
+  </Suspense>,
   document.getElementById('root')
 );

client/modules/IDE/components/Toast.jsx

@@ -2,15 +2,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import * as ToastActions from '../actions/toast';
 
 import ExitIcon from '../../../images/exit.svg';
 
 function Toast(props) {
+  const { t } = useTranslation('common');
   return (
     <section className="toast">
       <p>
-        {props.text}
+        {t(props.text)}
       </p>
       <button className="toast__close" onClick={props.hideToast} aria-label="Close Alert" >
         <ExitIcon focusable="false" aria-hidden="true" />

package.json

@@ -141,6 +141,9 @@
     "express-session": "^1.17.0",
     "friendly-words": "^1.1.10",
     "htmlhint": "^0.10.1",
+    "i18next": "^19.4.5",
+    "i18next-browser-languagedetector": "^4.2.0",
+    "i18next-http-backend": "^1.0.15",
     "is-url": "^1.2.4",
     "jest-express": "^1.11.0",
     "js-beautify": "^1.10.3",
@@ -168,6 +171,7 @@
     "react-dom": "^16.12.0",
     "react-helmet": "^5.1.3",
     "react-hot-loader": "^4.12.19",
+    "react-i18next": "^11.5.0",
     "react-redux": "^5.1.2",
     "react-router": "^3.2.5",
     "react-split-pane": "^0.1.89",

server/server.js

@@ -79,6 +79,13 @@ app.options('*', corsMiddleware);
 app.use(Express.static(path.resolve(__dirname, '../dist/static'), {
   maxAge: process.env.STATIC_MAX_AGE || (process.env.NODE_ENV === 'production' ? '1d' : '0')
 }));
+
+// setting middleware
+app.use(Express.static('translations'));
+/* app.get('/public', (req, res) => {
+  res.send('An alligator approaches!');
+}); */
+
 app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
 app.use(bodyParser.json({ limit: '50mb' }));
 app.use(cookieParser());

translations/locales/en/translations.json

@@ -0,0 +1,98 @@
+{
+  "About": {
+    "Contribute": "Contribute",
+    "NewPj5": "New to p5.js?",
+    "Report": "Report a bug",
+    "Learn": "Learn",
+    "About": "About",
+    "Resources": "Resources",
+    "Libraries": "Libraries",
+    "Forum": "Forum"
+  },
+  "Menu": {
+    "File": "File",
+    "New": "New",
+    "Save": "Save",
+    "Examples": "Examples",
+    "Edit": "Edit",
+    "TidyCode": "Tidy Code",
+    "Find": "Find",
+    "AddToCollection": "Add to Collection",
+    "FindNext": "Find Next",
+    "FindPrevious": "Find Previous",
+    "Sketch": "Sketch",
+    "AddFile": "Add File",
+    "AddFolder": "Add Folder",
+    "Run": "Run",
+    "Stop": "Stop",
+    "Help": "Help",
+    "KeyboardShortcuts": "Keyboard Shortcuts",
+    "Reference": "Reference",
+    "About": "About",
+    "Tidy": "Tidy",
+    "Lang": "Language"},
+  "Settings": {
+    "FindNextMatch": "Find Next Match",
+    "FindPrevMatch": "Find Previous Match",
+    "IndentCodeLeft": "Indent Code Left",
+    "IndentCodeRight": "Indent Code Right",
+    "CommentLine": "Comment Line",
+    "StartSketch": "Start Sketch",
+    "StopSketch": "StopSketch",
+    "TurnOnAccessibleOutput": "Turn On Accessible Output",
+    "TurnOffAccessibleOutput": "Turn Off Accessible Output",
+    "ToogleSidebar": "Toogle Sidebar",
+    "ToogleConsole": "Toogle Console",
+    "Preview": "Preview",
+    "Auto-refresh": "Auto-refresh",
+    "Console": "Console",
+    "Settings": "Settings",
+    "GeneralSettings": "General settings",
+    "Theme": "Theme",
+    "Light": "Light",
+    "Dark": "Dark",
+    "HighContrast": "High Contrast",
+    "TextSize": "Text Size",
+    "Decrease": "Decrease",
+    "Increase": "Increase",
+    "IndentationAmount": "Indentation amount",
+    "Autosave": "Autosave",
+    "On": "On",
+    "Off": "Off",
+    "SketchSettings": "Sketch Settings",
+    "SecurityProtocol": "Security Protocol",
+    "ServeOverHTTPS": "Serve over HTTPS",
+    "Accesibility": "Accesibility",
+    "LintWarningSound": "Lint Warning Sound",
+    "PreviewSound": "Preview sound",
+    "AccessibleTextBasedCanvas": "Accessible text-based canvas",
+    "UsedScreenReader": "Used with screen reader",
+    "Plain-text": "Plain-text",
+    "Table-text": "Table-text",
+    "Sound": "Sound",
+    "WordWrap": "Word Wrap",
+    "LineNumbers": "Line Numbers",
+    "LangChange": "Language changed"
+  },
+  "Login": {
+    "Welcome": "Welcome",
+    "Login": "Login",
+    "LoginOr": "or",
+    "SignUp": "Sign Up",
+    "Email": "email",
+    "Username": "username",
+    "LoginGithub": "Login with Github",
+    "LoginGoogle": "Login with Google",
+    "DontHaveAccount": "Don't have an account?",
+    "ForgotPassword": "Forgot your password?",
+    "ResetPassword": "Reset your password",
+    "BackEditor": "Back to Editor",
+    "UsernameSplit": "User Name",
+    "Password": "Password",
+    "ConfirmPassword": "Confirm Password"
+  },
+  "Toast": {
+    "LangChange": "Language changed!!!",
+    "OpenedNewSketch": "Opened new sketch."
+  }
+}