aboutsummaryrefslogtreecommitdiff
path: root/docs/DEVELOPMENT.md
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2023-03-29 00:45:16 +0200
committerGitHub <noreply@github.com>2023-03-28 22:45:16 +0000
commit428c300e9f42f8b9232f780d387292c1a94fcd23 (patch)
tree8e3026de0ad6a69a08396026bdc7fd084d073739 /docs/DEVELOPMENT.md
parent784330797d947ec2ff4eb97a7325ac77f3a79e4d (diff)
downloadFlightCore-428c300e9f42f8b9232f780d387292c1a94fcd23.tar.gz
FlightCore-428c300e9f42f8b9232f780d387292c1a94fcd23.zip
feat: i18n (#182)
* build: add vue-i18n dependency * feat: add i18n plugin to vue project * feat: use translations in play button * feat: translate play view * feat: translate menu items * feat: translate local mods view * feat: translate online mods view * feat: translate mods menu * feat: translate thunderstore mod card component * fix: remove useless "this" keyword * feat: translate settings view * fix: remove leftover test invocation * feat: add language selector component * feat: using language selector updates interface's language * feat: save language in persistent store on selector change * feat: initialize lang on app launch * refactor: move i18n code into App.mounted callback * feat: update interface language on app launch * feat: adjust language selection on language selector load * fix: this.$root can't be null * feat: translate store notifications * fix: add missing parameter to english translation * feat: translate "by" author keyword * feat: translate repair window * feat: translate repair window title * docs: add some documentation regarding localization * docs: explain how to add a new language * feat: translate Northstar release canal selector elements * docs: describe how to inject variable into translations * feat: translate "info" word * feat: translate popconfirm buttons * fix: remove "this" keyword * fix: save store when updating interface language
Diffstat (limited to 'docs/DEVELOPMENT.md')
-rw-r--r--docs/DEVELOPMENT.md60
1 files changed, 60 insertions, 0 deletions
diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index 0eada12c..02832722 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -179,6 +179,66 @@ struct User {
then simply run `cargo test`. The generated bindings are placed in `src-tauri/bindings/`. Make sure to add and commit them as well!
+### Internationalization
+
+For FlightCore to be used by the largest number, its interface is translated in several languages; users can choose used language through FlightCore settings.
+
+Localization files are located in `src-vue/src/i18n/lang`.
+
+To add a new language, you have to create associated file, *e.g. `src-vue/src/i18n/lang/de.ts`*, and import it in the i18n application object in `main.ts`:
+```javascript
+import de from "./i18n/lang/de";
+
+export const i18n = createI18n({
+ locale: 'en',
+ fallbackLocale: 'en',
+ messages: {
+ en, fr, de
+ }
+});
+```
+
+There are different ways to use translations in views; in HTML template, invoke the `$t` method with translation key:
+
+```html
+<div>
+ {{ $t('menu.play') }}
+</div>
+```
+
+For use in Typescript code (inside components), invoke the `this.$t` method:
+
+```javascript
+return this.$t("play.button.select_game_dir");
+```
+
+For Typescript code outside components, translations are still accessible:
+
+```javascript
+import { i18n } from '../main';
+i18n.global.tc('notification.game_folder.new.text');
+```
+
+---
+
+It is possible to inject variables into translations:
+
+```javascript
+channels: {
+ release: {
+ component: {
+ text: "Switched release channel to {canal}."
+ }
+ }
+}
+```
+
+```javascript
+return this.$t("channels.release.component.text", {canal: "MyCanalName"});
+```
+
+
+
## Other
This repo uses [EditorConfig](https://editorconfig.org/) to define some basic formatting rules. Find a plugin for your IDE [here](https://editorconfig.org/#download).