Skip to content

Commit a5e0a7a

Browse files
committed
docs: enhance i18n plugin documentation with BCP47 language code support and primary language configuration details
1 parent f2aec6a commit a5e0a7a

File tree

1 file changed

+128
-0
lines changed
  • adminforth/documentation/docs/tutorial/07-Plugins

1 file changed

+128
-0
lines changed

adminforth/documentation/docs/tutorial/07-Plugins/10-i18n.md

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ Main features:
55
- Stores all translation strings in your application in a single AdminForth resource. You can set [allowed actions](/docs/tutorial/Customization/limitingAccess/) only to Developers/Translators role if you don't want other users to see/edit the translations.
66
- Supports AI completion adapters to help with translations. For example, you can use OpenAI ChatGPT to generate translations. Supports correct pluralization, even for Slavic languages.
77
- Supports any number of languages.
8+
- Supports BCP47 language codes (e.g., `en-GB`, `pt-BR`) for regional language variants.
9+
- Configurable primary language.
810

911

1012
Under the hood it uses vue-i18n library and provides several additional facilities to make the translation process easier.
@@ -46,6 +48,8 @@ model translations {
4648
4749
If you want more languages, just add more fields like `uk_string`, `ja_string`, `fr_string`, `es_string` to the model.
4850
51+
> 💡 **Tip**: For regional language variants, you can also use BCP47 codes like `en-GB`, `pt-BR`, `fr-CA` and add corresponding fields like `enGB_string`, `ptBR_string`, `frCA_string`. See the [BCP47 Language Code Support](#bcp47-language-code-support) section for more details.
52+
4953
Next, add resource for translations:
5054
5155
```ts title='./resources/translations.ts'
@@ -86,6 +90,9 @@ export default {
8690
// will hel to filter out incomplete translations
8791
completedFieldName: 'completedLangs',
8892

93+
// optional: set primary language (defaults to 'en' if not specified)
94+
// primaryLanguage: 'fr', // Uncomment to set French as primary language
95+
8996
completeAdapter: new CompletionAdapterOpenAIChatGPT({
9097
openAiApiKey: process.env.OPENAI_API_KEY as string,
9198
model: 'gpt-4o-mini',
@@ -205,6 +212,125 @@ You can add translations for each language manually or use Bulk actions to gener
205212
206213
For simplicity you can also use filter to get only untranslated strings and complete them one by one (filter name "Fully translated" in the filter).
207214
215+
## BCP47 Language Code Support
216+
217+
The i18n plugin supports BCP47 language tags, which allow you to specify regional variants of languages. This is particularly useful for applications that need to support different regional dialects or cultural variations.
218+
219+
### Supported Language Code Formats
220+
221+
- **ISO 639-1 codes**: Basic language codes like `en`, `fr`, `de`, `es`
222+
- **BCP47 tags**: Regional variants like `en-GB` (British English), `pt-BR` (Brazilian Portuguese), `en-US` (American English)
223+
224+
### Example with Regional Variants
225+
226+
Here's how to configure the plugin to support both basic and regional language codes:
227+
228+
```ts title='./resources/translations.ts'
229+
export default {
230+
dataSource: "maindb",
231+
table: "translations",
232+
resourceId: "translations",
233+
label: "Translations",
234+
235+
recordLabel: (r: any) => `✍️ ${r.en_string}`,
236+
plugins: [
237+
new I18nPlugin({
238+
// Support both basic and regional language codes
239+
supportedLanguages: ['en', 'en-GB', 'en-US', 'pt', 'pt-BR', 'fr', 'fr-CA'],
240+
241+
// Map language codes to database field names
242+
translationFieldNames: {
243+
en: 'en_string',
244+
'en-GB': 'enGB_string',
245+
'en-US': 'enUS_string',
246+
pt: 'pt_string',
247+
'pt-BR': 'ptBR_string',
248+
fr: 'fr_string',
249+
'fr-CA': 'frCA_string',
250+
},
251+
252+
categoryFieldName: 'category',
253+
sourceFieldName: 'source',
254+
completedFieldName: 'completedLangs',
255+
256+
completeAdapter: new CompletionAdapterOpenAIChatGPT({
257+
openAiApiKey: process.env.OPENAI_API_KEY as string,
258+
model: 'gpt-4o-mini',
259+
expert: {
260+
temperature: 0.5,
261+
},
262+
}),
263+
}),
264+
],
265+
// ... rest of configuration
266+
} as AdminForthResourceInput;
267+
```
268+
269+
### Database Schema for Regional Variants
270+
271+
When using BCP47 codes, make sure your database schema includes fields for each regional variant:
272+
273+
```ts title='./schema.prisma'
274+
model translations {
275+
id String @id
276+
en_string String
277+
created_at DateTime
278+
279+
// Basic language codes
280+
fr_string String?
281+
pt_string String?
282+
283+
// Regional variants (BCP47)
284+
enGB_string String? // British English
285+
enUS_string String? // American English
286+
ptBR_string String? // Brazilian Portuguese
287+
frCA_string String? // Canadian French
288+
289+
category String
290+
source String?
291+
completedLangs String?
292+
293+
@@index([en_string, category])
294+
@@index([category])
295+
@@index([completedLangs])
296+
}
297+
```
298+
299+
## Primary Language Configuration
300+
301+
The `primaryLanguage` option allows you to set the default language for your application. This is particularly useful when your application's primary language is not English.
302+
303+
### How Primary Language Works
304+
305+
- **Default Language**: The language shown to users by default
306+
- **Fallback Chain**: When a translation is missing, the system falls back to: `requested language``primaryLanguage``English`
307+
- **Translation Source**: English (`en_string`) is always used as the source for AI translations, regardless of the primary language setting
308+
309+
### Example: Portuguese as Primary Language
310+
311+
```ts title='./resources/translations.ts'
312+
export default {
313+
// ... other configuration
314+
plugins: [
315+
new I18nPlugin({
316+
// Set Portuguese as the primary language
317+
primaryLanguage: 'pt-BR',
318+
319+
supportedLanguages: ['pt-BR', 'en', 'en-GB', 'es', 'fr'],
320+
translationFieldNames: {
321+
'pt-BR': 'ptBR_string',
322+
en: 'en_string',
323+
'en-GB': 'enGB_string',
324+
es: 'es_string',
325+
fr: 'fr_string',
326+
},
327+
328+
// ... rest of configuration
329+
}),
330+
],
331+
// ... rest of configuration
332+
} as AdminForthResourceInput;
333+
```
208334
209335
## Translation for custom components
210336
@@ -458,6 +584,8 @@ If you don't use params, you can use `tr` without third param:
458584
}
459585
```
460586
587+
> 🔄 **Fallback Behavior**: The `tr` function automatically handles fallbacks when translations are missing. It follows this chain: `requested language``primaryLanguage``English`. This ensures users always see content in a language they can understand, even if specific translations are missing.
588+
461589
> 🙅‍♂️ Temporary limitation: For now all translations strings for backend (adminforth internal and for from custom APIs)
462590
appear in Translations resource and table only after they are used. So greeting string will appear in the Translations table only after the first request to the API which reaches the `tr` function call.
463591
> So to collect all translations you should use your app for some time and make sure all strings are used at

0 commit comments

Comments
 (0)