From 22e91ba6b05b98c094b53409c1b2414205b803d3 Mon Sep 17 00:00:00 2001 From: DanilAndreev <33941552+DanilAndreev@users.noreply.github.com> Date: Thu, 15 Oct 2020 14:27:31 +0300 Subject: [PATCH 1/4] [HostingMaterialDocsOnGHPagesTutorial] (issue #12) Finished localization. --- .idea/codeStyles/codeStyleConfig.xml | 5 ++ src/locale/EN.json | 62 ++++++++++++------- src/locale/RU.json | 40 ++++++++++++ .../HostingMaterialDocsOnGHPages.md | 36 +++++------ 4 files changed, 97 insertions(+), 46 deletions(-) create mode 100644 .idea/codeStyles/codeStyleConfig.xml diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..a55e7a1 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/src/locale/EN.json b/src/locale/EN.json index d4a1c64..501649f 100644 --- a/src/locale/EN.json +++ b/src/locale/EN.json @@ -5,29 +5,43 @@ "pages": { "HostingMaterialDocsOnGHPagesTutorial": { "headers": { - "hostingOnGH": "Хостинг Material Docs на GitHub Pages", - "projectSetup": "Настройка проекта для GitHub Pages", - "problem": "Проблема", - "solutionTheory": "Решение в теории", - "solutionPractice": "Решение на практике", - "repoCreating": "Создание репозитория", - "compilation": "Компиляция", - "ghPagesSetup": "Настройка GitHub Pages", - "basicSetup": "Базовая настройка", - "ownDomainHooking": "Привязывание собственного домена", - "nextSteps": "Дальнейшие шаги", - "ghSources": "Исходники на GitHub" - }, - "prevTutorial": "Этот туториал использует проект, созданный в", - "prevLesson": "предыдущем уроке", - "overview": "Material Docs - это одно страничное React приложение, которое использует __react-router-dom__. Это означает, что\nпри переключении между страницами _URL_ меняется без перезагрузки страницы. Когда пользователь обращается на сайт, который \nхостится с помощью GitHub Pages, хостинг вернет страницу __index.thml__ или же ту, которая указана в _URL_. ", - "overview2": "Проще говоря, если мы захостим Material Docs на GitHub Pages без дополнительной настройки - при перезагрузке страницы \nбудем получать страницу __404 | Not found__.", - "suggestions": "Для того, чтоб предотвратить данную проблему, предлагается: \n* Создать страницу __404.html__, которая будет помещать путь из _URL_ в __query string__ запроса и делать редирект на \n_URL_, который ведет на __index.html__. \n* На странице __index.html__ мы будем обратно разбирать __query string__ и возвращать все на место __до того, как запустится react__.", - "jekyll": "Создайте файл __.nojekyll__ в директории __public__. Он нужен для того, чтоб GitHub Pages ну использовала фреймворк Jekyll.", - "jekyllNote": "По умолчанию, GitHub Pages использует", - "page404": "Теперь, необходимо добавить в директорию __public__ файл __404.html__ с таким содержанием:", - "segmentCount": "> Переменная ___segmentCount___ указывает количество элементов пути, которые не надо сериализовать. \n> В случае GitHub Pages - необходимо выставить значение ___segmentCount___ = 1. \n> Если вы собираетесь привязать собственный домен - посчитайте ___segmentCount___ и выставьте его.", - "pageIndex": "Далее, добавьте в файл __index.html__ в тэг _head_ следующий код:" + "hostingOnGH": "Hosting Material Docs on GitHub Pages", + "projectSetup": "Project setup for GitHub Pages", + "problem": "The problem", + "solutionTheory": "Solution in theory", + "solutionPractice": "Practice solution", + "repoCreating": "Creating a repository", + "compilation": "Compilation", + "ghPagesSetup": "Setting up GitHub Pages", + "basicSetup": "Basic setup", + "ownDomainHooking": "Linking your own domain", + "nextSteps": "Further steps", + "ghSources": "Sources on GitHub" + }, + "prevTutorial": "This tutorial uses a project created in", + "prevLesson": "previous lesson", + "overview": "Material Docs - is a single page application that uses __react-router-dom__. It means that when switching between pages, _URL_ changes without reloading the page. When a user visits a site that hosted with GitHub Pages, the hosting will return the __index.thml__ page or the one specified in the _URL_.", + "overview2": "Simply put, if we host Material Docs on GitHub Pages without additional configuration - on page reload will receive page __404 | Not found__.", + "suggestions": "In order to prevent this problem, it is proposed:\n* Create a __404.html__ page that will put the path from _URL_ into the __query string__ of the request and redirect to _URL_, which leads to __index.html__.\n* On the __index.html__ page, we will parse the __query string__ back and put everything back in the __ position before react__ starts.", + "jekyll": "Create a __.nojekyll__ file in the __public__ directory. It is needed in order for GitHub Pages to use the Jekyll framework.", + "jekyllNote": "By default, GitHub Pages uses", + "page404": "Now, you need to add the __404.html__ file to the __public__ directory with the following content:", + "segmentCount": "> The variable ___segmentCount___ indicates the number of path elements that do not need to be serialized.\n> In the case of GitHub Pages, you need to set the value ___segmentCount___ = 1.\n> If you are going to link your own domain, count ___segmentCount___ and set it.", + "pageIndex": "Next, add the following code to the __index.html__ file in the _head_ tag:", + "compiling": "Now, all that remains is to compile Material Docs and set up GitHub Pages :)", + "repoCreation": "Create a repository on _GitHub_ with any name, in our case - ___material-docs-example-project___. After, upload files to it using any software of your choice.", + "packageSetup": "> In the __package.json__ file, add the _homepage_ field with the URL of the page on GitHub Pages.\n> Example address", + "building": "In order to place the documentation on GitHub Pages, you need to compile the project. To do this, you must run\ncommand in the directory where the file is located ", + "for": "For", + "dirSetup": "Thus, we got an almost ready-to-publish web page in the __build__ directory.\nRename this directory to __docs__.", + "settings": "Go to the __Settings__ section of your repository and find the __GitHub Pages__ subsection there.", + "source": "In the __Source__ section, select the target branch, and in the __directory__ field, select ___ /docs___. Save the settings.", + "hostingSetup": "> For example, we will use the subdomain ___ example.material-docs.com ___\n> _Domain management interface may differ depending on your hosting. In the example, hosting_ __Imena.ua__", + "hostingSettings": "Go to the domain settings and add an entry:", + "hostingComment": "> If you are not using a subdomain - instead of _example_, enter ___www___\n> _185.199.111.153 - GitHub Pages address at the time of the tutorial creation ._", + "hostingSteps": "* Calculate the value of the ___segmentCount___ parameter in the __404.html__ file. ([How to do it] (#solution-in-practice))\n* In the __package.json__ file, set __your domain__ in the _homepage_ field.\n* Add a domain to the GitHub Pages settings in the domain field.", + "githubExample": "You can find this example on", + "here": "here" }, "CreatingMaterialDocsTutorial": { "headers": { @@ -36,7 +50,7 @@ "materialDocsSetup": "Material Docs setup", "indexSetup": "Setting up index.html", "extraFilesDeleting": "Extra files deletion", - "creatingDocs": "Создание документации", + "creatingDocs": "Documentation creation", "basicStructure": "Basic structure", "creatingPage": "Creating page", "creatingPageComponent": "Creating page component", diff --git a/src/locale/RU.json b/src/locale/RU.json index 3a0a6d5..67437e3 100644 --- a/src/locale/RU.json +++ b/src/locale/RU.json @@ -3,6 +3,46 @@ "label": "Русский", "locale": { "pages": { + "HostingMaterialDocsOnGHPagesTutorial": { + "headers": { + "hostingOnGH": "Хостинг Material Docs на GitHub Pages", + "projectSetup": "Настройка проекта для GitHub Pages", + "problem": "Проблема", + "solutionTheory": "Решение в теории", + "solutionPractice": "Решение на практике", + "repoCreating": "Создание репозитория", + "compilation": "Компиляция", + "ghPagesSetup": "Настройка GitHub Pages", + "basicSetup": "Базовая настройка", + "ownDomainHooking": "Привязывание собственного домена", + "nextSteps": "Дальнейшие шаги", + "ghSources": "Исходники на GitHub" + }, + "prevTutorial": "Этот туториал использует проект, созданный в", + "prevLesson": "предыдущем уроке", + "overview": "Material Docs - это одно страничное React приложение, которое использует __react-router-dom__. Это означает, что\nпри переключении между страницами _URL_ меняется без перезагрузки страницы. Когда пользователь обращается на сайт, который \nхостится с помощью GitHub Pages, хостинг вернет страницу __index.thml__ или же ту, которая указана в _URL_. ", + "overview2": "Проще говоря, если мы захостим Material Docs на GitHub Pages без дополнительной настройки - при перезагрузке страницы \nбудем получать страницу __404 | Not found__.", + "suggestions": "Для того, чтоб предотвратить данную проблему, предлагается: \n* Создать страницу __404.html__, которая будет помещать путь из _URL_ в __query string__ запроса и делать редирект на \n_URL_, который ведет на __index.html__. \n* На странице __index.html__ мы будем обратно разбирать __query string__ и возвращать все на место __до того, как запустится react__.", + "jekyll": "Создайте файл __.nojekyll__ в директории __public__. Он нужен для того, чтоб GitHub Pages ну использовала фреймворк Jekyll.", + "jekyllNote": "По умолчанию, GitHub Pages использует", + "page404": "Теперь, необходимо добавить в директорию __public__ файл __404.html__ с таким содержанием:", + "segmentCount": "> Переменная ___segmentCount___ указывает количество элементов пути, которые не надо сериализовать. \n> В случае GitHub Pages - необходимо выставить значение ___segmentCount___ = 1. \n> Если вы собираетесь привязать собственный домен - посчитайте ___segmentCount___ и выставьте его.", + "pageIndex": "Далее, добавьте в файл __index.html__ в тэг _head_ следующий код:", + "compiling": "Теперь, осталось скомпилировать Material Docs и настроить GitHub Pages :)", + "repoCreation": "Создайте репозиторий на _GitHub_ с любым названием, в нашем случае - ___material-docs-example-project___. После, \nзагрузите в него файлы с помощью любого программного обеспечения на ваше усмотрение.", + "packageSetup": "> В файле __package.json__ добавьте поле _homepage_ с адресом страницы на GitHub Pages. \n> Пример адреса", + "building": "Для того, чтоб разместить документацию на GitHub Pages, необходимо скомпилировать проект. Для этого, необходимо выполнить\nкоманду в директории, где находится файл ", + "for": "Для", + "dirSetup": "Таким образом мы получили практически готовую к публикации веб страницу в директории __build__. \nПереименуйте эту директорию в __docs__.", + "settings": "Зайдите в раздел __Settings__ своего репозитория и найдите там подраздел __GitHub Pages__.", + "source": "В разделе __Source__ выберите целевую ветку и в поле __директория__ выберите ___/docs___. Сохраните настройки.", + "hostingSetup": "> Для примера, мы будем использовать поддомен ___example.material-docs.com___ \n> _Интерфейс управления доменом может отличаться в зависимости от вашего хостинга. В примере хостинг_ __Imena.ua__", + "hostingSettings": "Заходим в настройки домена и добавляем запись:", + "hostingComment": "> Если вы используете не поддомен - вместо _example_ введите ___www___ \n> _185.199.111.153 - адрес GitHub Pages на момент создания туториала._", + "hostingSteps": "* Посчитайте значение параметра ___segmentCount___ в файле __404.html__. ([Как это сделать](#решение-на-практике)) \n* В файле __package.json__ выставьте __свой домен__ в поле _homepage_.\n* Добавляем домен в настройки GitHub Pages в поле для домена.", + "githubExample": "Вы можете найти этот пример на", + "here": "здесь" + }, "CreatingMaterialDocsTutorial": { "headers": { "creatingMaterialDocs": "Создание Material Docs", diff --git a/src/pages/Tutorials/HostingMaterialDocsOnGHPages/HostingMaterialDocsOnGHPages.md b/src/pages/Tutorials/HostingMaterialDocsOnGHPages/HostingMaterialDocsOnGHPages.md index abd6610..3e9ac1e 100644 --- a/src/pages/Tutorials/HostingMaterialDocsOnGHPages/HostingMaterialDocsOnGHPages.md +++ b/src/pages/Tutorials/HostingMaterialDocsOnGHPages/HostingMaterialDocsOnGHPages.md @@ -95,45 +95,37 @@ ``` -Теперь, осталось скомпилировать Material Docs и настроить GitHub Pages :) +&{&&locale/compiling}& ## &{&&locale/headers/repoCreating}& -Создайте репозиторий на _GitHub_ с любым названием, в нашем случае - ___material-docs-example-project___. После, -загрузите в него файлы с помощью любого программного обеспечения на ваше усмотрение. +&{&&locale/repoCreation}& ## &{&&locale/headers/compilation}& -> В файле __package.json__ добавьте поле _homepage_ с адресом страницы на GitHub Pages. -> Пример адреса ```https://YOUR_USERNAME.github.io/REPOSITORY_NAME/``` +&{&&locale/packageSetup}& ```https://YOUR_USERNAME.github.io/REPOSITORY_NAME/``` -Для того, чтоб разместить документацию на GtiHub Pages, необходимо скомпилировать проект. Для этого, необходимо выполнить -команду в директории, где находится файл ```package.json``` : -Для __yarn__: +&{&&locale/building}& ```package.json``` : +&{&&locale/for}& __yarn__: ```{"type": "code", "themeLight": "darcula"} $ yarn run build ``` -Для __npm__: +&{&&locale/for}& __npm__: ```{"type": "code", "themeLight": "darcula"} $ npm run build ``` -Таким образом мы получили практически готовую к публикации веб страницу в директории __build__. -Переименуйте эту директорию в __docs__. +&{&&locale/dirSetup}& ## &{&&locale/headers/ghPagesSetup}& ### &{&&locale/headers/basicSetup}& -Зайдите в раздел __Settings__ своего репозитория и найдите там подраздел __GitHub Pages__. +&{&&locale/settings}& ![{"alt": "GitHub Pages", "src": "&&GitHubPagesInitialImage", "fullWidth": true, "frame": true}]() -В разделе __Source__ выберите целевую ветку и в поле __директория__ выберите ___/docs___. Сохраните настройки. +&{&&locale/source}& ![{"alt": "GitHub Pages", "src": "&&GitHubPagesSetupImage", "fullWidth": true, "frame": true}]() ### &{&&locale/headers/ownDomainHooking}& -> Для примера, мы будем использовать поддомен ___example.material-docs.com___ -> _Интерфейс управления доменом может отличаться в зависимости от вашего хостинга. В примере хостинг_ __Imena.ua__ +&{&&locale/hostingSetup}& -Заходим в настройки домена и добавляем запись: +&{&&locale/hostingSettings}& ![{"alt": "GitHub Pages", "src": "&&DNSSetup", "fullWidth": true, "frame": true}]() -> Если вы используете не поддомен - вместо _example_ введите ___www___ -> _185.199.111.153 - адрес GitHub Pages на момент создания туториала._ +&{&&locale/hostingComment}& #### &{&&locale/headers/nextSteps}& -* Посчитайте значение параметра ___segmentCount___ в файле __404.html__. ([Как это сделать](#решение-на-практике)) -* В файле __package.json__ выставьте __свой домен__ в поле _homepage_. -* Добавляем домен в настройки GitHub Pages в поле для домена. +&{&&locale/hostingSteps}& ![{"alt": "GitHub Pages", "src": "&&GitHubPagesDNSSetup", "fullWidth": true, "frame": true}]() ## &{&&locale/headers/ghSources}& -Вы можете найти этот пример на GitHub [здесь](https://github.com/material-docs/material-docs-example-project/tree/hosting-on-gh-pages) \ No newline at end of file +&{&&locale/githubExample}& [&{&&locale/here}&](https://github.com/material-docs/material-docs-example-project/tree/hosting-on-gh-pages) \ No newline at end of file From ef48c5577af784f5c89ed0e606dd69181342eaed Mon Sep 17 00:00:00 2001 From: DanilAndreev <33941552+DanilAndreev@users.noreply.github.com> Date: Thu, 15 Oct 2020 14:30:22 +0300 Subject: [PATCH 2/4] [HostingMaterialDocsOnGHPagesTutorial] (issue #20) Fixed typo. --- src/locale/EN.json | 2 +- src/locale/RU.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/locale/EN.json b/src/locale/EN.json index 501649f..67584e2 100644 --- a/src/locale/EN.json +++ b/src/locale/EN.json @@ -23,7 +23,7 @@ "overview": "Material Docs - is a single page application that uses __react-router-dom__. It means that when switching between pages, _URL_ changes without reloading the page. When a user visits a site that hosted with GitHub Pages, the hosting will return the __index.thml__ page or the one specified in the _URL_.", "overview2": "Simply put, if we host Material Docs on GitHub Pages without additional configuration - on page reload will receive page __404 | Not found__.", "suggestions": "In order to prevent this problem, it is proposed:\n* Create a __404.html__ page that will put the path from _URL_ into the __query string__ of the request and redirect to _URL_, which leads to __index.html__.\n* On the __index.html__ page, we will parse the __query string__ back and put everything back in the __ position before react__ starts.", - "jekyll": "Create a __.nojekyll__ file in the __public__ directory. It is needed in order for GitHub Pages to use the Jekyll framework.", + "jekyll": "Create a __.nojekyll__ file in the __public__ directory. It is needed so that GitHub Pages does not use the Jekyll framework.", "jekyllNote": "By default, GitHub Pages uses", "page404": "Now, you need to add the __404.html__ file to the __public__ directory with the following content:", "segmentCount": "> The variable ___segmentCount___ indicates the number of path elements that do not need to be serialized.\n> In the case of GitHub Pages, you need to set the value ___segmentCount___ = 1.\n> If you are going to link your own domain, count ___segmentCount___ and set it.", diff --git a/src/locale/RU.json b/src/locale/RU.json index 67437e3..ec9cb20 100644 --- a/src/locale/RU.json +++ b/src/locale/RU.json @@ -23,7 +23,7 @@ "overview": "Material Docs - это одно страничное React приложение, которое использует __react-router-dom__. Это означает, что\nпри переключении между страницами _URL_ меняется без перезагрузки страницы. Когда пользователь обращается на сайт, который \nхостится с помощью GitHub Pages, хостинг вернет страницу __index.thml__ или же ту, которая указана в _URL_. ", "overview2": "Проще говоря, если мы захостим Material Docs на GitHub Pages без дополнительной настройки - при перезагрузке страницы \nбудем получать страницу __404 | Not found__.", "suggestions": "Для того, чтоб предотвратить данную проблему, предлагается: \n* Создать страницу __404.html__, которая будет помещать путь из _URL_ в __query string__ запроса и делать редирект на \n_URL_, который ведет на __index.html__. \n* На странице __index.html__ мы будем обратно разбирать __query string__ и возвращать все на место __до того, как запустится react__.", - "jekyll": "Создайте файл __.nojekyll__ в директории __public__. Он нужен для того, чтоб GitHub Pages ну использовала фреймворк Jekyll.", + "jekyll": "Создайте файл __.nojekyll__ в директории __public__. Он нужен для того, чтоб GitHub Pages не использовала фреймворк Jekyll.", "jekyllNote": "По умолчанию, GitHub Pages использует", "page404": "Теперь, необходимо добавить в директорию __public__ файл __404.html__ с таким содержанием:", "segmentCount": "> Переменная ___segmentCount___ указывает количество элементов пути, которые не надо сериализовать. \n> В случае GitHub Pages - необходимо выставить значение ___segmentCount___ = 1. \n> Если вы собираетесь привязать собственный домен - посчитайте ___segmentCount___ и выставьте его.", From 1c69a9af090756e6ce0f9ed18548d8c604ef2ef4 Mon Sep 17 00:00:00 2001 From: DanilAndreev <33941552+DanilAndreev@users.noreply.github.com> Date: Thu, 15 Oct 2020 15:18:11 +0300 Subject: [PATCH 3/4] [LocalizationWorkflowTutorial] (issue #16) Added localization. --- src/Documentation.js | 1 + src/locale/EN.json | 35 +++++++++ src/locale/RU.json | 35 +++++++++ .../LocalizationWorkflow.md | 76 +++++++++---------- .../Tutorials/LocalizationWorkflow/index.js | 2 +- 5 files changed, 107 insertions(+), 42 deletions(-) diff --git a/src/Documentation.js b/src/Documentation.js index fd939b2..8a58799 100644 --- a/src/Documentation.js +++ b/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"} > diff --git a/src/locale/EN.json b/src/locale/EN.json index 67584e2..d543d0c 100644 --- a/src/locale/EN.json +++ b/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 `````` 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 `````` 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 `````` 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", diff --git a/src/locale/RU.json b/src/locale/RU.json index ec9cb20..d3a8192 100644 --- a/src/locale/RU.json +++ b/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": "Теперь, давайте достанем текст из языкового пакета. Для этого воспользуемся компонентом ``````. В параметре ___path___\n указывается путь к переменной внутри объекта _locale_ в языковом пакете.", + "accessingLangComment": "> Обратите внимание, локализацию компонента `````` нужно проводить иначе. В этом компоненте присутствует \n> собственный параметр ___locale___, с помощью которого мы советуем указывать путь в языковом пакете. ", + "translating": "После того, как мы создали ___defaultLanguage___, можно переходить к переводу.", + "translatingComment": "Используйте только те поля, которые указаны в поле ___locale___ __языкового пакета по умолчанию__.", + "createTranslate": "Создадим перевод:", + "missingFieldsComment": "Заметьте, __перевод__ содержит __не все поля__, которые присутствуют в стандартном языковом пакете. Поля, которых нет в переводе __будут взяты из стандартного пакета__.", + "providingLang": "Теперь, давайте передадим в компонент `````` параметр ___langs___:", + "languageSwitch": "Теперь, кнопка выбора языка справа сверху интерфейса доступна и предлагает на выбор 2 языка.", + "interfaceTranslating": "Интерфейс MaterialDocs по умолчанию имеет английский язык. Для того, чтоб перевести его, необходимо добавить в следующую\nструктуру в поле ___locale___ языкового пакета:", + "interfaceTranslated": "Теперь, интерфейс документации переведен. ", + "usingHooks": "Вы можете получить доступ к механизму локализации с помощью хука ___useLang()___ или компонента высшего порядка ___withLang()___. Советуем пользоваться ими только в крайних случаях. ", + "sourcesOnGitHub": "Вы можете найти исходники этого примера на", + "here": "здесь" + + }, "HostingMaterialDocsOnGHPagesTutorial": { "headers": { "hostingOnGH": "Хостинг Material Docs на GitHub Pages", diff --git a/src/pages/Tutorials/LocalizationWorkflow/LocalizationWorkflow.md b/src/pages/Tutorials/LocalizationWorkflow/LocalizationWorkflow.md index 263ab6d..010e94b 100644 --- a/src/pages/Tutorials/LocalizationWorkflow/LocalizationWorkflow.md +++ b/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}& -Создадим языковой пакет для существующих страниц и передадим его в ``````: +&{&&locale/creatingLang}& ``````: ##### locale/EN.js -``` +```{"type": "code", "themeLight": "darcula"} export default { name: "en-us", label: "English", @@ -33,9 +33,8 @@ export default { } } ``` -Теперь, когда мы создали один языковой пакет, мы можем запустить систему локализации Material Docs. Для этого -нужно передать пакет в ``````: -``` +&{&&locale/applyingLang}& ``````: +```{"type": "code", "themeLight": "darcula"} ``` -В правом верхнем углу появилось поле с языком. -### Доступ к языковому пакету -Теперь, давайте достанем текст из языкового пакета. Для этого воспользуемся компонентом ``````. В параметре ___path___ - указывается путь к переменной внутри объекта _locale_ в языковом пакете. -> Обратите внимание, локализацию компонента `````` нужно проводить иначе. В этом компоненте присутствует -> собственный параметр ___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}& -Теперь, давайте передадим в компонент `````` параметр ___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) \ No newline at end of file +## &{&&locale/headers/sourcesOnGitHub}& GitHub +&{&&locale/sourcesOnGitHub}& GitHub [&{&&locale/here}& ](&&GitHubLink) \ No newline at end of file diff --git a/src/pages/Tutorials/LocalizationWorkflow/index.js b/src/pages/Tutorials/LocalizationWorkflow/index.js index 1a5fd7d..2064481 100644 --- a/src/pages/Tutorials/LocalizationWorkflow/index.js +++ b/src/pages/Tutorials/LocalizationWorkflow/index.js @@ -19,7 +19,7 @@ export default function AdvancedMaterialDocsUsage() { > Date: Thu, 15 Oct 2020 15:23:18 +0300 Subject: [PATCH 4/4] [package] Changed version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 02aa488..9757308 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@material-docs/material-docs-documentation", - "version": "0.1.8", + "version": "0.1.9", "private": false, "description": "Documentation for Material Docs. material-docs - react framework for easy creating documentation site in material design style.", "homepage": "http://material-docs.com/",