Add i18n files and set first translations

README.md

@@ -23,3 +23,5 @@ Many additional details and a fully featured wiki will be created over time. Rea
 Qortal-Hub supports internationalization (i18n) using [i18next](https://www.i18next.com/), allowing seamless translation of UI text into multiple languages.
 The setup includes modularized translation files, language detection, context and runtime language switching.
 Files with translation are in `public/locales/<locale>` folder.
+
+See [guidelines](./docs/i18n_languages.md).

docs/i18n_languages.md

@@ -0,0 +1,10 @@
+# I18N Guidelines
+
+In JSON file:
+
+- Keep the file sorted
+- Always write in lowercase
+
+In GUI:
+
+- If the first letter of the translation must be uppercase, use the postProcess, for example: `{t_auth('advanced_users', { postProcess: 'capitalize' })}`

i18n.js

@@ -28,7 +28,7 @@ i18n
     debug: isDev,
     fallbackLng: 'en',
     ns: ['auth', 'core'],
-    supportedLngs: ['en', 'it', 'fr', 'es'],
+    supportedLngs: ['en', 'it'],
     backend: {
       backends: [LocalStorageBackend, HttpBackend],
       backendOptions: [

public/locales/en/auth.json

@@ -2,9 +2,12 @@
   "account_many": "accounts",
   "account_one": "account",
   "advanced_users": "for advanced users",
+  "build_version": "build version",
+  "change_apikey": "change APIkey",
+  "choose_custom_node": "choose custom node",
   "create_account": "create account",
-  "welcome": "Welcome to",
+  "import_key": "import APIkey",
   "use_local_node": "use local node",
-  "change_apikey": "change API key",
+  "using_node": "using node",
-  "choose_custom_node": "choose custom node"
+  "welcome": "welcome to"
 }

public/locales/en/core.json

@@ -1,9 +1,7 @@
 {
-  "add": {
+  "cancel": "cancel",
-    "task": "Add task"
+  "choose": "choose",
-  },
+  "description": "description",
-  "cancel": "Cancel",
+  "save": "save",
-  "description": "Description" ,
+  "title": "title"
-  "save": "Save",
-  "title": "Title"
 }

public/locales/it/auth.json

@@ -1,10 +1,13 @@
 {
   "account_many": "account",
   "account_one": "account",
-  "advanced_users": "Per utenti avanzati",
+  "advanced_users": "per utenti avanzati",
-  "change_apikey": "Cambia la chiave API",
+  "build_version": "versione build",
-  "choose_custom_node": "Scegli un nodo custom",
+  "change_apikey": "cambia la chiave API",
+  "choose_custom_node": "scegli un nodo custom",
   "create_account": "crea un account",
-  "use_local_node": "Usa nodo locale",
+  "import_key": "importa chiave API",
-  "welcome": "Benvenuto in"
+  "use_local_node": "usa nodo locale",
+  "using_node": "nodo in uso",
+  "welcome": "benvenuto in"
 }

public/locales/it/core.json

@@ -1,9 +1,7 @@
 {
-  "add": {
+  "cancel": "cancella",
-    "task": "Aggiungi compito"
+  "choose": "scegli",
-  },
+  "description": "descrizione",
-  "cancel": "Cancella",
+  "save": "salva",
-  "description": "Descrizione" ,
+  "title": "titolo"
-  "save": "Salva",
-  "title": "Titolo"
 }

src/ExtStates/NotAuthenticated.tsx

@@ -47,6 +47,7 @@ export const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
     fontSize: theme.typography.pxToRem(12),
   },
 }));
+
 function removeTrailingSlash(url) {
   return url.replace(/\/+$/, '');
 }
@@ -85,7 +86,7 @@ export const NotAuthenticated = ({
     React.useState(null);
   const { showTutorial, hasSeenGettingStarted } = useContext(GlobalContext);
   const theme = useTheme();
-  const { t } = useTranslation('auth');
+  const { t } = useTranslation(['auth', 'core']);
 
   const importedApiKeyRef = useRef(null);
   const currentNodeRef = useRef(null);
@@ -581,7 +582,8 @@ export const NotAuthenticated = ({
           visibility: !useLocalNode && 'hidden',
         }}
       >
-        {'Using node: '} {currentNode?.url}
+        {t('auth:using_node', { postProcess: 'capitalize' })}:{' '}
+        {currentNode?.url}
       </Typography>
 
       <>
@@ -693,7 +695,7 @@ export const NotAuthenticated = ({
               variant="contained"
               component="label"
             >
-              Choose custom node
+              {t('auth:choose_custom_node', { postProcess: 'capitalize' })}
             </Button>
           </>
           <Typography
@@ -702,7 +704,8 @@ export const NotAuthenticated = ({
               fontSize: '12px',
             }}
           >
-            Build version: {manifestData?.version}
+            {t('auth:build_version', { postProcess: 'capitalize' })}:
+            {manifestData?.version}
           </Typography>
         </Box>
       </>
@@ -788,7 +791,7 @@ export const NotAuthenticated = ({
                         }}
                         variant="contained"
                       >
-                        Choose
+                        {t('core:choose', { postProcess: 'capitalize' })}
                       </Button>
                     </Box>
                   </Box>