forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
chore: update i18n contributing guide (#1030)
authored by
Joaquín Sánchez
and committed by
GitHub
76b1fa30
a729534a
+40
-2
+40
-2
CONTRIBUTING.md
+40
-2
CONTRIBUTING.md
···
340
340
5. If the language is `right-to-left`, add `dir: 'rtl'` (see `ar-EG` in config for example)
341
341
6. If the language requires special pluralization rules, add a `pluralRule` callback (see `ar-EG` or `ru-RU` in config for examples)
342
342
343
-
Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
343
+
Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization#custom-pluralization) and [Plural Rules](https://cldr.unicode.org/index/cldr-spec/plural-rules#TOC-Determining-Plural-Categories) for more info.
344
344
345
345
### Update translation
346
346
347
347
We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
348
-
If you see any outdated translations in your language, feel free to update the keys to match then English version.
348
+
If you see any outdated translations in your language, feel free to update the keys to match the English version.
349
349
350
350
In order to make sure you have everything up-to-date, you can run:
351
351
···
408
408
<p>{{ $t('greeting', { name: userName }) }}</p>
409
409
```
410
410
411
+
4. Don't concatenate string messages in the Vue templates, some languages can have different word order. Use placeholders instead.
412
+
413
+
**Bad:**
414
+
415
+
```vue
416
+
<p>{{ $t('hello') }} {{ userName }}</p>
417
+
```
418
+
419
+
**Good:**
420
+
421
+
```vue
422
+
<p>{{ $t('greeting', { name: userName }) }}</p>
423
+
```
424
+
425
+
**Complex content:**
426
+
427
+
If you need to include HTML or components inside the translation, use [`i18n-t`](https://vue-i18n.intlify.dev/guide/advanced/component.html) component. This is especially useful when the order of elements might change between languages.
428
+
429
+
```json
430
+
{
431
+
"agreement": "I accept the {terms} and {privacy}.",
432
+
"terms_link": "Terms of Service",
433
+
"privacy_policy": "Privacy Policy"
434
+
}
435
+
```
436
+
437
+
```vue
438
+
<i18n-t keypath="agreement" tag="p">
439
+
<template #terms>
440
+
<NuxtLink to="/terms">{{ $t('terms_link') }}</NuxtLink>
441
+
</template>
442
+
<template #privacy>
443
+
<strong>{{ $t('privacy_policy') }}</strong>
444
+
</template>
445
+
</i18n-t>
446
+
```
447
+
411
448
### Translation key conventions
412
449
413
450
- Use dot notation for hierarchy: `section.subsection.key`
···
415
452
- Group related keys together
416
453
- Use `common.*` for shared strings (loading, retry, close, etc.)
417
454
- Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
455
+
- Do not use dashes (`-`) in translation keys; always use underscore (`_`): e.g., `privacy_policy` instead of `privacy-policy`
418
456
419
457
### Using i18n-ally (recommended)
420
458