feat: weblate backend

.env.sample

@@ -21,4 +21,9 @@ CSRF_WHITELIST_HEADER_FOR_LOCAL_DEVELOPMENT=X-WHITELIST-HEADER
 #AUDIO_FILE_INCOMING_NOTIFICATION=/assets/audio/incomingNotification.mp3
 
 # Disable 2FA
-REACT_APP_DISABLE_2FA_DUTY=0
+REACT_APP_DISABLE_2FA_DUTY=0
+
+# Weblate
+REACT_APP_WEBLATE_URL=https://app.onlineberatung.live/
+REACT_APP_WEBLATE_PROJECT=onlineberatung
+REACT_APP_WEBLATE_COMPONENT=frontend

package.json

@@ -82,6 +82,10 @@
 		"html-webpack-plugin": "^5.5.0",
 		"i18next": "^21.8.16",
 		"i18next-browser-languagedetector": "^6.1.5",
+		"i18next-chained-backend": "^4.6.2",
+		"i18next-fetch-backend": "^5.0.2",
+		"i18next-localstorage-backend": "^4.2.0",
+		"i18next-resources-to-backend": "^1.2.0",
 		"identity-obj-proxy": "^3.0.0",
 		"immutability-helper": "^3.1.1",
 		"intro.js": "^5.0.0",

src/globalState/interfaces/AppConfig/AppConfigInterface.ts

@@ -6,6 +6,7 @@ import { AppSettingsInterface } from './AppSettingsInterface';
 import { LegalLinkInterface } from '../LegalLinkInterface';
 import { InitOptions } from 'i18next';
 import { OverlaysConfigInterface } from './OverlaysConfigInterface';
+import { WeblateConfig } from '../WeblateConfig';
 
 export interface AppConfigInterface extends AppSettingsInterface {
 	urls: AppConfigUrlsInterface;
@@ -18,6 +19,7 @@ export interface AppConfigInterface extends AppSettingsInterface {
 	i18n: InitOptions;
 	overlays?: OverlaysConfigInterface;
 	releaseToggles?: ReleaseToggles;
+	weblate?: WeblateConfig;
 	requestCollector?: {
 		limit?: number;
 		showCorrelationId?: {

src/globalState/interfaces/WeblateConfig.ts

@@ -0,0 +1,4 @@
+export interface WeblateConfig {
+	host: string;
+	path: string;
+}

src/globalState/provider/LocaleProvider.tsx

@@ -37,6 +37,49 @@ export function LocaleProvider(props) {
 
 		init({
 			...settings.i18n,
+			...(settings.weblate?.path && {
+				backend: {
+					backendOptions: [
+						{
+							expirationTime: 2 * 24 * 60 * 60 * 1000 // 2 days
+						},
+						{
+							// path where resources get loaded from, or a function
+							// returning a path:
+							// function(lngs, namespaces) { return customPath; }
+							// the returned path will interpolate lng, ns if provided like giving a static path
+							//https://app.onlineberatung.live/weblate/api/translations/onlineberatung/frontend/de/file.json
+							loadPath: `${settings.weblate.host}/${settings.weblate.path}`,
+
+							// parse data after it has been fetched
+							// in example use https://www.npmjs.com/package/json5
+							// here it removes the letter a from the json (bad idea)
+							//parse: function(data) { return data.replace(/a/g, ''); },
+
+							// path to post missing resources
+							//addPath: 'locales/add/{{lng}}/{{ns}}',
+
+							// define how to stringify the data when adding missing resources
+							stringify: JSON.stringify,
+
+							// your backend server supports multiloading
+							// /locales/resources.json?lng=de+en&ns=ns1+ns2
+							//allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading
+							//multiSeparator: '+',
+							// init option for fetch, for example
+							requestOptions: {
+								mode: 'cors',
+								credentials: 'same-origin',
+								cache: 'default'
+							},
+
+							// define a custom fetch function
+							fetch: fetch
+						},
+						{}
+					]
+				}
+			}),
 			...(tenant?.settings?.activeLanguages && {
 				supportedLngs: [
 					'de_informal',
@@ -64,6 +107,7 @@ export function LocaleProvider(props) {
 		initialized,
 		isLoading,
 		settings.i18n,
+		settings.weblate,
 		settings.useTenantService,
 		tenant?.settings?.activeLanguages
 	]);

src/i18n.ts

@@ -1,17 +1,21 @@
 import i18n, { InitOptions } from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import ChainedBackend from 'i18next-chained-backend';
+import FetchBackend from 'i18next-fetch-backend';
+import LocalStorageBackend from 'i18next-localstorage-backend';
+import resourcesToBackend from 'i18next-resources-to-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import _ from 'lodash';
 import flatten from 'flat';
 
-import de from './resources/i18n/de.json';
-import deInformal from './resources/i18n/de.informal.json';
-import deLanguages from './resources/i18n/de.languages.json';
+import de from './resources/i18n/common.json';
+import deInformal from './resources/i18n/common.json';
+import deLanguages from './resources/i18n/languages.json';
 import { STORAGE_KEY_ENABLE_TRANSLATION_CHECK } from './components/devToolbar/DevToolbar';
 
 export const FALLBACK_LNG = 'de';
 
-const resources = {
+const defaultResources = {
 	de: {
 		common: {
 			...de
@@ -29,8 +33,9 @@ const resources = {
 	}
 };
 
-export const init = (config: InitOptions) => {
+export const init = ({ resources, ...config }: InitOptions) => {
 	return i18n
+		.use(ChainedBackend)
 		.use(LanguageDetector)
 		.use(initReactI18next)
 		.init(
@@ -55,8 +60,18 @@ export const init = (config: InitOptions) => {
 					interpolation: {
 						escapeValue: false
 					},
-					resources
+					partialBundledLanguages: true,
+					backend: {
+						backends: [
+							LocalStorageBackend,
+							config.backend && FetchBackend,
+							resourcesToBackend(
+								_.merge(defaultResources, resources)
+							)
+						].filter(Boolean)
+					}
 				},
+
 				config ?? {}
 			),
 			() => {

src/resources/scripts/config.ts

@@ -1,5 +1,5 @@
-import deAgency from '../i18n/de.agency.json';
-import deConsultingTypes from '../i18n/de.consultingTypes.json';
+import deAgency from '../i18n/agency.json';
+import deConsultingTypes from '../i18n/consultingTypes.json';
 import { AppConfigInterface } from '../../globalState/interfaces/AppConfig/AppConfigInterface';
 import {
 	OVERLAY_RELEASE_NOTE,
@@ -77,6 +77,10 @@ export const config: AppConfigInterface = {
 			registration: true
 		}
 	],
+	weblate: {
+		host: process.env.REACT_APP_WEBLATE_HOST || '',
+		path: process.env.REACT_APP_WEBLATE_PATH || null
+	},
 	emails: {
 		notifications: [
 			{
@@ -294,6 +298,11 @@ export const config: AppConfigInterface = {
 		'zu'
 	],
 	i18n: {
+		supportedLngs: ['en', 'de'],
+		fallbackLng: {
+			en: ['de'],
+			en_informal: ['en', 'de_informal', 'de']
+		},
 		resources: {
 			de: {
 				consultingTypes: {
@@ -302,7 +311,8 @@ export const config: AppConfigInterface = {
 				agencies: {
 					...deAgency
 				}
-			}
+			},
+			en: {}
 		}
 	}
 };