Skip to content

Updated the code links that are mentioned in Technical Part since the… #1681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 17, 2020
Merged

Updated the code links that are mentioned in Technical Part since the… #1681

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions developer_docs/translations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,47 @@ In order to simplify the translations process the following rules of thumb were
## Technical Part

* There is only one file to translate all the texts in any specific language, which is located under the directory, in respective locale [subdirectory](https://github.com/processing/p5.js-web-editor/tree/develop/translations/locales)
* The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L7)
* New languages will need to be selected using a dropdown in Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L550)
* The new language code must be added to [client/i18n.js](https://github.com/processing/p5.js-web-editor/blob/develop/client/i18n.js#L8)
* New languages will need to be selected using a dropdown in Nav component, specifically in function [renderLanguageMenu.](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L611)
* Need to add `TRANSLATIONS_ENABLED=true` to `.env` to activate dropdown for the languages.

#### Nav.js
Need to add the following code to add a new language as a dropdown menu.
```js
<li className="nav__dropdown-item">
<button
onFocus={this.handleFocusForLang}
onBlur={this.handleBlur}
value="newLanguageValue"
onClick={e => this.handleLangSelection(e)}
>
new language name in the new language ex: 日本語 (Japanese)
</button>
</li>
```

#### i18n.js
In terms of `i18n.js`, you will need to update 2 things. One is to import a new language from `date-fns/locale`. The other is to add a new language to `languageMap`.

```js
import { enUS, es, ja, newLanguage } from 'date-fns/locale';
const availableLanguages = ['en-US', 'es-419', 'ja', 'newLanguage'];
```

```js
export function languageKeyToDateLocale(lang) {
const languageMap = {
'en-US': enUS,
'es-419': es,
'ja': ja
'newLanguage': newLanguage
};
return languageMap[lang];
}
```



## Translations

* Every component should introduce its own subset of keys inside a dictionary named after the component.
Expand Down