From 9ddb27b2e32aedd68108d430a241d6888c9abe31 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 28 Jan 2023 16:41:01 -0900
Subject: [PATCH] Promote i18n Ally for frontend localization (#2072)

Co-authored-by: sephrat <34862846+sephrat@users.noreply.github.com>
---
 .vscode/extensions.json                       |  3 ++
 .vscode/settings.json                         | 34 ++++---------------
 .../developers-guide/starting-dev-server.md   | 21 ++++++++++++
 docs/docs/contributors/translating.md         |  9 ++---
 4 files changed, 33 insertions(+), 34 deletions(-)
 create mode 100644 .vscode/extensions.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000000..2ccf25233d40
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["lokalise.i18n-ally"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 29d0b6f895bb..95efefcc9249 100644
--- a/.vscode/settings.json
+++ b/.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",
diff --git a/docs/docs/contributors/developers-guide/starting-dev-server.md b/docs/docs/contributors/developers-guide/starting-dev-server.md
index 8bae387bf704..d809f4c0d922 100644
--- a/docs/docs/contributors/developers-guide/starting-dev-server.md
+++ b/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",
+```
diff --git a/docs/docs/contributors/translating.md b/docs/docs/contributors/translating.md
index b4fa608f6956..7beee1781988 100644
--- a/docs/docs/contributors/translating.md
+++ b/docs/docs/contributors/translating.md
@@ -1,6 +1,6 @@
 # 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.
@@ -8,14 +8,9 @@ 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.
\ No newline at end of file