Translations - Revision history

2A02:C7C:C40C:2600:8C18:EA9F:289C:239D: /* Embedding translations into UI Modules */

2024-12-11T14:15:40Z

Embedding translations into UI Modules

← Older revision		Revision as of 14:15, 11 December 2024
Line 26:		Line 26:
	<Html>{`Hello <b>${username}</b>`}</Html>		<Html>{`Hello <b>${username}</b>`}</Html>
	</syntaxhighlight>		</syntaxhighlight>

			Importantly, avoid performing logic inside your template literals. This is because often times such logic doesn't actually translate to other languages anyway and you are effectively asking a translator to write code which they won't and can't do.

			<syntaxhighlight lang="js">
			// Don't do this! E.g. German translators would have to understand and edit the code itself.
			`Shoe${count > 1 ? `s` : ``}`

			// Instead, always do your logic outside the literal:
			count>1 ? `Shoes` : `Shoe`
			// Such that a German translator thus provides `Schuhe` and `Schuh`
			</syntaxhighlight>

			Socialstack has built in tools to collect all template literals in your code in order to get them in to e.g. a pot file for translation, as well as then importing them back in to the translation table whereby multiple versions of the .js file are built with the translations directly substituted in. This means all secondary languages obtain the same runtime performance as the primary language (the one that the code was written in).

	== Default translations for a module (only available when hosted locally/DEV) ==		== Default translations for a module (only available when hosted locally/DEV) ==

Luke: /* Embedding translations into UI Modules */

2023-01-24T20:28:15Z

Embedding translations into UI Modules

← Older revision		Revision as of 20:28, 24 January 2023
Line 21:		Line 21:
	If you would like to add HTML formatting in your text, it can also move around and should therefore just be entirely within your template literal too, like this:		If you would like to add HTML formatting in your text, it can also move around and should therefore just be entirely within your template literal too, like this:

	<syntaxhighlight lang="~~jsx~~">		<syntaxhighlight lang="js">
	import Html from 'UI/Html';		import Html from 'UI/Html';

Luke: /* Embedding translations into UI Modules */

2023-01-24T20:28:04Z

Embedding translations into UI Modules

← Older revision		Revision as of 20:28, 24 January 2023
Line 9:		Line 9:
	== Embedding translations into UI Modules ==		== Embedding translations into UI Modules ==

	To add some translatable text to a module it needs to be wrapped in `` quotes ~~so for example~~		To add some translatable text to a module it needs to be wrapped in `` quotes like this:

	<syntaxhighlight lang="js">		<syntaxhighlight lang="js">
	`~~Feed~~` or `${~~data~~} ~~Feed~~`		`Hello, world!`

			`Hello ${username}`
			</syntaxhighlight>

			It's important to use variables inside your [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals javascript template literals] rather than just joining the text together in a specific order because word order varies and sometimes quite a lot. That's even in locales of English for example - "July 19th" (American English) and "19th of July" (British English).

			If you would like to add HTML formatting in your text, it can also move around and should therefore just be entirely within your template literal too, like this:

			<syntaxhighlight lang="jsx">
			import Html from 'UI/Html';

			<Html>{`Hello <b>${username}</b>`}</Html>
	</syntaxhighlight>		</syntaxhighlight>
	~~where the data element would be injected at runtime.~~

	== Default translations for a module (only available when hosted locally/DEV) ==		== Default translations for a module (only available when hosted locally/DEV) ==

80.229.4.125 at 10:16, 7 November 2022

2022-11-07T10:16:34Z

← Older revision		Revision as of 10:16, 7 November 2022
Line 99:		Line 99:
	To perform the load, login as an admin user and run the following url		To perform the load, login as an admin user and run the following url
	<syntaxhighlight>		<syntaxhighlight>
	/v1/~~transation~~/potfiles		/v1/translation/potfiles
	</syntaxhighlight>		</syntaxhighlight>

80.229.4.125: /* Upload the po files via the admin UI */

2022-09-02T16:08:45Z

Upload the po files via the admin UI

← Older revision		Revision as of 16:08, 2 September 2022
Line 120:		Line 120:
	</syntaxhighlight>		</syntaxhighlight>

	Enter the name of the entity you are loading (this is a safety check)		Enter the name of the entity you are loading (this is a safety check) so for example '''translation''' or '''page'''

	Upload the po file		Upload the po file

80.229.4.125: /* Exporting po files for translation */

2022-09-02T16:06:55Z

Exporting po files for translation

← Older revision		Revision as of 16:06, 2 September 2022
Line 81:		Line 81:
	</syntaxhighlight>		</syntaxhighlight>

	So for example with the translation table it would be /v1/translation/list.pot		So for example with the translation table it would be '''/v1/translation/list.pot'''

	The output file can be opened in a suitable editor such as po edit which can be downloaded from https://poedit.net/		The output file can be opened in a suitable editor such as po edit which can be downloaded from https://poedit.net/

80.229.4.125: /* Auto generating translation table entries (only available when hosted locally/DEV) */

2022-09-02T16:06:08Z

Auto generating translation table entries (only available when hosted locally/DEV)

← Older revision		Revision as of 16:06, 2 September 2022
Line 68:		Line 68:
	</syntaxhighlight>		</syntaxhighlight>

	Any messages will be written to stdout		Any generated messages will be written to stdout

	== Exporting po files for translation ==		== Exporting po files for translation ==

80.229.4.125: /* Auto generating translation table entries (only available when hosted locally/DEV) */

2022-09-02T16:05:14Z

Auto generating translation table entries (only available when hosted locally/DEV)

← Older revision		Revision as of 16:05, 2 September 2022
Line 34:		Line 34:
	== Auto generating translation table entries (only available when hosted locally/DEV) ==		== Auto generating translation table entries (only available when hosted locally/DEV) ==

	You can use the translation service to auto generate translation values from the application modules, this will locate any translatable elements in the current applications UI modules and add entries into the database, if there are locale.xx.json files for the module then these can also be optionally imported.		You can use the translation service to auto generate translation values from the application modules, this will locate any translatable elements in the current applications UI modules and add entries into the database, if there are '''locale.xx.json''' files for the module then these can also be optionally imported.

	This is useful when you have a new project or have created lots of new modules and want to extract the elements for translation.		This is useful when you have a new project or have created lots of new modules and want to extract the elements for translation.

80.229.4.125: /* Auto generating translation table entries (only available when hosted locally/DEV) */

2022-09-02T16:04:51Z

Auto generating translation table entries (only available when hosted locally/DEV)

← Older revision		Revision as of 16:04, 2 September 2022
Line 59:		Line 59:
	</syntaxhighlight>		</syntaxhighlight>

	If AutoAddBaseLineTranslations is true then any locale.xx.json files will be processed and their values added into the translations table.		If '''AutoAddBaseLineTranslations''' is true then any '''locale.xx.json''' files will be processed and their values added into the translations table.

	if AutoAddTranslationElements is true then any translatable items found when parsing the UI modules will be added, you can add exclusions as above to ignore any backend modules for example.		if '''AutoAddTranslationElements''' is true then any translatable items found when parsing the UI modules will be added, you can add exclusions as above to ignore any backend modules for example.

	To perform the auto generation, login as an admin user and run the following url		To perform the auto generation, login as an admin user and run the following url

80.229.4.125: /* Auto generating translation table entries (only available when hosted locally/DEV) */

2022-09-02T16:03:56Z

Auto generating translation table entries (only available when hosted locally/DEV)

← Older revision		Revision as of 16:03, 2 September 2022
Line 35:		Line 35:

	You can use the translation service to auto generate translation values from the application modules, this will locate any translatable elements in the current applications UI modules and add entries into the database, if there are locale.xx.json files for the module then these can also be optionally imported.		You can use the translation service to auto generate translation values from the application modules, this will locate any translatable elements in the current applications UI modules and add entries into the database, if there are locale.xx.json files for the module then these can also be optionally imported.

			This is useful when you have a new project or have created lots of new modules and want to extract the elements for translation.

	First you need to update the translation service config as below		First you need to update the translation service config as below