From b1a0f70705091480a5578881f239ab53552ed6cd Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Mon, 8 Aug 2022 14:22:01 -0500 Subject: first draft of i18n instructions --- README.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) (limited to 'README.md') diff --git a/README.md b/README.md index 5ab2c1f6..6e8a36ec 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,68 @@ this repository is the front-end code for the coinos web application, it uses `s ## commands to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get your dev environment setup, and `pnpm format` to format the codebase when making changes. + +# Internationalization + +CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: + +## Required Background Knowledge + +### Language Codes + +Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language. + +### Locale Files + +Each translation of CoinOS is stored in a special *locale file*. These files can be found in the `src/locales` folder in the CoinOS directory. The name of these files is the language code plus "`.json`". A file might look something like this: + +```JSON +{ + "howItWorks": "How It Works", + "faq": "FAQ", + "about": "About", + "startInSeconds": "Start in Seconds", + "signIn": "Sign In" +} +``` + +Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that string. **Both the text name and translated text must be inside quotation marks (`"`).** + +### The Language List + +At the top of the file `src/lib/i18n.js`, there is a list of translations that looks something like this: + +```js +// The list of locales to look for +// ADD ALL NEW LOCALES TO THIS LIST +const localeCodes = ["en", "fr"]; +``` + +In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks. + +## Creating a New Translation + +Follow these steps to create a new translation. You will need a GitHub account to do this: +1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. +2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub. +[](./img/create_locale_github.png) +3. Copy the text from `en.json` into this new file. +4. Translate all of the strings on the right. **Do not translate or alter in any way the strings on the left!** +[](./img/translate_github.png) +5. Scroll down and use the green button to commit the file. +6. Go to the `src` folder again, then `lib`, then `i18n.js`. +7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list. +[](./img/add_locale_github.png) +8. Commit your changes like you did in step 5. + +## Adding to an Existing Translation + +Follow these steps to add to an existing translation. You will also need a GitHub account to do this: +1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. +2. Go to the `src` folder, then `locales`, then `en.json`. +3. Find the line with the string that you want to translate. +4. Find your translation's file, at `src/locales/xx.json`. +5. Add the line from step 3 to the file, in between the `{}` braces. Make sure the previous line has a comma at the end. +6. Use the pencil icon on the top-right to edit the file. Translate the string on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the strings on the left!** +7. Repeat steps 3-6 for every string you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased). +8. Scroll down and use the green button to commit the file. -- cgit v1.2.3 From 7f49e33feeec4952b3423373638db3eb81a7b3a1 Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Mon, 8 Aug 2022 14:43:22 -0500 Subject: second draft of i18n instructions --- README.md | 23 ++++++++++++----------- src/lib/i18n.js | 2 +- 2 files changed, 13 insertions(+), 12 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 6e8a36ec..052da5a5 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ Each translation of CoinOS is stored in a special *locale file*. These files ca } ``` -Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that string. **Both the text name and translated text must be inside quotation marks (`"`).** +Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that piece of text. **Both the text name and translated text must be inside quotation marks (`"`).** ### The Language List @@ -42,7 +42,7 @@ At the top of the file `src/lib/i18n.js`, there is a list of translations that l ```js // The list of locales to look for -// ADD ALL NEW LOCALES TO THIS LIST +// ADD ALL NEW LANGUAGE CODES TO THIS LIST const localeCodes = ["en", "fr"]; ``` @@ -53,14 +53,14 @@ In order for a translation to be recognized by the CoinOS system, you need to ad Follow these steps to create a new translation. You will need a GitHub account to do this: 1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. 2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub. -[](./img/create_locale_github.png) +![Creating a new translation in GitHub](./img/create_locale_github.png) 3. Copy the text from `en.json` into this new file. -4. Translate all of the strings on the right. **Do not translate or alter in any way the strings on the left!** -[](./img/translate_github.png) +4. Translate all of the pieces of text on the right. **Do not translate or alter in any way the pieces of text on the left!** +![Translating in GitHub](./img/translate_github.png) 5. Scroll down and use the green button to commit the file. 6. Go to the `src` folder again, then `lib`, then `i18n.js`. 7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list. -[](./img/add_locale_github.png) +![Adding a new translation in GitHub](./img/add_locale_github.png) 8. Commit your changes like you did in step 5. ## Adding to an Existing Translation @@ -68,9 +68,10 @@ Follow these steps to create a new translation. You will need a GitHub account Follow these steps to add to an existing translation. You will also need a GitHub account to do this: 1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. 2. Go to the `src` folder, then `locales`, then `en.json`. -3. Find the line with the string that you want to translate. +3. Find the line with the piece of text that you want to translate. 4. Find your translation's file, at `src/locales/xx.json`. -5. Add the line from step 3 to the file, in between the `{}` braces. Make sure the previous line has a comma at the end. -6. Use the pencil icon on the top-right to edit the file. Translate the string on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the strings on the left!** -7. Repeat steps 3-6 for every string you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased). -8. Scroll down and use the green button to commit the file. +5. Use the pencil icon on the top-right to edit the file. +6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces. Make sure the previous line has a comma at the end. +7. Translate the piece of text on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the piece of text on the left!** +8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased). +9. Scroll down and use the green button to commit the file. diff --git a/src/lib/i18n.js b/src/lib/i18n.js index bf8ed173..44d06287 100644 --- a/src/lib/i18n.js +++ b/src/lib/i18n.js @@ -1,7 +1,7 @@ import { register, init, getLocaleFromNavigator } from 'svelte-i18n'; // The list of locales to look for -// ADD ALL NEW LOCALES TO THIS LIST +// ADD ALL NEW LANGUAGE CODES TO THIS LIST const localeCodes = ["en", "fr"]; // the default locale to use if none was found -- cgit v1.2.3 From 2c10b8f1109b5636fc2266e6088f3eccc86923b1 Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Mon, 8 Aug 2022 14:59:56 -0500 Subject: move i18n instructions to separate file --- README.md | 66 ++------------------------------------- doc/i18n.md | 65 ++++++++++++++++++++++++++++++++++++++ doc/img/add_locale_github.png | Bin 0 -> 99036 bytes doc/img/create_locale_github.png | Bin 0 -> 64118 bytes doc/img/translate_github.png | Bin 0 -> 78506 bytes img/add_locale_github.png | Bin 99036 -> 0 bytes img/create_locale_github.png | Bin 64118 -> 0 bytes img/translate_github.png | Bin 78506 -> 0 bytes 8 files changed, 67 insertions(+), 64 deletions(-) create mode 100644 doc/i18n.md create mode 100644 doc/img/add_locale_github.png create mode 100644 doc/img/create_locale_github.png create mode 100644 doc/img/translate_github.png delete mode 100644 img/add_locale_github.png delete mode 100644 img/create_locale_github.png delete mode 100644 img/translate_github.png (limited to 'README.md') diff --git a/README.md b/README.md index 052da5a5..584f48ee 100644 --- a/README.md +++ b/README.md @@ -10,68 +10,6 @@ this repository is the front-end code for the coinos web application, it uses `s to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get your dev environment setup, and `pnpm format` to format the codebase when making changes. -# Internationalization +## Internationalization -CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: - -## Required Background Knowledge - -### Language Codes - -Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language. - -### Locale Files - -Each translation of CoinOS is stored in a special *locale file*. These files can be found in the `src/locales` folder in the CoinOS directory. The name of these files is the language code plus "`.json`". A file might look something like this: - -```JSON -{ - "howItWorks": "How It Works", - "faq": "FAQ", - "about": "About", - "startInSeconds": "Start in Seconds", - "signIn": "Sign In" -} -``` - -Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that piece of text. **Both the text name and translated text must be inside quotation marks (`"`).** - -### The Language List - -At the top of the file `src/lib/i18n.js`, there is a list of translations that looks something like this: - -```js -// The list of locales to look for -// ADD ALL NEW LANGUAGE CODES TO THIS LIST -const localeCodes = ["en", "fr"]; -``` - -In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks. - -## Creating a New Translation - -Follow these steps to create a new translation. You will need a GitHub account to do this: -1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. -2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub. -![Creating a new translation in GitHub](./img/create_locale_github.png) -3. Copy the text from `en.json` into this new file. -4. Translate all of the pieces of text on the right. **Do not translate or alter in any way the pieces of text on the left!** -![Translating in GitHub](./img/translate_github.png) -5. Scroll down and use the green button to commit the file. -6. Go to the `src` folder again, then `lib`, then `i18n.js`. -7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list. -![Adding a new translation in GitHub](./img/add_locale_github.png) -8. Commit your changes like you did in step 5. - -## Adding to an Existing Translation - -Follow these steps to add to an existing translation. You will also need a GitHub account to do this: -1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. -2. Go to the `src` folder, then `locales`, then `en.json`. -3. Find the line with the piece of text that you want to translate. -4. Find your translation's file, at `src/locales/xx.json`. -5. Use the pencil icon on the top-right to edit the file. -6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces. Make sure the previous line has a comma at the end. -7. Translate the piece of text on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the piece of text on the left!** -8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased). -9. Scroll down and use the green button to commit the file. +CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more info, click (here)[./doc/i18n.md]. diff --git a/doc/i18n.md b/doc/i18n.md new file mode 100644 index 00000000..3f7252b1 --- /dev/null +++ b/doc/i18n.md @@ -0,0 +1,65 @@ +CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: + +*NOTE: This guide was written for people without a technical background.* + +## Required Background Knowledge + +### Language Codes + +Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language. + +### Locale Files + +Each translation of CoinOS is stored in a special *locale file*. These files can be found in the `src/locales` folder in the CoinOS directory. The name of these files is the language code plus "`.json`". A file might look something like this: + +```JSON +{ + "howItWorks": "How It Works", + "faq": "FAQ", + "about": "About", + "startInSeconds": "Start in Seconds", + "signIn": "Sign In" +} +``` + +Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that piece of text. **Both the text name and translated text must be inside quotation marks (`"`).** + +### The Language List + +At the top of the file `src/lib/i18n.js`, there is a list of translations that looks something like this: + +```js +// The list of locales to look for +// ADD ALL NEW LANGUAGE CODES TO THIS LIST +const localeCodes = ["en", "fr"]; +``` + +In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks. + +## Creating a New Translation + +Follow these steps to create a new translation. You will need a GitHub account to do this: +1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. +2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub. +![Creating a new translation in GitHub](./img/create_locale_github.png) +3. Copy the text from `en.json` into this new file. +4. Translate all of the pieces of text on the right. **Do not translate or alter in any way the pieces of text on the left!** +![Translating in GitHub](./img/translate_github.png) +5. Scroll down and use the green button to commit the file. +6. Go to the `src` folder again, then `lib`, then `i18n.js`. +7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list. +![Adding a new translation in GitHub](./img/add_locale_github.png) +8. Commit your changes like you did in step 5. + +## Adding to an Existing Translation + +Follow these steps to add to an existing translation. You will also need a GitHub account to do this: +1. Determine the langage code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. +2. Go to the `src` folder, then `locales`, then `en.json`. +3. Find the line with the piece of text that you want to translate. +4. Find your translation's file, at `src/locales/xx.json`. +5. Use the pencil icon on the top-right to edit the file. +6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces. Make sure the previous line has a comma at the end. +7. Translate the piece of text on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the piece of text on the left!** +8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased). +9. Scroll down and use the green button to commit the file. diff --git a/doc/img/add_locale_github.png b/doc/img/add_locale_github.png new file mode 100644 index 00000000..1a75b223 Binary files /dev/null and b/doc/img/add_locale_github.png differ diff --git a/doc/img/create_locale_github.png b/doc/img/create_locale_github.png new file mode 100644 index 00000000..538124da Binary files /dev/null and b/doc/img/create_locale_github.png differ diff --git a/doc/img/translate_github.png b/doc/img/translate_github.png new file mode 100644 index 00000000..22e33174 Binary files /dev/null and b/doc/img/translate_github.png differ diff --git a/img/add_locale_github.png b/img/add_locale_github.png deleted file mode 100644 index 1a75b223..00000000 Binary files a/img/add_locale_github.png and /dev/null differ diff --git a/img/create_locale_github.png b/img/create_locale_github.png deleted file mode 100644 index 538124da..00000000 Binary files a/img/create_locale_github.png and /dev/null differ diff --git a/img/translate_github.png b/img/translate_github.png deleted file mode 100644 index 22e33174..00000000 Binary files a/img/translate_github.png and /dev/null differ -- cgit v1.2.3 From 1ea3325d58d8b1e8db801f0101090420c8e668ca Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Mon, 8 Aug 2022 15:00:54 -0500 Subject: fix link from prevous commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index 584f48ee..d653f9d9 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get ## Internationalization -CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more info, click (here)[./doc/i18n.md]. +CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more info, click [here](./doc/i18n.md). -- cgit v1.2.3 From 62cfc2f3fe11047085c39fd460647357bcaaf127 Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Mon, 8 Aug 2022 15:06:21 -0500 Subject: minor text tweaks --- README.md | 2 +- doc/i18n.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'README.md') diff --git a/README.md b/README.md index d653f9d9..ff746922 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get ## Internationalization -CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more info, click [here](./doc/i18n.md). +CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). diff --git a/doc/i18n.md b/doc/i18n.md index 3f7252b1..b8727524 100644 --- a/doc/i18n.md +++ b/doc/i18n.md @@ -1,3 +1,5 @@ +# CoinOS Internationalization + CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: *NOTE: This guide was written for people without a technical background.* -- cgit v1.2.3 From b156efdf1f0647dc296c4237cf8eb12d8c4d0503 Mon Sep 17 00:00:00 2001 From: Adrien Hopkins Date: Mon, 8 Aug 2022 15:55:46 -0500 Subject: tweaked locale selection & added i18n technical documentation --- README.md | 2 +- doc/i18n-technical.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++ doc/i18n.md | 2 +- src/lib/i18n.js | 2 +- 4 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 doc/i18n-technical.md (limited to 'README.md') diff --git a/README.md b/README.md index ff746922..738b0a81 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get ## Internationalization -CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). +CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md). diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md new file mode 100644 index 00000000..ea28627e --- /dev/null +++ b/doc/i18n-technical.md @@ -0,0 +1,46 @@ +# CoinOS Internationalization - Technical Information + +*NOTE: This documentation was written for people with a technical background. If you do not have a technical background, consider reading [this guide](./i18n.md) instead.* + +Last Updated: 2022-08-08 + +## Dependencies + +CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this. + +## Internationalization Code + +The main code for CoinOS's internationalization is at `src/lib/i18n.js`. When imported, it does the following: +1. Load all of the locales [asynchronously](https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md#32-asynchronous). +2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`. Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale. +3. Initialize `svelte-i18n`. + +It also defines important constants, including the list of available locales and the default locale. This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`. + +## Locale Files + +Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its name is the locale's [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) plus `.json`. It is simply a file that maps string IDs to translated strings. Here is an example of `en.json`: + +```json +{ + "howItWorks": "How It Works", + "faq": "FAQ", + "about": "About", + "startInSeconds": "Start in Seconds", + "signIn": "Sign In" +} +``` + +## Internationalizing Strings + +Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function. A localized string looks like this: + +``` +{$_('stringID')} +``` + +(`$_` is a convenient alias for `$format`.) + +## The Locale Selector + +CoinOS also has a `LocaleSelector` component, which should be used to select locales. It is a dropdown that allows you to select & update the locale. diff --git a/doc/i18n.md b/doc/i18n.md index b8727524..b1cbd78e 100644 --- a/doc/i18n.md +++ b/doc/i18n.md @@ -2,7 +2,7 @@ CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: -*NOTE: This guide was written for people without a technical background.* +*NOTE: This guide was written for people without a technical background. If you want more technical details, click [here](./i18n-technical.md)* ## Required Background Knowledge diff --git a/src/lib/i18n.js b/src/lib/i18n.js index 44d06287..fdf5de3c 100644 --- a/src/lib/i18n.js +++ b/src/lib/i18n.js @@ -35,7 +35,7 @@ function pickLocale(navigatorLocale, availableLocales) { } else if (availableLocales.includes(languageCode)) { return languageCode; } else { - return null; + return navigatorLocale; } } -- cgit v1.2.3 From c26e004f4a05f231242587c1265a620b7fcd873a Mon Sep 17 00:00:00 2001 From: secondl1ght <85003930+secondl1ght@users.noreply.github.com> Date: Tue, 16 Aug 2022 10:59:19 -0600 Subject: run format --- README.md | 2 +- doc/i18n-technical.md | 27 ++++++++--------- doc/i18n.md | 36 ++++++++++++----------- src/components/LandingHeader.svelte | 29 +++++++++--------- src/components/LocaleSelector.svelte | 12 ++++---- src/lib/i18n.js | 55 +++++++++++++++++------------------ src/locales/en.json | 17 +++++------ src/locales/fr.json | 17 +++++------ src/routes/[username]/settings.svelte | 8 ++--- src/routes/__layout.svelte | 12 ++++---- 10 files changed, 106 insertions(+), 109 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 738b0a81..f86424f0 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,4 @@ to get started clone the repo and run `pnpm install`, then `pnpm run dev` to get ## Internationalization -CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md). +CoinOS has a system for translation using [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). For more information and instructions on how to translate CoinOS, click [here](./doc/i18n.md). For technical details, click [here](./doc/i18n-technical.md). diff --git a/doc/i18n-technical.md b/doc/i18n-technical.md index ea28627e..6c45ee01 100644 --- a/doc/i18n-technical.md +++ b/doc/i18n-technical.md @@ -1,39 +1,40 @@ # CoinOS Internationalization - Technical Information -*NOTE: This documentation was written for people with a technical background. If you do not have a technical background, consider reading [this guide](./i18n.md) instead.* +_NOTE: This documentation was written for people with a technical background. If you do not have a technical background, consider reading [this guide](./i18n.md) instead._ Last Updated: 2022-08-08 ## Dependencies -CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this. +CoinOS's internationalization system depends on the `npm` package [`svelte-i18n`](https://www.npmjs.com/package/svelte-i18n). Consider reading [its documentation](https://github.com/kaisermann/svelte-i18n/blob/HEAD/docs/Getting%20Started.md) in addition to this. ## Internationalization Code -The main code for CoinOS's internationalization is at `src/lib/i18n.js`. When imported, it does the following: +The main code for CoinOS's internationalization is at `src/lib/i18n.js`. When imported, it does the following: + 1. Load all of the locales [asynchronously](https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md#32-asynchronous). -2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`. Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale. +2. Pick a locale intelligently, depending on the available locales and the navigator locale, using `pickLocale`. Specifically, if the user's locale (e.g. `en-US`) isn't available but its non-regional version (e.g. `en`) is, the system will use the non-regional locale. 3. Initialize `svelte-i18n`. -It also defines important constants, including the list of available locales and the default locale. This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`. +It also defines important constants, including the list of available locales and the default locale. This code is loaded by importing `$lib/i18n` in `src/routes/__layout.svelte`. ## Locale Files -Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its name is the locale's [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) plus `.json`. It is simply a file that maps string IDs to translated strings. Here is an example of `en.json`: +Each locale in `coinos-ui-v2` is defined by a JSON file in `src/locales`. Its name is the locale's [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) plus `.json`. It is simply a file that maps string IDs to translated strings. Here is an example of `en.json`: ```json { - "howItWorks": "How It Works", - "faq": "FAQ", - "about": "About", - "startInSeconds": "Start in Seconds", - "signIn": "Sign In" + "howItWorks": "How It Works", + "faq": "FAQ", + "about": "About", + "startInSeconds": "Start in Seconds", + "signIn": "Sign In" } ``` ## Internationalizing Strings -Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function. A localized string looks like this: +Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https://github.com/kaisermann/svelte-i18n/blob/96a5adab7560249c8881e0612454e01c09273400/docs/Formatting.md) function. A localized string looks like this: ``` {$_('stringID')} @@ -43,4 +44,4 @@ Strings are internationalized by simply using `svelte-i18n`'s [`$format`](https: ## The Locale Selector -CoinOS also has a `LocaleSelector` component, which should be used to select locales. It is a dropdown that allows you to select & update the locale. +CoinOS also has a `LocaleSelector` component, which should be used to select locales. It is a dropdown that allows you to select & update the locale. diff --git a/doc/i18n.md b/doc/i18n.md index e1ed304a..d6f2b4ff 100644 --- a/doc/i18n.md +++ b/doc/i18n.md @@ -1,18 +1,18 @@ # CoinOS Internationalization -CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: +CoinOS can be translated into other languages by editing JSON files. You do not need programming knowledge to do this, or to use these instructions. Here are instructions on how to internationalize CoinOS: -*NOTE: This guide was written for people without a technical background. If you want more technical details, click [here](./i18n-technical.md).* +_NOTE: This guide was written for people without a technical background. If you want more technical details, click [here](./i18n-technical.md)._ ## Required Background Knowledge ### Language Codes -Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language. +Before you can translate CoinOS, you need to know the [ISO 639-1 code](https://en.wikipedia.org/wiki/ISO_639-1) of your language. This is a standard two-letter code that your browser uses to refer to a language (for example, English is `en`, and French is `fr`). You can also add a dash and more letters to refer to a specific region (for example, American English is `en-US`, and British English is `en-GB`). A list of all codes can be found [here](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes), and Firefox-based browsers show you the code when you are selecting your browser's language. ### Locale Files -Each translation of CoinOS is stored in a special *locale file*. These files can be found in the `src/locales` folder in the CoinOS directory. The name of these files is the language code plus "`.json`". A file might look something like this: +Each translation of CoinOS is stored in a special _locale file_. These files can be found in the `src/locales` folder in the CoinOS directory. The name of these files is the language code plus "`.json`". A file might look something like this: ```JSON { @@ -24,7 +24,7 @@ Each translation of CoinOS is stored in a special *locale file*. These files ca } ``` -Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that piece of text. **Both the text name and translated text must be inside quotation marks (`"`).** +Each line (other than the opening and closing braces) contains a **text name**, then a colon (`:`), then the **translated text**. All lines other than the last end in a comma. The text name is a word that is the same in all translations, and is used by the code to access that piece of text. **Both the text name and translated text must be inside quotation marks (`"`).** ### The Language List @@ -33,35 +33,37 @@ At the top of the file `src/lib/i18n.js`, there is a list of translations that l ```js // The list of locales to look for // ADD ALL NEW LANGUAGE CODES TO THIS LIST -const localeCodes = ["en", "fr"]; +const localeCodes = ['en', 'fr']; ``` -In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks. +In order for a translation to be recognized by the CoinOS system, you need to add it to this list. At the end of the list, before the second square bracket, add a comma, then a space, then the language code in quotation marks. ## Creating a New Translation -Follow these steps to create a new translation. You will need a GitHub account to do this: -1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. +Follow these steps to create a new translation. You will need a GitHub account to do this: + +1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. 2. Go to the `src` folder, then the `locales` folder, then create a file `xx.json` inside that folder using either a text editor (e.g. Notepad), or GitHub. -![Creating a new translation in GitHub](./img/create_locale_github.png) + ![Creating a new translation in GitHub](./img/create_locale_github.png) 3. Copy the text from `en.json` into this new file. -4. Translate all of the pieces of text on the right. **Do not translate or alter in any way the pieces of text on the left!** -![Translating in GitHub](./img/translate_github.png) +4. Translate all of the pieces of text on the right. **Do not translate or alter in any way the pieces of text on the left!** + ![Translating in GitHub](./img/translate_github.png) 5. Scroll down and use the green button to commit the file. 6. Go to the `src` folder again, then `lib`, then `i18n.js`. 7. Use the pencil icon on the top-right to edit the file, then add your language code (**in quotation marks**) to the list. -![Adding a new translation in GitHub](./img/add_locale_github.png) + ![Adding a new translation in GitHub](./img/add_locale_github.png) 8. Commit your changes like you did in step 5. ## Adding to an Existing Translation -Follow these steps to add to an existing translation. You will also need a GitHub account to do this: -1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. +Follow these steps to add to an existing translation. You will also need a GitHub account to do this: + +1. Determine the language code of your language, using [this list](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). For these instructions, I will be using the fictional code `xx` - replace that code with the code of whatever language you are translating to. 2. Go to the `src` folder, then `locales`, then `en.json`. 3. Find the line with the piece of text that you want to translate. 4. Find your translation's file, at `src/locales/xx.json`. 5. Use the pencil icon on the top-right to edit the file. -6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces. Make sure the previous line has a comma at the end. -7. Translate the piece of text on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the piece of text on the left!** +6. Add the whole line (both left and right parts) from step 3 to this file, in between the `{}` braces. Make sure the previous line has a comma at the end. +7. Translate the piece of text on the right, keeping the quotes surrounding it. **Do not translate or alter in any way the piece of text on the left!** 8. Repeat steps 3-7 for every piece of text you want to translate (you should probably open `en.json` in another tab, so that your changes from step 6 aren't erased). 9. Scroll down and use the green button to commit the file. diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index 544e2a9d..b6519ca9 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -3,7 +3,7 @@ import { scroll } from '$lib/utils'; import { Icon, LocaleSelector } from '$comp'; import { user } from '$lib/store'; - import { _ } from 'svelte-i18n'; + import { _ } from 'svelte-i18n'; export let howItWorks; export let faq; @@ -18,17 +18,15 @@
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte index 3f173109..2ae65986 100644 --- a/src/components/LocaleSelector.svelte +++ b/src/components/LocaleSelector.svelte @@ -1,10 +1,10 @@ - + {#each $locales as locale} + + {/each} diff --git a/src/lib/i18n.js b/src/lib/i18n.js index fdf5de3c..3105c709 100644 --- a/src/lib/i18n.js +++ b/src/lib/i18n.js @@ -2,41 +2,40 @@ import { register, init, getLocaleFromNavigator } from 'svelte-i18n'; // The list of locales to look for // ADD ALL NEW LANGUAGE CODES TO THIS LIST -const localeCodes = ["en", "fr"]; +const localeCodes = ['en', 'fr']; // the default locale to use if none was found -const defaultLocale = "en"; +const defaultLocale = 'en'; // Adds a new locale based on its code function addLocale(localeCode) { - register(localeCode, () => import(`../locales/${localeCode}.json`)); + register(localeCode, () => import(`../locales/${localeCode}.json`)); } // Picks the default locale based on navigator locale and the list of available locales function pickLocale(navigatorLocale, availableLocales) { - // locale can be null the first time you load this - // return the default locale in that case - reloading should fix this - if (!navigatorLocale) - return defaultLocale; - - // determine langugage part of locale - // (e.g. if navigatorLocale is 'en-US', languageCode is 'en') - let dashIndex = navigatorLocale ? navigatorLocale.indexOf("-") : -1; - let languageCode; // navigator locale without the regional part - if (dashIndex === -1) { - languageCode = navigatorLocale; - } else { - languageCode = navigatorLocale.slice(0, dashIndex); - } - - // get locale - if (availableLocales.includes(navigatorLocale)) { - return navigatorLocale; - } else if (availableLocales.includes(languageCode)) { - return languageCode; - } else { - return navigatorLocale; - } + // locale can be null the first time you load this + // return the default locale in that case - reloading should fix this + if (!navigatorLocale) return defaultLocale; + + // determine langugage part of locale + // (e.g. if navigatorLocale is 'en-US', languageCode is 'en') + let dashIndex = navigatorLocale ? navigatorLocale.indexOf('-') : -1; + let languageCode; // navigator locale without the regional part + if (dashIndex === -1) { + languageCode = navigatorLocale; + } else { + languageCode = navigatorLocale.slice(0, dashIndex); + } + + // get locale + if (availableLocales.includes(navigatorLocale)) { + return navigatorLocale; + } else if (availableLocales.includes(languageCode)) { + return languageCode; + } else { + return navigatorLocale; + } } // add locales @@ -44,6 +43,6 @@ localeCodes.forEach(addLocale); let initialLocale = pickLocale(getLocaleFromNavigator(), localeCodes); init({ - fallbackLocale: defaultLocale, - initialLocale: initialLocale, + fallbackLocale: defaultLocale, + initialLocale: initialLocale }); diff --git a/src/locales/en.json b/src/locales/en.json index c5c36c4b..a44c202f 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,11 +1,10 @@ { - "langname": "English", - "nav": { - "howItWorks": "How It Works", - "faq": "FAQ", - "about": "About", - "startInSeconds": "Start in Seconds", - "signIn": "Sign In" -} - + "langname": "English", + "nav": { + "howItWorks": "How It Works", + "faq": "FAQ", + "about": "About", + "startInSeconds": "Start in Seconds", + "signIn": "Sign In" + } } diff --git a/src/locales/fr.json b/src/locales/fr.json index d2c9d758..9adc9488 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -1,11 +1,10 @@ { - "langname": "Français", -"nav": { - "howItWorks": "Comment Ça Fonctionne", - "faq": "FAQ", - "about": "À Propos", - "startInSeconds": "Commence en Secondes", - "signIn": "Connexion" -} - + "langname": "Français", + "nav": { + "howItWorks": "Comment Ça Fonctionne", + "faq": "FAQ", + "about": "À Propos", + "startInSeconds": "Commence en Secondes", + "signIn": "Connexion" + } } diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte index 11e0977a..e4d7b0bf 100644 --- a/src/routes/[username]/settings.svelte +++ b/src/routes/[username]/settings.svelte @@ -44,10 +44,10 @@ {#if setting === 'account'} -
- - -
+
+ + +
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index c5234c7d..5f9f1456 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -1,16 +1,16 @@