#598: initial configuration for a multilingual UI

l10n/bundle.l10n.de.json

@@ -0,0 +1,4 @@
+{
+  "header.createContent": "Inhalte erstellen",
+  "header.startup.label": "Beim Start öffnen?"
+}

l10n/bundle.l10n.json

@@ -0,0 +1,4 @@
+{
+  "header.createContent": "Create content",
+  "header.startup.label": "Open on startup?"
+}

package.json

@@ -26,8 +26,9 @@
   },
   "qna": "https://github.com/estruyf/vscode-front-matter/discussions",
   "engines": {
-    "vscode": "^1.70.0"
+    "vscode": "^1.73.0"
   },
+  "l10n": "./l10n",
   "categories": [
     "Other"
   ],
@@ -584,12 +585,18 @@
           "markdownDescription": "Specify if you want to show the date on the content card view. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.date)"
         },
         "frontMatter.dashboard.content.card.fields.description": {
-          "type": ["null", "string"],
+          "type": [
+            "null",
+            "string"
+          ],
           "default": "",
           "markdownDescription": "Specify the name of the metadata field that will be used to show the description on the content card. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.description)"
         },
         "frontMatter.dashboard.content.card.fields.title": {
-          "type": ["null", "string"],
+          "type": [
+            "null",
+            "string"
+          ],
           "default": "",
           "markdownDescription": "Specify the name of the metadata field that will be used to show the title on the content card. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.title)"
         },
@@ -1247,7 +1254,10 @@
                     },
                     "contentTypeValue": {
                       "type": "string",
-                      "enum": ["path", "slug"],
+                      "enum": [
+                        "path",
+                        "slug"
+                      ],
                       "default": "path",
                       "description": "Specify the value to insert for the contentRelationship field"
                     },
@@ -2412,10 +2422,11 @@
     "@types/react": "17.0.0",
     "@types/react-datepicker": "^4.1.7",
     "@types/react-dom": "17.0.0",
-    "@types/vscode": "^1.70.0",
+    "@types/vscode": "^1.73.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "@vscode/codicons": "0.0.20",
+    "@vscode/l10n": "^0.0.14",
     "@vscode/webview-ui-toolkit": "^0.9.1",
     "@webpack-cli/serve": "^1.6.0",
     "ajv": "^8.12.0",

src/dashboardWebView/DashboardCommand.ts

@@ -10,5 +10,8 @@ export enum DashboardCommand {
   searchReady = 'searchReady',
 
   // Taxonomy dashboard
-  setTaxonomyData = 'setTaxonomyData'
+  setTaxonomyData = 'setTaxonomyData',
+
+  // Localization
+  setLocalization = 'setLocalization'
 }

src/dashboardWebView/DashboardMessage.ts

@@ -56,6 +56,7 @@ export enum DashboardMessage {
   moveTaxonomy = 'moveTaxonomy',
 
   // Other
+  getLocalization = 'getLocalization',
   getTheme = 'getTheme',
   updateSetting = 'updateSetting',
   setState = 'setState',

src/dashboardWebView/components/Header/Header.tsx

@@ -29,6 +29,7 @@ import useThemeColors from '../../hooks/useThemeColors';
 import { Startup } from './Startup';
 import { Navigation } from './Navigation';
 import { ProjectSwitcher } from './ProjectSwitcher';
+import * as l10n from '@vscode/l10n';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -168,7 +169,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
               <SyncButton />
 
               <ChoiceButton
-                title={`Create content`}
+                title={l10n.t(`header.createContent`)}
                 choices={choiceOptions}
                 onClick={createContent}
                 disabled={!settings?.initialized}

src/dashboardWebView/components/Header/Startup.tsx

@@ -4,6 +4,7 @@ import { Settings } from '../../models';
 import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SETTING_DASHBOARD_OPENONSTART } from '../../../constants';
+import * as l10n from "@vscode/l10n"
 
 export interface IStartupProps {
   settings: Settings | null;
@@ -54,7 +55,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({
           )
             }`}
         >
-          Open on startup?
+          {l10n.t(`header.startup.label`)}
         </label>
       </div>
     </div>

src/dashboardWebView/hooks/useMessages.tsx

@@ -15,6 +15,7 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
 import { NavigationType } from '../models';
 import { GeneralCommands } from '../../constants';
+import * as l10n from '@vscode/l10n';
 
 export default function useMessages() {
   const [loading, setLoading] = useRecoilState(LoadingAtom);
@@ -59,6 +60,11 @@ export default function useMessages() {
       case GeneralCommands.toWebview.setMode:
         setMode(message.payload);
         break;
+      case DashboardCommand.setLocalization:
+        l10n.config({
+          contents: message.payload
+        })
+        break;
     }
   };
 
@@ -70,6 +76,7 @@ export default function useMessages() {
     Messenger.send(DashboardMessage.getTheme);
     Messenger.send(DashboardMessage.getData);
     Messenger.send(DashboardMessage.getMode);
+    Messenger.send(DashboardMessage.getLocalization);
 
     return () => {
       Messenger.unlisten(messageListener);

src/extension.ts

@@ -13,6 +13,7 @@ import { ModeSwitch } from './services/ModeSwitch';
 import { PagesParser } from './services/PagesParser';
 import { ContentType, Telemetry, Extension } from './helpers';
 import { TaxonomyType, DashboardData } from './models';
+import * as l10n from '@vscode/l10n';
 import {
   Backers,
   Diagnostics,
@@ -41,6 +42,17 @@ export async function activate(context: vscode.ExtensionContext) {
   const extension = Extension.getInstance(context);
   Backers.init(context).then(() => {});
 
+  // Make sure the EN language file is loaded
+  if (!vscode.l10n.uri) {
+    l10n.config({
+      fsPath: vscode.Uri.parse(`${extensionPath}/l10n/bundle.l10n.json`).fsPath
+    });
+  } else {
+    l10n.config({
+      fsPath: vscode.l10n.uri.fsPath
+    });
+  }
+
   if (!extension.checkIfExtensionCanRun()) {
     return undefined;
   }

src/listeners/dashboard/SettingsListener.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import { commands, Uri } from 'vscode';
+import { commands, Uri, l10n } from 'vscode';
 import { Folders } from '../../commands/Folders';
 import {
   COMMAND_NAME,
@@ -21,6 +21,7 @@ import { DataListener } from '../panel';
 import { MarkdownFoldingProvider } from '../../providers/MarkdownFoldingProvider';
 import { ModeSwitch } from '../../services/ModeSwitch';
 import { PagesListener } from './PagesListener';
+import { readFileAsync } from '../../utils';
 
 export class SettingsListener extends BaseListener {
   /**
@@ -34,6 +35,9 @@ export class SettingsListener extends BaseListener {
       case DashboardMessage.getData:
         this.getSettings();
         break;
+      case DashboardMessage.getLocalization:
+        this.getLocalization();
+        break;
       case DashboardMessage.updateSetting:
         this.update(msg.payload);
         break;
@@ -49,6 +53,16 @@ export class SettingsListener extends BaseListener {
     }
   }
 
+  public static async getLocalization() {
+    const localeFilePath =
+      l10n.uri?.fsPath ||
+      Uri.parse(`${Extension.getInstance().extensionPath}/l10n/bundle.l10n.json`).fsPath;
+
+    const fileContents = await readFileAsync(localeFilePath, 'utf-8');
+
+    this.sendMsg(DashboardCommand.setLocalization, fileContents);
+  }
+
   public static async switchProject(project: string) {
     if (project) {
       this.sendMsg(DashboardCommand.loading, true);