Enhancement: Multilingual UI

[gsegit]

Hi there ;D
Can your Ext be translated into another language, such as my native German ? Is something like that foreseen ?

Greetings from Germany ;D

Bogus

[estruyf]

Thanks for the suggestion @gsegit. Haven't planned anything for this yet, but if you want or any other of the contributors, I'm welcome to accept PRs for this one.

[estruyf]

I did the initial configuration to allow us to localize the Front Matter UI.

I used the vscode-l10n localization approach to support it, but with a couple of changes, as it only localizes the configuration or anything related to the extension host, not the web views.

To overcome this, I pass the localization bundle to the web view, and once loaded, it can be used in the React codebase as follows:

l10n.t(`header.startup.label`)

The localization files are located in the l10n folder of the issue/598 branch.

You can find two files:

• bundle.l10n.json - the default EN file
• bundle.l10n.de.json - the German file

By default, the vscode-l10n dependency will not use a localization file for the default language, but I changed this behavior as I like to use localization keys. This makes it easier to find where it's used in the codebase.

[estruyf]

I have been optimizing the flow. There are two new scripts created:

• ./scripts/sync-localization.js: This script will sync all the localization keys from EN to the other available languages. When a key is not present, it will be at the EN value + the 🚧 sign. In the future, we might use a service for automatically translating those labels and getting them validated by the users.
• ./scripts/generate-localization-enum.js: This script created an enum file so that we do not have to guess the keys during the development.

When creating a key, start with the type of web view to where you want to add it. This can be panel or dashboard. Example:

{
  "dashboard.header.createContent": "Create content",
  "dashboard.header.startup.label": "Open on startup?",

  "panel.actions.title": "Actions",
  "panel.actions.openDashboard": "Open dashboard",
  "panel.actions.openPreview": "Open preview",
  "panel.actions.startServer": "Start server",
  "panel.actions.stopServer": "Stop server",
  "panel.actions.createContent": "Create content"
}

Important: Make sure to add the key and label to the EN - bundle.l10n.json file.

If you want to start using the localization labels in the web views, you must include the l10n dependency and LocalizationKey enum.

import * as l10n from "@vscode/l10n"
import { LocalizationKey } from '../../localization';

// Usage
l10n.t(LocalizationKey.panelActionsCreateContent)

[estruyf]

All the hardcoded strings have been moved over to the ./l10n/bundle.l10n.json EN localization file. The file contains the key/values for both the panel and the dashboard webviews.

[estruyf]

Commands and settings have also been localized. To support another language, create a new package.nls.<locale>.json file in the project's root and copy the contents of the package.nls.json file to it.

Todo

• Documentation schema script (https://github.com/FrontMatter/web-documentation-nextjs/blob/6de4b327ea00a9e7c59d5592d5662b29c84731d4/scripts/generate-schema.js) needs to be updated to replace the localization keys

[estruyf]

@mayumih387, you can test out the latest v9 beta which includes your Japanese translations.

[mayumih387]

Thank you @estruyf for your review at #598. I'll try the latest v9 beta and see if I can add further translations :)