feat: Allow users to specify language preference (#2129)

- Shows language selector on log in page
- Adds tabs to account settings
- Adds language preference selector on account settings
- Adds issue template for new language
- Updates dev docs for frontend localization

---------

Co-authored-by: SuaYoo <[email protected]>
Co-authored-by: Henry Wilkinson <[email protected]>
Co-authored-by: Tessa Walsh <[email protected]>

.github/ISSUE_TEMPLATE/localization-request.yml

@@ -0,0 +1,17 @@
+name: Localization Request
+description: Request a new language or translation.
+title: "[L10N]: "
+labels: ["enhancement"]
+body:
+  - type: textarea
+    attributes:
+      label: Language
+      description: Specify the language you'd like to add or translate. A list of currently supported languages can be found in our [Weblate project](https://hosted.weblate.org/engage/browsertrix/).
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Context
+      description: Any background information that helps us understand the request.
+    validations:
+      required: true

frontend/docs/docs/develop/frontend-dev.md

@@ -134,44 +134,3 @@ To run tests in multiple browsers:
 ```sh
 yarn test --browsers chromium firefox webkit
 ```
-
-## Localization
-
-Wrap text or templates in the `msg` helper to make them localizable:
-
-```js
-// import from @lit/localize:
-import { msg } from "@lit/localize";
-
-// later, in the render function:
-render() {
-  return html`
-    <button>
-      ${msg("Click me")}
-    </button>
-  `
-}
-```
-
-Entire templates can be wrapped as well:
-
-```js
-render() {
-  return msg(html`
-    <p>Click the button</p>
-    <button>Click me</button>
-  `)
-}
-```
-
-See: <https://lit.dev/docs/localization/overview/#message-types>
-
-To add new languages:
-
-1. Add [BCP 47 language tag](https://www.w3.org/International/articles/language-tags/index.en) to `targetLocales` in `lit-localize.json`
-2. Run `yarn localize:extract` to generate new .xlf file in `/xliff`
-3. Provide .xlf file to translation team
-4. Replace .xlf file once translated
-5. Run `yarn localize:build` bring translation into `src`
-
-See: <https://lit.dev/docs/localization/overview/#extracting-messages>

frontend/docs/docs/develop/localization.md

@@ -0,0 +1,55 @@
+# Localization
+
+The Browsertrix UI supports multiple languages. Browsertrix end users can set a language preference in their account settings.
+
+## Contributing
+
+Translations are managed through Weblate, a web-based translation tool. Registration is free! Once registered, you can submit translations for review by Browsertrix maintainers.
+
+**[Register for Weblate](https://hosted.weblate.org/engage/browsertrix/)**
+
+## Adding a Language
+
+Adding support for a new language involves a small code change. If you'd like to add a new language and would prefer that a Browsertrix maintainer make the change, submit a [**Localization Request** on GitHub](https://github.com/webrecorder/browsertrix/issues/new/choose). A Browsertrix maintainer will respond to your request on GitHub.
+
+To add a new language directly through code change:
+
+1. Look up the [BCP 47 language tag](https://www.w3.org/International/articles/language-tags/index.en#registry) and add it to the `targetLocales` field in `lit-localize.json`.
+```js
+{
+  // ...
+  "sourceLocale": "en",
+  "targetLocales": [
+    "es",
+    // Add your language tag here
+    ],
+}
+```
+
+2. Generate a new XLIFF file by running:
+  ```sh
+  yarn localize:extract
+  ```
+  This will add an `.xlf` file named after the new language tag to the `/xliff` directory.
+
+3. Open a pull request with the changes.
+4. Once the pull request is merged, manually refresh the language list in the [Weblate Browsertrix project](https://hosted.weblate.org/projects/browsertrix). Translations are managed entirely through the Weblate interface.
+
+## Making Strings Localizable
+
+All text should be wrapped in the `msg` helper to make them localizable:
+
+```js
+import { msg } from "@lit/localize";
+
+// later, in the render function:
+render() {
+  return html`
+    <button>
+      ${msg("Click me")}
+    </button>
+  `
+}
+```
+
+See [Lit's message types documentation](https://lit.dev/docs/localization/overview/#message-types) page for details.

frontend/docs/mkdocs.yml

@@ -88,6 +88,7 @@ nav:
       - develop/index.md
       - develop/local-dev-setup.md
       - develop/frontend-dev.md
+      - develop/localization.md
       - develop/docs.md
 
 markdown_extensions: