Promote i18n Ally for frontend localization (#2072)

Co-authored-by: sephrat <[email protected]>

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["lokalise.i18n-ally"]
+}

.vscode/settings.json

@@ -1,9 +1,5 @@
 {
-  "cSpell.enableFiletypes": [
-    "!javascript",
-    "!python",
-    "!yaml"
-  ],
+  "cSpell.enableFiletypes": ["!javascript", "!python", "!yaml"],
   "cSpell.words": [
     "chowdown",
     "compression",
@@ -18,9 +14,7 @@
     "source.organizeImports": false
   },
   "editor.formatOnSave": true,
-  "eslint.workingDirectories": [
-    "./frontend"
-  ],
+  "eslint.workingDirectories": ["./frontend"],
   "files.exclude": {
     "**/__pycache__": true,
     "**/.DS_Store": true,
@@ -29,9 +23,7 @@
     "**/.svn": true,
     "**/CVS": true
   },
-  "i18n-ally.enabledFrameworks": [
-    "vue"
-  ],
+  "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "frontend/lang/messages",
   "i18n-ally.sourceLanguage": "en-US",
@@ -40,28 +32,16 @@
   "python.linting.enabled": true,
   "python.linting.flake8Enabled": false,
   "python.linting.pylintEnabled": false,
-  "python.linting.pylintArgs": [
-    "--rcfile=${workspaceFolder}/.pylintrc"
-  ],
+  "python.linting.pylintArgs": ["--rcfile=${workspaceFolder}/.pylintrc"],
   "python.testing.autoTestDiscoverOnSaveEnabled": false,
-  "python.testing.pytestArgs": [
-    "tests"
-  ],
+  "python.testing.pytestArgs": ["tests"],
   "python.testing.pytestEnabled": true,
   "python.testing.unittestEnabled": false,
   "python.analysis.typeCheckingMode": "off",
   "python.linting.mypyEnabled": true,
-  "isort.path": [
-    "${workspaceFolder}/.venv/bin/isort"
-  ],
+  "isort.path": ["${workspaceFolder}/.venv/bin/isort"],
   "search.mode": "reuseEditor",
-  "python.testing.unittestArgs": [
-    "-v",
-    "-s",
-    "./tests",
-    "-p",
-    "test_*.py"
-  ],
+  "python.testing.unittestArgs": ["-v", "-s", "./tests", "-p", "test_*.py"],
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "package.json": "package-lock.json, yarn.lock, .eslintrc.js, tsconfig.json, .prettierrc, .editorconfig",

docs/docs/contributors/developers-guide/starting-dev-server.md

@@ -114,3 +114,24 @@ docker-dev           🐳 Build and Start Docker Development Stack (currently no
 docker-prod          🐳 Build and Start Docker Production Stack
 
 ```
+## Internationalization
+### Frontend
+We use vue-i18n package for internationalization. Translations are stored in json format located in [frontend/lang/messages](https://github.com/hay-kot/mealie/tree/mealie-next/frontend/lang/messages).
+### Backend
+Translations are stored in json format located in [mealie/lang/messages](https://github.com/hay-kot/mealie/tree/mealie-next/mealie/lang/messages).
+
+### Quick frontend localization with VS Code
+[i18n Ally for VScode](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) is helpful for generating new strings to translate using Code Actions. It also has a nice feature, which shows translations in-place when editing code.
+
+A few settings must be tweaked to make the most of its features. Some settings are stored on project level, but most of them have to be set manually in your workspace or user settings.\
+We've found that the following settings work best:
+
+```
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.extract.autoDetect": true,
+  "i18n-ally.dirStructure": "auto",
+  "i18n-ally.extract.targetPickingStrategy": "global-previous",
+  "i18n-ally.displayLanguage": "en-US",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sourceLanguage": "en-US",
+```

docs/docs/contributors/translating.md

@@ -1,21 +1,16 @@
 # Contributing with Translations
 Translations can be a great way **for non-coders** to contribute to project.
-We use **[Crowdin](https://crowdin.com/project/mealie)** to allow several contributors to work on translating Mealie. 
+We use **[Crowdin](https://crowdin.com/project/mealie)** to allow several contributors to work on translating Mealie.
 You can simply help by voting for your preferred translations, or even by completely translating Mealie into a new language.
 
 Translations are regularly pulled from Crowdin and included in each new release.
 
 Please use Crowdin as much as possible if you have any question/issue regarding a particular string. You can take a look at [Crowdin Knowledge base](https://support.crowdin.com/for-volunteer-translators/) if you want to know more about how to use this tool.
 
 ## My language is missing in Mealie
-Once your language is translated on Crowdin, we need to manually add it in Mealie. If you believe your language is ready for use, please create an issue on GitHub. 
+Once your language is translated on Crowdin, we need to manually add it in Mealie. If you believe your language is ready for use, please create an issue on GitHub.
 
 ## I can't find a particular text in Crowdin
 There can be several reasons:
 - The text you're looking for is outdated: someone has already changed it or it will be removed/changed in the next release.
 - It is possible some texts are not translatable (yet) for technical reasons. If you spot one, please reach out to us on [Discord](https://discord.gg/QuStdQGSGK) or raise an issue on GitHub.
-
-## Technical information
-We use vue-i18n package for internationalization. Translations are stored in json format located in [frontend/src/locales/messages](https://github.com/hay-kot/mealie/tree/master/frontend/src/locales/messages).
-
-[i18n Ally for VScode](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) is helpful for generating new strings to translate. It also has a nice feature, which shows translations in-place when editing code.