decaporg · vencax · Apr 27, 2017 · Apr 27, 2017 · Apr 27, 2017 · May 4, 2017
diff --git a/docs/contributor-guide.md b/docs/contributor-guide.md
@@ -7,3 +7,26 @@ While we work on building this page (and you can help!), here are some links wit
 * [Project Roadmap](https://github.com/netlify/netlify-cms/projects/3)
 * [Code of Conduct](https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md)
 * [Setup instructions and Contribution Guidelines](https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md)
+
+
+## I18N
+
+I18N strings are managed by [polyglot](http://airbnb.io/polyglot.js/).
+Strings are extracted from source code with static analysis by [i18n-extract](https://github.com/oliviertassinari/i18n-extract).
+Code is searched for regex /polyglot.t('[^']')/ so if you want particular string to be translated,
+you have to follow this rule.
+For more info see [polyglot](http://airbnb.io/polyglot.js/) or [example](../src/components/FindBar/FindBar.js)
+
+Extractions shall be extracted manually extra for each language.
+By one extraction run, one file (JSON) is produced (or updated if it already exists).
+to extract/update i18n strings run:
+
+```
+npm run extract --lang <code of your language>
+```
+
+E.g. czech language strings (international code cs) run:
+
+```
+npm run extract --lang cs
+```
diff --git a/example/index.html b/example/index.html
@@ -6,6 +6,7 @@
   <title>This is an example</title>
 
   <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>
+  <script src="https://rawgit.com/airbnb/polyglot.js/master/build/polyglot.js" type="text/javascript"></script>
   <link rel="stylesheet" href="/cms.css"/>
   <script>
   window.repoFiles = {
@@ -76,6 +77,9 @@
 </head>
 <body>
 
+  <script>
+    var polyglot = new Polyglot();
+  </script>
   <script src='/cms.js'></script>
   <script>
     var PostPreview = createClass({

diff --git a/extract.js b/extract.js
@@ -0,0 +1,59 @@
+const i18n = require('i18n-extract');
+const path = require('path');
+const fs = require('fs');
+const _ = require('lodash').mixin(require('lodash-keyarrange'))
+const i18nFolder = path.join(__dirname, 'src/i18n');
+
+const keys = i18n.extractFromFiles([
+  'src/**/*.js',
+], {
+  marker: 'polyglot.t',
+});
+
+function mergeMissing(translations, missing, makeVal) {
+  _.each(missing, (i) => {
+    if (translations[i.key] === undefined) {
+      translations[i.key] = makeVal(i);
+    }
+  });
+}
+
+function writeTranslations(file, translations) {
+  const sorted = _.keyArrange(translations)
+  fs.writeFileSync(file, JSON.stringify(sorted, {}, 2));
+}
+
+// check english trans first, they MUST be complete !!!
+const enFile = 'en.json';
+const enFilePath = path.join(i18nFolder, enFile);
+const enTransls = JSON.parse(fs.readFileSync(enFilePath));
+
+const enMissing = i18n.findMissing(enTransls, keys);
+if (enMissing.length > 0) {
+  mergeMissing(enTransls, enMissing, (i) => i.type);
+  writeTranslations(enFilePath, enTransls);
+  console.log('Some errors in english translation. Correct them:');
+  console.log(JSON.stringify(enMissing, {}, 2));
+  return -1;
+}
+
+const errors = []
+
+fs.readdirSync(i18nFolder).forEach(file => {
+  if (file === enFile) {
+    return
+  }
+  const filePath = path.join(i18nFolder, file);
+  const translations = JSON.parse(fs.readFileSync(filePath));
+
+  const missing = i18n.findMissing(translations, keys);
+  if (missing.length > 0) {
+    mergeMissing(translations, missing, (i) => enTransls[i.key])
+    writeTranslations(filePath, translations);
+    errors.push({file: file, missing: missing})
+  }
+});
+
+if (errors.length > 0) {
+  console.log(JSON.stringify(errors, {}, 2));
+}
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "lint:css:fix": "stylefmt --recursive src/",
     "lint:staged": "lint-staged",
     "deps": "npm-check -s",
-    "deps:update": "npm-check -u"
+    "deps:update": "npm-check -u",
+    "extract": "node extract.js"
   },
   "lint-staged": {
     "*.js": [
@@ -66,10 +67,13 @@
     "exports-loader": "^0.6.3",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
+    "i18n-extract": "^0.4.2",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^0.6.5",
     "jest-cli": "^16.0.1",
     "lint-staged": "^3.1.0",
+    "lodash": "^4.17.4",
+    "lodash-keyarrange": "^1.1.0",
     "node-sass": "^3.10.0",
     "npm-check": "^5.2.3",
     "postcss-cssnext": "^2.7.0",

diff --git a/src/actions/config.js b/src/actions/config.js
@@ -9,6 +9,7 @@ export const CONFIG_FAILURE = "CONFIG_FAILURE";
 
 const defaults = {
   publish_mode: publishModes.SIMPLE,
+  lang: 'en'
 };
 
 export function applyDefaults(config) {
@@ -82,6 +83,27 @@ export function configDidLoad(config) {
   };
 }
 
+const DEFAULT_I18N_URL = 'https://raw.githubusercontent.com/netlify/netlify-cms/master/src';
+
+function loadTranslations(config) {
+  const URL_BASE = config.default_i18n_urlbase || DEFAULT_I18N_URL;
+  const translationsURL = `${URL_BASE}/i18n/${config.lang}.json`;
+  return fetch(translationsURL)
+  .then((res) => {
+    if (res.status === 404) {
+      // try fallback en
+      console.error(`Translations for lang: ${config.lang} not exist, defaulting to english`);
+      config.lang = 'en';
+      return fetch(`${URL_BASE}/i18n/en.json`).then(res => res.json());
+    }
+    return res.json();
+  })
+  .then(transls => {
+    polyglot.replace(transls);
+    return config;
+  });
+}
+
 export function loadConfig() {
   if (window.CMS_CONFIG) {
     return configDidLoad(window.CMS_CONFIG);
@@ -99,6 +121,7 @@ export function loadConfig() {
     .then(parseConfig)
     .then(validateConfig)
     .then(applyDefaults)
+    .then(loadTranslations)
     .then((config) => {
       dispatch(configDidLoad(config));
       dispatch(authenticateUser());

diff --git a/src/backends/test-repo/AuthenticationPage.js b/src/backends/test-repo/AuthenticationPage.js
@@ -5,6 +5,8 @@ import { Card, Icon } from "../../components/UI";
 import logo from "../netlify-auth/netlify_logo.svg";
 import styles from "../netlify-auth/AuthenticationPage.css";
 
+
+
 export default class AuthenticationPage extends React.Component {
   static propTypes = {
     onLogin: React.PropTypes.func.isRequired,
@@ -25,10 +27,10 @@ export default class AuthenticationPage extends React.Component {
     return (<section className={styles.root}>
       <Card className={styles.card}>
         <img src={logo} width={100} role="presentation" />
-        <p className={styles.message}>This is a demo, enter your email to start</p>
+        <p className={styles.message}>{polyglot.t('demo_message')}</p>
         <Input
           type="text"
-          label="Email"
+          label={polyglot.t('email')}
           name="email"
           value={this.state.email}
           onChange={this.handleEmailChange}
@@ -38,7 +40,7 @@ export default class AuthenticationPage extends React.Component {
           raised
           onClick={this.handleLogin}
         >
-          <Icon type="login" /> Login
+          <Icon type="login" /> {polyglot.t('login')}
         </Button>
       </Card>
     </section>);

diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js
@@ -10,6 +10,7 @@ import FindBar from "../FindBar/FindBar";
 import { stringToRGB } from "../../lib/textHelper";
 import styles from "./AppHeader.css";
 
+
 export default class AppHeader extends React.Component {
 
   static propTypes = {
@@ -89,7 +90,7 @@ export default class AppHeader extends React.Component {
         <FindBar runCommand={runCommand} />
         <Avatar style={avatarStyle} title={user.get("name")} image={user.get("avatar_url")} />
         <IconMenu icon="settings" position="topRight" theme={styles}>
-          <MenuItem onClick={onLogoutClick} value="log out" caption="Log Out" />
+          <MenuItem onClick={onLogoutClick} value="log out" caption={polyglot.t('logout')} />
         </IconMenu>
       </AppBar>
     );

diff --git a/src/components/EntryEditor/EntryEditorToolbar.js b/src/components/EntryEditor/EntryEditorToolbar.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Button } from 'react-toolbox/lib/button';
 
+
 const EntryEditorToolbar = (
   {
     isPersisting,
@@ -16,7 +17,7 @@ const EntryEditorToolbar = (
         onClick={onPersist}
         disabled={disabled}
       >
-        { isPersisting ? 'Saving...' : 'Save' }
+        { isPersisting ? polyglot.t('saving') + ' ...' : polyglot.t('save') }
       </Button>
       {' '}
       <Button onClick={onCancelEdit}>

diff --git a/src/components/FindBar/FindBar.js b/src/components/FindBar/FindBar.js
@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import styles from './FindBar.css';
 
+
 export const SEARCH = 'SEARCH';
-const PLACEHOLDER = 'Search entry titles...';
 
 class FindBar extends Component {
   static propTypes = {
@@ -17,7 +17,7 @@ class FindBar extends Component {
     };
     this.state = {
       value: '',
-      placeholder: PLACEHOLDER,
+      placeholder: polyglot.t('search_entry_titles') + ' ...',
     };
   }
 

diff --git a/src/components/UnpublishedListing/UnpublishedListing.js b/src/components/UnpublishedListing/UnpublishedListing.js
@@ -11,6 +11,8 @@ import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
 import { status, statusDescriptions } from '../../constants/publishModes';
 import styles from './UnpublishedListing.css';
 
+
+
 class UnpublishedListing extends React.Component {
   static propTypes = {
     entries: ImmutablePropTypes.orderedMap,
@@ -27,13 +29,13 @@ class UnpublishedListing extends React.Component {
   };
 
   requestDelete = (collection, slug, ownStatus) => {
-    if (window.confirm('Are you sure you want to delete this entry?')) {
+    if (window.confirm(polyglot.t('really_delete'))) {
       this.props.handleDelete(collection, slug, ownStatus);
     }
   };
   requestPublish = (collection, slug, ownStatus) => {
     if (ownStatus !== status.last()) return;
-    if (window.confirm('Are you sure you want to publish this entry?')) {
+    if (window.confirm(polyglot.t('really_publish'))) {
       this.props.handlePublish(collection, slug, ownStatus);
     }
   };

diff --git a/src/components/Widgets/FileControl.js b/src/components/Widgets/FileControl.js
@@ -3,6 +3,8 @@ import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
 
+
+
 const MAX_DISPLAY_LENGTH = 50;
 
 export default class FileControl extends React.Component {
@@ -92,7 +94,7 @@ export default class FileControl extends React.Component {
         onDrop={this.handleChange}
       >
         <span style={styles.message} onClick={this.handleClick}>
-          {fileName ? fileName : 'Tip: Click here to select a file to upload, or drag an image directly into this box from your desktop'}
+          {fileName ? fileName : polyglot.t('filecontrol_tip')}
         </span>
         <input
           type="file"

diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js
@@ -3,6 +3,7 @@ import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
 
+
 const MAX_DISPLAY_LENGTH = 50;
 
 export default class ImageControl extends React.Component {
@@ -96,7 +97,7 @@ export default class ImageControl extends React.Component {
         onDrop={this.handleChange}
       >
         <span style={styles.message} onClick={this.handleClick}>
-          {imageName ? imageName : 'Tip: Click here to upload an image from your file browser, or drag an image directly into this box from your desktop'}
+          {imageName ? imageName : polyglot.t('imagecontrol_tip')}
         </span>
         <input
           type="file"

diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js b/src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js
@@ -8,6 +8,7 @@ import ToolbarPluginForm from './ToolbarPluginForm';
 import { Icon } from '../../../UI';
 import styles from './Toolbar.css';
 
+
 export default class Toolbar extends React.Component {
   static propTypes = {
     selectionPosition: PropTypes.object,
@@ -64,11 +65,11 @@ export default class Toolbar extends React.Component {
 
     return (
       <div className={styles.Toolbar}>
-        <ToolbarButton label="Header 1" icon="h1" action={onH1}/>
-        <ToolbarButton label="Header 2" icon="h2" action={onH2}/>
-        <ToolbarButton label="Bold" icon="bold" action={onBold}/>
-        <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
-        <ToolbarButton label="Link" icon="link" action={onLink}/>
+        <ToolbarButton label={polyglot.t('header1')} icon="h1" action={onH1}/>
+        <ToolbarButton label={polyglot.t('header2')} icon="h2" action={onH2}/>
+        <ToolbarButton label={polyglot.t('bold')} icon="bold" action={onBold}/>
+        <ToolbarButton label={polyglot.t('italic')} icon="italic" action={onItalic}/>
+        <ToolbarButton label={polyglot.t('link')} icon="link" action={onLink}/>
         <ToolbarComponentsMenu
           plugins={plugins}
           onComponentMenuItemClick={this.handlePluginFormDisplay}

diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginForm.js b/src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginForm.js
@@ -58,9 +58,9 @@ export default class ToolbarPluginForm extends React.Component {
           ))}
         </div>
         <div className={styles.footer}>
-          <Button raised onClick={this.handleSubmit}>Insert</Button>
+          <Button raised onClick={this.handleSubmit}>{polyglot.t('insert')}</Button>
           {' '}
-          <Button onClick={onCancel}>Cancel</Button>
+          <Button onClick={onCancel}>{polyglot.t('cancel')}</Button>
         </div>
       </form>
     );

diff --git a/src/constants/publishModes.js b/src/constants/publishModes.js
@@ -1,5 +1,6 @@
 import { Map, OrderedMap } from 'immutable';
 
+
 // Create/edit workflow modes
 export const SIMPLE = 'simple';
 export const EDITORIAL_WORKFLOW = 'editorial_workflow';
@@ -12,7 +13,7 @@ export const status = OrderedMap({
 });
 
 export const statusDescriptions = Map({
-  [status.get('DRAFT')]: 'Draft',
-  [status.get('PENDING_REVIEW')]: 'Waiting for Review',
-  [status.get('PENDING_PUBLISH')]: 'Waiting to go live',
+  [status.get('DRAFT')]: polyglot.t('draft'),
+  [status.get('PENDING_REVIEW')]: polyglot.t('review_waiting'),
+  [status.get('PENDING_PUBLISH')]: polyglot.t('go_live_waiting'),
 });
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -25,6 +25,7 @@ import { SIMPLE, EDITORIAL_WORKFLOW } from '../constants/publishModes';
 import styles from './App.css';
 import sidebarStyles from './Sidebar.css';
 
+
 TopBarProgress.config({
   barColors: {
     "0": '#3ab7a5',
@@ -125,7 +126,7 @@ class App extends React.Component {
     }
 
     if (config.get('isFetching')) {
-      return <Loader active>Loading configuration...</Loader>;
+      return <Loader active>{polyglot.t('loading_configuration')}</Loader>;
     }
 
     if (user == null) {
@@ -145,7 +146,7 @@ class App extends React.Component {
             </section>
           }
           <section>
-            <h1 className={sidebarStyles.heading}>Collections</h1>
+            <h1 className={sidebarStyles.heading}>{polyglot.t('collections')}</h1>
             {
               collections.valueSeq().map((collection) => {
                 const collectionName = collection.get('name');