[LocalizationWorkflowTutorial] (issue #16) Added localization.

Author: DanilAndreev

src/Documentation.js

@@ -103,6 +103,7 @@ export default function Documentation() {
                     tooltip: "Github source code"
                 }
             ]}
+            onVersionClick={() => window.location = "https://github.com/material-docs/material-docs/releases"}
         >
             <DocsMenu dense>
                 <AutoDocsMenu/>

src/locale/EN.json

@@ -3,6 +3,41 @@
   "label": "English",
   "locale": {
     "pages": {
+      "LocalizationWorkflowTutorial": {
+        "headers": {
+          "localizationProcess": "Localization process",
+          "localization": "Localization",
+          "creatingLang": "Creating a language pack",
+          "langAccess": "Access to the language pack",
+          "langTranslation": "Adding a translation",
+          "interfaceLocalization": "Interface localization",
+          "mechanismAccess": "Access to the localization engine",
+          "sourcesOnGitHub": "Source codes on"
+        },
+        "langStructureCaption": "Material Docs has a built-in localization mechanism. The language pack has the following structure:",
+        "langStructureName": "The name of the language pack. (_recommends naming according to standards, e.g. __en-us___)",
+        "langStructureLabel": "The nice name of the language pack will be displayed in the interface.",
+        "langStructureLocale": "The object that stores your localization data.",
+        "langStructureLoadLang": "The function to be called when the language is loaded. Needed to get localization from a remote host.",
+        "langStructureComment": "One of the parameters must be defined in the Lang object __: _locale_ or _loadLang_!__",
+        "creatingLang": "Let's create a language pack for existing pages and transfer it to",
+        "applyingLang": "Now that we have created one language pack, we can start the Material Docs localization system. To do this, you need to transfer the package to",
+        "appliedLang": "A language field appeared in the upper right corner.",
+        "accessingLang": "Now, let's get the text from the language pack. To do this, we will use the ```<Locale />``` component. In the parameter ___path___ specifies the path to the variable inside the _locale_ object in the language pack.",
+        "accessingLangComment": "> Please note that localization of the ```<Markdown />``` component needs to be done differently. This component contains\n> own parameter ___locale___, with which we advise you to specify the path in the language pack. ",
+        "translating": "After we have created ___defaultLanguage___, we can move on to translation.",
+        "translatingComment": "Use only the fields specified in the ___locale___ field of the __ default language pack__.",
+        "createTranslate": "Let's create a translation:",
+        "missingFieldsComment": "Note that __translation__ contains __not all of the fields__ that are in the standard language pack. Fields that are not in the translation __ will be taken from the standard package __.",
+        "providingLang": "Now, let's pass the ___langs___ parameter to the ```<DocsLayout />``` component:",
+        "languageSwitch": "Now, the language selection button on the top right of the interface is available and offers a choice of 2 languages.",
+        "interfaceTranslating": "The MaterialDocs interface is in English by default. In order to translate it, you need to add to the next\nstructure in the ___locale___ field of the language pack:",
+        "interfaceTranslated": "Now, the documentation interface has been translated. ",
+        "usingHooks": "You can access the localization engine using the ___useLang()___ hook or the ___withLang()___ higher-order component. We advise you to use them only as a last resort. ",
+        "sourcesOnGitHub": "You can find the sources for this example at",
+        "here": "here"
+
+      },
       "HostingMaterialDocsOnGHPagesTutorial": {
         "headers": {
           "hostingOnGH": "Hosting Material Docs on GitHub Pages",

src/locale/RU.json

@@ -3,6 +3,41 @@
   "label": "Русский",
   "locale": {
     "pages": {
+      "LocalizationWorkflowTutorial": {
+        "headers": {
+          "localizationProcess": "Процесс локализации",
+          "localization": "Локализация ",
+          "creatingLang": "Создание языкового пакета",
+          "langAccess": "Доступ к языковому пакету",
+          "langTranslation": "Добавление перевода",
+          "interfaceLocalization": "Локализация интерфейса",
+          "mechanismAccess": "Доступ к механизму локализации",
+          "sourcesOnGitHub": "Исходники на"
+        },
+        "langStructureCaption": "В Material Docs присутствует встроенный механизм для локализации. Языковой пакет имеет следующую структуру:",
+        "langStructureName": "Название языкового пакета. (_рекомендует называть в соответствии со стандартами, например __en-us___)",
+        "langStructureLabel": "Красивое названия языкового пакета, будет отображено в интерфейсе.",
+        "langStructureLocale": " Объект, в котором хранятся ваши данные о локализации. ",
+        "langStructureLoadLang": "Функция, которая будет вызвана при загрузке языка. Нужна для получения локализации с удаленного хоста.",
+        "langStructureComment": "В объекте Lang __обязательно должен быть определен один из параметров: _locale_ или _loadLang_!__",
+        "creatingLang": "Создадим языковой пакет для существующих страниц и передадим его в",
+        "applyingLang": "Теперь, когда мы создали один языковой пакет, мы можем запустить систему локализации Material Docs. Для этого \nнужно передать пакет в",
+        "appliedLang": "В правом верхнем углу появилось поле с языком.",
+        "accessingLang": "Теперь, давайте достанем текст из языкового пакета. Для этого воспользуемся компонентом ```<Locale/>```. В параметре ___path___\n указывается путь к переменной внутри объекта _locale_ в языковом пакете.",
+        "accessingLangComment": "> Обратите внимание, локализацию компонента ```<Markdown/>``` нужно проводить иначе. В этом компоненте присутствует \n> собственный параметр ___locale___, с помощью которого мы советуем указывать путь в языковом пакете. ",
+        "translating": "После того, как мы создали ___defaultLanguage___, можно переходить к переводу.",
+        "translatingComment": "Используйте только те поля, которые указаны в поле ___locale___ __языкового пакета по умолчанию__.",
+        "createTranslate": "Создадим перевод:",
+        "missingFieldsComment": "Заметьте, __перевод__ содержит __не все поля__, которые присутствуют в стандартном языковом пакете. Поля, которых нет в переводе __будут взяты из стандартного пакета__.",
+        "providingLang": "Теперь, давайте передадим в компонент ```<DocsLayout/>``` параметр ___langs___:",
+        "languageSwitch": "Теперь, кнопка выбора языка справа сверху интерфейса доступна и предлагает на выбор 2 языка.",
+        "interfaceTranslating": "Интерфейс MaterialDocs по умолчанию имеет английский язык. Для того, чтоб перевести его, необходимо добавить в следующую\nструктуру в поле ___locale___ языкового пакета:",
+        "interfaceTranslated": "Теперь, интерфейс документации переведен. ",
+        "usingHooks": "Вы можете получить доступ к механизму локализации с помощью хука ___useLang()___ или компонента высшего порядка ___withLang()___. Советуем пользоваться ими только в крайних случаях. ",
+        "sourcesOnGitHub": "Вы можете найти исходники этого примера на",
+        "here": "здесь"
+
+      },
       "HostingMaterialDocsOnGHPagesTutorial": {
         "headers": {
           "hostingOnGH": "Хостинг Material Docs на GitHub Pages",

src/pages/Tutorials/LocalizationWorkflow/LocalizationWorkflow.md

@@ -1,18 +1,18 @@
-# Процесс локализации
-## Локализация 
-### Создание языкового пакета
-В Material Docs присутствует встроенный механизм для локализации. Языковой пакет имеет следующую структуру:
+# &{&&locale/headers/localizationProcess}&
+## &{&&locale/headers/localization}&
+### &{&&locale/headers/creatingLang}&
+&{&&locale/langStructureCaption}&
 * Lang
-  * ```name: string``` -  Название языкового пакета. (_рекомендует называть в соответствии со стандартами, например __en-us___)
-  * ```label: string``` - Красивое названия языкового пакета, будет отображено в интерфейсе.
-  * ```locale: abject``` - Объект, в котором хранятся ваши данные о локализации. 
-  * ```loadLang(): object``` - Функция, которая будет вызвана при загрузке языка. Нужна для получения локализации с удаленного хоста.
+  * ```name: string``` -  &{&&locale/langStructureName}&
+  * ```label: string``` - &{&&locale/langStructureLabel}&
+  * ```locale: object``` - &{&&locale/langStructureLocale}&
+  * ```loadLang(): object``` - &{&&locale/langStructureLoadLang}&
 
-> В объекте Lang __обязательно должен быть определен один из параметров: _locale_ или _loadLang_!__
+> &{&&locale/langStructureComment}&
 
-Создадим языковой пакет для существующих страниц и передадим его в ```<DocsLayout/>```:
+&{&&locale/creatingLang}& ```<DocsLayout/>```:
 ##### locale/EN.js
-```
+```{"type": "code", "themeLight": "darcula"}
 export default {
     name: "en-us",
     label: "English",
@@ -33,9 +33,8 @@ export default {
     }
 }
 ```
-Теперь, когда мы создали один языковой пакет, мы можем запустить систему локализации Material Docs. Для этого 
-нужно передать пакет в ```<DocsLayout/>```:
-```
+&{&&locale/applyingLang}& ```<DocsLayout/>```:
+```{"type": "code", "themeLight": "darcula"}
 <DocsLayout
     name={"My documentation"}
     version={"1.0.0-alpha"}
@@ -49,14 +48,12 @@ export default {
 {/*...*/}
 </DocsLayout>
 ``` 
-В правом верхнем углу появилось поле с языком. 
-### Доступ к языковому пакету
-Теперь, давайте достанем текст из языкового пакета. Для этого воспользуемся компонентом ```<Locale/>```. В параметре ___path___
- указывается путь к переменной внутри объекта _locale_ в языковом пакете.
-> Обратите внимание, локализацию компонента ```<Markdown/>``` нужно проводить иначе. В этом компоненте присутствует 
-> собственный параметр ___locale___, с помощью которого мы советуем указывать путь в языковом пакете. 
+&{&&locale/appliedLang}& 
+### &{&&locale/headers/langAccess}&
+&{&&locale/accessingLang}& 
+&{&&locale/accessingLangComment}& 
 
-```
+```{"type": "code", "themeLight": "darcula"}
 import React from "react";
 import DocsPage from "@material-docs/core/components/DocsPage";
 import H1 from "@material-docs/core/components/H1";
@@ -90,12 +87,12 @@ export default function FirstPage() {
     );
 }
 ```
-### Добавление перевода
-После того, как мы создали ___defaultLanguage___, можно переходить к переводу.
-> Используйте только те поля, которые указаны в поле ___locale___ __языкового пакета по умолчанию__.
+### &{&&locale/headers/langTranslation}&
+&{&&locale/translating}& 
+> &{&&locale/translatingComment}& 
 
-Создадим перевод:
-```
+&{&&locale/createTranslate}& 
+```{"type": "code", "themeLight": "darcula"}
 export default {
     name: "ru-ru",
     label: "Русский",
@@ -109,11 +106,10 @@ export default {
     }
 }
 ```
-> Заметьте, __перевод__ содержит __не все поля__, которые присутствуют в стандартном языковом пакете. Поля, которых нет 
-> переводе __будут взяты из стандартного пакета__.
+> &{&&locale/missingFieldsComment}& 
 
-Теперь, давайте передадим в компонент ```<DocsLayout/>``` параметр ___langs___:
-```
+&{&&locale/providingLang}& 
+```{"type": "code", "themeLight": "darcula"}
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
@@ -157,11 +153,10 @@ ReactDOM.render(
 
 serviceWorker.unregister();
 ```
-Теперь, кнопка выбора языка справа сверху интерфейса доступна и предлагает на выбор 2 языка.
-### Локализация интерфейса Material Docs
-Интерфейс MaterialDocs по умолчанию имеет английский язык. Для того, чтоб перевести его, необходимо добавить в следующую
-структуру в поле ___locale___ языкового пакета:
-```javascript
+&{&&locale/languageSwitch}& 
+### &{&&locale/headers/interfaceLocalization}& Material Docs
+&{&&locale/interfaceTranslating}& 
+```{"type": "code", "themeLight": "darcula"}
 export default {
     name: "ru-ru",
     label: "Русский",
@@ -202,10 +197,9 @@ export default {
     }
 }
 ```
-Теперь, интерфейс документации переведен. 
-### Доступ к механизму локализации
-Вы можете получить доступ к механизму локализации с помощью хука ___useLang()___ или компонента высшего порядка ___withLang()___.
-Советуем пользоваться ими только в крайних случаях. 
+&{&&locale/interfaceTranslated}& 
+### &{&&locale/headers/mechanismAccess}&
+&{&&locale/usingHooks}& 
 
-## Исходники на GitHub
-Вы можете найти исходники этого примера на GitHub [здесь](&&GitHubLink)
+## &{&&locale/headers/sourcesOnGitHub}& GitHub
+&{&&locale/sourcesOnGitHub}&  GitHub [&{&&locale/here}& ](&&GitHubLink)

src/pages/Tutorials/LocalizationWorkflow/index.js

@@ -19,7 +19,7 @@ export default function AdvancedMaterialDocsUsage() {
         >
             <Markdown
                 data={{
-                    locale: "pages/HostingMaterialDocsOnGHPagesTutorial",
+                    locale: "pages/LocalizationWorkflowTutorial",
                     GitHubLink: "https://github.com/material-docs/material-docs-example-project/tree/localization-workflow"
                 }}
                 children={content}