Merge pull request coollabsio#721 from gabrielengel/g-i18n

Starting translations work

README.md

@@ -77,6 +77,7 @@ Deploy your resource to:
 <a href="https://redis.io"><svg style="width:40px;height:40px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><defs ><path id="a" d="m45.536 38.764c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276c-1-.478-1.524-.88-1.524-1.26v-3.813s14.447-3.145 16.78-3.982 3.14-.867 5.126-.14 13.853 2.868 15.814 3.587v3.76c0 .377-.452.8-1.477 1.324z" /><path id="b" d="m45.536 28.733c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276-2.04-1.613-.077-2.382l15.332-5.935c2.332-.837 3.14-.867 5.126-.14s12.35 4.853 14.312 5.57 2.037 1.31.024 2.36z" /></defs ><g transform="matrix(.848327 0 0 .848327 -7.883573 -9.449691)" ><use fill="#a41e11" xlink:href="#a" /><path d="m45.536 34.95c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276-2.04-1.613-.077-2.382l15.332-5.936c2.332-.836 3.14-.867 5.126-.14s12.35 4.852 14.31 5.582 2.037 1.31.024 2.36z" fill="#d82c20" /><use fill="#a41e11" xlink:href="#a" y="-6.218" /><use fill="#d82c20" xlink:href="#b" /><path d="m45.536 26.098c-2.013 1.05-12.44 5.337-14.66 6.495s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276c-1-.478-1.524-.88-1.524-1.26v-3.815s14.447-3.145 16.78-3.982 3.14-.867 5.126-.14 13.853 2.868 15.814 3.587v3.76c0 .377-.452.8-1.477 1.324z" fill="#a41e11" /><use fill="#d82c20" xlink:href="#b" y="-6.449" /><g fill="#fff" ><path d="m29.096 20.712-1.182-1.965-3.774-.34 2.816-1.016-.845-1.56 2.636 1.03 2.486-.814-.672 1.612 2.534.95-3.268.34zm-6.296 3.912 8.74-1.342-2.64 3.872z" /><ellipse cx="20.444" cy="21.402" rx="4.672" ry="1.811" /></g ><path d="m42.132 21.138-5.17 2.042-.004-4.087z" fill="#7a0c00" /><path d="m36.963 23.18-.56.22-5.166-2.042 5.723-2.264z" fill="#ad2115" /></g ></svg ></a>
 
 ### Services
+
 - [Appwrite](https://appwrite.io)
 - [WordPress](https://docs.coollabs.io/coolify/services/wordpress)
 - [Ghost](https://ghost.org)
@@ -103,11 +104,29 @@ Deploy your resource to:
 - Email: [[email protected]](mailto:[email protected])
 - Discord: [Invitation](https://coollabs.io/discord)
 
-## Development Contributions
+---
+
+## ⚗️ Expertise Contributions
+
+Coolify is developed under the [Apache License](./LICENSE) and you can help to make it grow.
+Our community will be glad to have you on board!
+
+Learn how to contribute to Coolify as as ...
+
+&rarr; [👩🏾‍💻 Software developer](./CONTRIBUTION.md)
+
+&rarr; [🧑🏻‍🏫 Translator](./docs/contribution/Translating.md)
+
+<!-- 
+&rarr; 🧑🏽‍🎨 Designer
+&rarr; 🙋‍♀️ Community Managemer
+&rarr; 🧙🏻‍♂️ Text Content Creator
+&rarr; 👨🏼‍🎤 Video Content Creator
+-->
 
-Coolify is developed under the Apache License and you can help to make it grow &rarr; [Start coding!](./CONTRIBUTION.md)
+---
 
-## Financial Contributors
+## 💰 Financial Contributors
 
 Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/coollabsio/contribute)]
 

apps/ui/src/lib/components/LocalePicker.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { locale, locales } from '$lib/translations';
+</script>
+
+<div >
+  <select bind:value={$locale} class="w-14">
+    {#each $locales as l}
+      <option value={l}>{l}</option>
+    {/each}
+  </select>
+</div>

apps/ui/src/lib/lang.json

@@ -1,4 +1,7 @@
 {
 	"fr": "Français",
+	"pt": "Português",
+	"es": "Espanhol",
+	"ko": "Korean",
 	"en": "English"
 }

apps/ui/src/lib/translations.ts

@@ -1,11 +1,18 @@
 import i18n from 'sveltekit-i18n';
+import { derived, writable } from "svelte/store";
 import lang from './lang.json';
 
+export let currentLocale = writable("en");
+export let debugTranslation = writable(false);
+
 /** @type {import('sveltekit-i18n').Config} */
 export const config = {
 	fallbackLocale: 'en',
 	translations: {
 		en: { lang },
+		es: { lang },
+		pt: { lang },
+		ko: { lang },
 		fr: { lang }
 	},
 	loaders: [
@@ -14,12 +21,27 @@ export const config = {
 			key: '',
 			loader: async () => (await import('./locales/en.json')).default
 		},
+		{
+			locale: 'es',
+			key: '',
+			loader: async () => (await import('./locales/es.json')).default
+		},
+		{
+			locale: 'pt',
+			key: '',
+			loader: async () => (await import('./locales/pt.json')).default
+		},
 		{
 			locale: 'fr',
 			key: '',
 			loader: async () => (await import('./locales/fr.json')).default
+		},
+		{
+			locale: 'ko',
+			key: '',
+			loader: async () => (await import('./locales/ko.json')).default
 		}
 	]
 };
 
-export const { t, locales, locale, loadTranslations } = new i18n(config);
+export const { t, locales, locale, loadTranslations } = new i18n(config);

apps/ui/src/routes/__layout.svelte

@@ -95,6 +95,7 @@
 	import Toasts from '$lib/components/Toasts.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import { onMount } from 'svelte';
+	import LocalePicker from '$lib/components/LocalePicker.svelte';
 
 	if (userId) $appSession.userId = userId;
 	if (teamId) $appSession.teamId = teamId;
@@ -292,6 +293,9 @@
 								<path d="M7 12h14l-3 -3m0 6l3 -3" />
 							</svg>
 						</div>
+						<div class="lg:block">
+							<LocalePicker/>
+						</div>
 						<div
 							class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
 						>
@@ -311,19 +315,22 @@
 			{/if}
 		{/if}
 		<div
-			class="navbar lg:hidden space-x-2 flex flex-row items-center bg-coollabs"
+			class="navbar lg:hidden space-x-2 flex flex-row justify-between bg-coollabs"
 			class:hidden={!$appSession.userId}
 		>
-			<label for="main-drawer" class="drawer-button btn btn-square btn-ghost flex-col">
-				<span class="burger bg-white" />
-				<span class="burger bg-white" />
-				<span class="burger bg-white" />
-			</label>
-			<div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3">
-				{#if !$appSession.whiteLabeled}
-					<h3 class="mb-0 text-white">Coolify</h3>
-				{/if}
+			<div>
+				<label for="main-drawer" class="drawer-button btn btn-square btn-ghost flex-col">
+					<span class="burger bg-white" />
+					<span class="burger bg-white" />
+					<span class="burger bg-white" />
+				</label>
+				<div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3">
+					{#if !$appSession.whiteLabeled}
+						<h3 class="mb-0 text-white">Coolify</h3>
+					{/if}
+				</div>
 			</div>
+			<LocalePicker/>	
 		</div>
 		<main>
 			<div class={$appSession.userId ? 'lg:pl-16' : null}>

docs/contribution/Translating.md

@@ -0,0 +1,61 @@
+## Helping with Translations
+
+All interface translations can be found inside the folder:
+
+📁 `apps/ui/src/lib/locales`
+
+> The base and fallback language is 🇬🇧 `en`.
+
+---
+
+## 🖐️ Manual First steps
+
+To start translating to a new language:
+
+1. create `apps/ui/src/lib/locales/jp.json` (change `jp` to chosen language)
+2. copy the contents from `apps/ui/src/lib/locales/en.json` to your new json.
+2. edit `apps/ui/src/lib/translations.ts`
+* 2.1. add `jp: { lang },` inside `translations:`
+* 2.2. duplicate the full `en` locale hash inside `loaders:`, change `en` to `jp`(chosen locale)
+
+Congratulations! You are now ready to start translating
+
+## 🤖 Automated First Steps
+
+We can ease the translation using [MoloLab Json Translator](https://github.com/mololab/json-translator):
+
+```sh
+# Install Json Tranlator
+npm i -g @parvineyvazov/json-translator
+# Run this command to create a new translation:
+jsontt apps/ui/src/lib/locales/en.json
+
+# Example Result:
+jsontt apps/ui/src/lib/locales/en.json
+? From which source? #ArgosTranslate
+? From which language? #Automatic
+? To which language | languages? #Spanish
+✔ DONE! 287 of 287 translated.
+ All files are created! 
+ You can find them in the same folder as the original JSON file. 
+ For Spanish --> es.json created. 
+```
+
+## Currently supported locales
+
+- [x] en
+- [x] fr
+- [x] pt (autogenerated - needs review)
+- [x] es (autogenerated - needs review)
+- [x] ko (autogenerated - needs review)
+
+## ☑️ Todo:
+
+- [ ] Write a script to 
+  - sync missing keys from `en` to other locales;
+  - remove deprecated keys from all non `en` locales;
+
+- [ ] Sveltekit-i18n instructs to create one locale file per path, maybe we should review that soon.
+
+- [ ] Improve the aesthetics of `<LocalePicker/>`
+- [ ] Make selected locale persistent (in session or cookie)