Wiki source code of Code Style
Last modified by Manuel Leduc on 2024/10/07 15:44
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{toc start="2"/}} | ||
| 2 | |||
| 3 | == package.json == | ||
| 4 | |||
| 5 | Formatting a package.json file: | ||
| 6 | |||
| 7 | {{code language="bash"}} | ||
| 8 | pnpx prettier-package-json --write package.json | ||
| 9 | {{/code}} | ||
| 10 | |||
| 11 | Linting a package.json file: | ||
| 12 | |||
| 13 | {{code language="bash"}} | ||
| 14 | pnpx npm-package-json-lint . | ||
| 15 | {{/code}} | ||
| 16 | |||
| 17 | == Translations == | ||
| 18 | |||
| 19 | All language readable strings must be located in a translation file that can be processed by [[weblate>>https://l10n.xwiki.org/]]. | ||
| 20 | |||
| 21 | All the localization related to Cristal can be found in [[Weblate's Cristal category>>https://l10n.xwiki.org/projects/xwiki-contrib/cristal/]]. | ||
| 22 | |||
| 23 | When a module has translation files for the first time, it will automatically be added to the Cristal category. | ||
| 24 | |||
| 25 | Only English (en) translation files should be manipulated manually. The rest of the languages should only be updated through Weblate. | ||
| 26 | |||
| 27 | === Translation files structure === | ||
| 28 | |||
| 29 | Translation files are located in ##<module_root>/translation-<lang>.json##. | ||
| 30 | |||
| 31 | File structure example: | ||
| 32 | |||
| 33 | {{code language="json"}} | ||
| 34 | { | ||
| 35 | "translation.key": "Localized string" | ||
| 36 | } | ||
| 37 | |||
| 38 | {{/code}} | ||
| 39 | |||
| 40 | Then, a typescript file ##src/translations.ts## must be added, following the pattern below: | ||
| 41 | |||
| 42 | {{code language="typescript"}} | ||
| 43 | import en from "../langs/translation-en.json"; | ||
| 44 | import fr from "../langs/translation-fr.json"; | ||
| 45 | // Repeat the import for each existing language. | ||
| 46 | |||
| 47 | const translations: Record<string, Record<string, string>> = { | ||
| 48 | en, | ||
| 49 | fr, | ||
| 50 | // Repeat for each existing language. | ||
| 51 | }; | ||
| 52 | |||
| 53 | export default translations; | ||
| 54 | {{/code}} | ||
| 55 | |||
| 56 | === Converting a translation key to a string === | ||
| 57 | |||
| 58 | ==== Typescript ==== | ||
| 59 | |||
| 60 | {{code language="typescript"}} | ||
| 61 | import { useI18n } from "vue-i18n"; | ||
| 62 | import messages from "./translations"; | ||
| 63 | |||
| 64 | // Translations loading. | ||
| 65 | const { t, mergeLocaleMessage } = useI18n(); | ||
| 66 | for (const messagesKey in messages) { | ||
| 67 | mergeLocaleMessage(messagesKey, messages[messagesKey]); | ||
| 68 | } | ||
| 69 | |||
| 70 | // Translations use | ||
| 71 | |||
| 72 | t("my.key") | ||
| 73 | {{/code}} | ||
| 74 | |||
| 75 | ==== Vue ==== | ||
| 76 | |||
| 77 | {{code language="typescript"}} | ||
| 78 | // In the template section: | ||
| 79 | |||
| 80 | import { useI18n } from "vue-i18n"; | ||
| 81 | import messages from "../translations"; | ||
| 82 | |||
| 83 | const { t } = useI18n({ | ||
| 84 | messages, | ||
| 85 | }); | ||
| 86 | |||
| 87 | // In the template section: | ||
| 88 | // To bind the translated value to a component prop | ||
| 89 | <my-component :label="t('my.key')"></my-component> | ||
| 90 | // To add the translated value in the text | ||
| 91 | {{ t('my.key') }} | ||
| 92 | |||
| 93 | {{/code}} |
This project is being financed by the French State as part of the France 2030 program
Ce projet est financé par l’État Français dans le cadre de France 2030
