adam/vscode-front-matter
1
0 Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-11-03 09:02:19 +01:00
Code Issues 77 Packages Projects Releases Wiki Activity

Enhancement: Multilingual UI #470

New Issue
Closed
opened 2026-10-05 02:48:53 +02:00 by adam · 12 comments
adam commented 2026-10-05 02:48:53 +02:00
Owner
Copy link
Copy source

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

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 <!-- github-sync-id:1784560600 -->
adam closed this issue 2026-10-05 02:48:53 +02:00
adam commented 2026-10-05 02:48:54 +02:00
Author
Owner
Copy link
Copy source

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.

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. <!-- github-comment-id:1616580301 -->
adam commented 2026-10-05 02:48:54 +02:00
Author
Owner
Copy link
Copy source

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.

I did the initial configuration to allow us to localize the Front Matter UI. I used the [vscode-l10n](https://github.com/microsoft/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: ```typescript l10n.t(`header.startup.label`) ``` The localization files are located in the `l10n` folder of the [issue/598](https://github.com/estruyf/vscode-front-matter/tree/issue/598/l10n) 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. <!-- github-comment-id:1618883797 -->
adam commented 2026-10-05 02:48:55 +02:00
Author
Owner
Copy link
Copy source

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)
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](https://github.com/estruyf/vscode-front-matter/blob/issue/598/src/localization/localization.enum.ts) 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: ```json { "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. ```typescript import * as l10n from "@vscode/l10n" import { LocalizationKey } from '../../localization'; // Usage l10n.t(LocalizationKey.panelActionsCreateContent) ``` <!-- github-comment-id:1619963992 -->
adam commented 2026-10-05 02:48:56 +02:00
Author
Owner
Copy link
Copy source

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.

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. <!-- github-comment-id:1642981436 -->
adam commented 2026-10-05 02:48:56 +02:00
Author
Owner
Copy link
Copy source

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

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 <!-- github-comment-id:1646365659 -->
adam commented 2026-10-05 02:48:57 +02:00
Author
Owner
Copy link
Copy source

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

@mayumih387, you can test out the latest v9 beta which includes your Japanese translations. <!-- github-comment-id:1652665981 -->
adam commented 2026-10-05 02:48:57 +02:00
Author
Owner
Copy link
Copy source

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

Thank you @estruyf for your review at #598. I'll try the latest v9 beta and see if I can add further translations :) <!-- github-comment-id:1652742395 -->
adam commented 2026-10-05 02:48:58 +02:00
Author
Owner
Copy link
Copy source

@gsegit I have added German translations (via OpenAI). Would you be able to give the latest beta a try and check if they are any good?

@gsegit I have added German translations (via OpenAI). Would you be able to give the latest beta a try and check if they are any good? <!-- github-comment-id:1663991547 -->
adam commented 2026-10-05 02:48:59 +02:00
Author
Owner
Copy link
Copy source

@gsegit I have added German translations (via OpenAI). Would you be able to give the latest beta a try and check if they are any good?

Hi there 🌞 sorry for the later answer, but i have total forget my post here 😅 Thanks you for your, i would test the translation in the next days 😎🌞

> @gsegit I have added German translations (via OpenAI). Would you be able to give the latest beta a try and check if they are any good? Hi there 🌞 sorry for the later answer, but i have total forget my post here 😅 Thanks you for your, i would test the translation in the next days 😎🌞 <!-- github-comment-id:1686212442 -->
adam commented 2026-10-05 02:48:59 +02:00
Author
Owner
Copy link
Copy source

Hi there ;D
Wow, very great work and now the dokumention in german ;D No, is a joke, but I think you make a very good work and is now more easier to work with hugo or so ;D

Greetings
Gerriet
Have a nice Day ;D

Hi there ;D Wow, very great work and now the dokumention in german ;D No, is a joke, but I think you make a very good work and is now more easier to work with hugo or so ;D Greetings Gerriet Have a nice Day ;D <!-- github-comment-id:1694380913 -->
adam commented 2026-10-05 02:49:00 +02:00
Author
Owner
Copy link
Copy source

Hi there
The problem is, in german give a formular "Sie" and informular "du", the translation have you make openAI, the KI make no different between sie or du. I like more "du". Better is the strings to write in a file, so can make a better translation, ok that is very hard work, but is better for user.

I hope you understand my englisch 🤣

Hi there The problem is, in german give a formular "Sie" and informular "du", the translation have you make openAI, the KI make no different between sie or du. I like more "du". Better is the strings to write in a file, so can make a better translation, ok that is very hard work, but is better for user. I hope you understand my englisch 🤣 <!-- github-comment-id:1787296491 -->
adam commented 2026-10-05 02:49:01 +02:00
Author
Owner
Copy link
Copy source

A lot of the German translations were manually provided by one of our contributors. If you see some mismatches or where translations can be enhanced, feel free to push changes via a PR, and we will be happy to merge them into the project.

The German translation file can be found here: https://github.com/estruyf/vscode-front-matter/blob/main/l10n/bundle.l10n.de.json

A lot of the German translations were manually provided by one of our contributors. If you see some mismatches or where translations can be enhanced, feel free to push changes via a PR, and we will be happy to merge them into the project. The German translation file can be found here: https://github.com/estruyf/vscode-front-matter/blob/main/l10n/bundle.l10n.de.json <!-- github-comment-id:1787413232 -->
Sign in to join this conversation.
No Branch/Tag Specified
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Wojcieszonek)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: adam/vscode-front-matter#470