feat: Chinese translation of Settings and related areas

contributing/Translation/About Translation.md

@@ -0,0 +1,85 @@
+---
+publish: true
+---
+
+# About Translation
+
+> [!Danger] This page is under development
+> For now, it is a list of things to remember to record.
+
+Since Tasks X.Y.Z, we are gradually migration most user-visible text in to a translation framework - also know as internationalisation or i18n.
+
+Topics - likely to be broken out in to separate pages:
+
+- Setting up WebStorm
+- Overview of the translation setup
+- How to add a new string
+- How to enable translations in a new language
+- How to add new translations
+
+## Tools Used
+
+- i18next
+- i18next-browser-languagedetector
+- i18next-parser
+- WebStorm
+  - [Easy I18n](https://plugins.jetbrains.com/plugin/16316-easy-i18n) plugin.
+
+## Files
+
+- `src/i18n/i18n.ts`
+- `src/i18n/locales/*.json`
+
+### Key names
+
+You can see the currently-used key names in:
+
+`src/i18n/locales/en.json`
+
+Here, they are nested, for example:
+
+```json
+{  
+  "modals": {  
+    "customStatusModal": {  
+      "editAvailableAsCommand": {  
+        "name": "Available as command"  
+      },
+    },
+  },
+}
+```
+
+The value of that string is obtained in code with:
+
+```ts
+i18n.t('modals.customStatusModal.editAvailableAsCommand.name')
+```
+
+In WebStorm with the Easy I18n plugin configured, hovering over that `i18n.t()` will show you the expanded text.
+
+## For Developers
+
+> [!Warning] Do not extract strings by hand
+> It is just too time-consuming and too error-prone.
+> Find a tool in your IDE that will allow you to select text, give it a label and extract it to all languages.
+
+The flow for adding a new translation value - in WebStorm...
+
+Scenarios/topics:
+
+- Simple string
+- Simple string with interpolation
+- Beware of extra backticks
+- `yarn extract-i18n`
+
+## WebStorm Easy I18n
+
+- Action for extracting strings
+- Table and tree view
+  - Meaning of red text
+  - Meaning of orange text
+
+## For Translators
+
+We will find a website to make it easy to add new translations.

contributing/Welcome.md

@@ -21,6 +21,7 @@ Getting the most from this documentation:
 - See [[About Debugging]] for tips to debug the plugin
 - See [[About Code]] for descriptions of the project's source code
 - See [[About Documentation]] if you would like to improve and test the user docs
+- See [[About Translation]] if you are adding new text the plugin, and to help translate it
 
 ## For Maintainers
 

i18next-parser.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    input: ['src/**/*.{ts,svelte}'], // Scan relevant files
+    output: 'src/i18n/locales/$LOCALE.json', // Output files
+    locales: ['en', 'zh_cn'], // Supported locales
+    defaultNamespace: 'translation',
+    keySeparator: '.', // Use dots to represent nested keys
+    namespaceSeparator: false, // Disable namespace separation
+    interpolation: {
+        prefix: '{{', // Preserve placeholders like {{name}}
+        suffix: '}}',
+    },
+    useKeysAsDefaultValue: true, // Use keys for default values if no translation exists
+    resetDefaultValueLocale: null, // Retain existing default values
+    sort: true, // Sort keys alphabetically
+    keepRemoved: true, // Keep keys not found in source files
+    jsonIndent: 2, // Pretty-print JSON
+    lexers: {
+        ts: ['JavascriptLexer'], // TypeScript files
+        svelte: ['HTMLLexer'], // Svelte files
+    },
+};

package.json

@@ -15,6 +15,7 @@
     "test": "jest --ci",
     "test:dev": "jest --watch",
     "deploy:local": "pwsh -ExecutionPolicy Unrestricted -NoProfile -File ./scripts/Test-TasksInLocalObsidian.ps1",
+    "extract-i18n": "npx i18next-parser",
     "circular-deps-text": "madge --circular --extensions ts ./src > circular-deps.txt",
     "circular-deps-image": "madge --circular --extensions ts ./src --image circular-deps.png",
     "code-docs": "typedoc \"src/**/*\""
@@ -49,6 +50,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
+    "i18next-parser": "^9.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.5.0",
     "madge": "^8.0.0",
@@ -76,6 +78,8 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "eventemitter2": "^6.4.5",
     "flatpickr": "^4.6.13",
+    "i18next": "^24.2.1",
+    "i18next-browser-languagedetector": "^8.0.2",
     "mustache": "^4.2.0",
     "mustache-validator": "^0.2.0",
     "rrule": "^2.7.2",

src/Config/CustomStatusModal.ts

@@ -3,6 +3,7 @@ import type { Plugin } from 'obsidian';
 import { StatusConfiguration, StatusType } from '../Statuses/StatusConfiguration';
 import { StatusValidator } from '../Statuses/StatusValidator';
 import { Status } from '../Statuses/Status';
+import { i18n } from '../i18n/i18n';
 
 const validator = new StatusValidator();
 
@@ -49,10 +50,8 @@ export class CustomStatusModal extends Modal {
 
         let statusSymbolText: TextComponent;
         new Setting(settingDiv)
-            .setName('Task Status Symbol')
-            .setDesc(
-                'This is the character between the square braces. (It can only be edited for Custom statuses, and not Core statuses.)',
-            )
+            .setName(i18n.t('modals.customStatusModal.editStatusSymbol.name'))
+            .setDesc(i18n.t('modals.customStatusModal.editStatusSymbol.description'))
             .addText((text) => {
                 statusSymbolText = text;
                 text.setValue(this.statusSymbol).onChange((v) => {
@@ -68,8 +67,8 @@ export class CustomStatusModal extends Modal {
 
         let statusNameText: TextComponent;
         new Setting(settingDiv)
-            .setName('Task Status Name')
-            .setDesc('This is the friendly name of the task status.')
+            .setName(i18n.t('modals.customStatusModal.editStatusName.name'))
+            .setDesc(i18n.t('modals.customStatusModal.editStatusName.description'))
             .addText((text) => {
                 statusNameText = text;
                 text.setValue(this.statusName).onChange((v) => {
@@ -83,8 +82,8 @@ export class CustomStatusModal extends Modal {
 
         let statusNextSymbolText: TextComponent;
         new Setting(settingDiv)
-            .setName('Task Next Status Symbol')
-            .setDesc('When clicked on this is the symbol that should be used next.')
+            .setName(i18n.t('modals.customStatusModal.editNextStatusSymbol.name'))
+            .setDesc(i18n.t('modals.customStatusModal.editNextStatusSymbol.description'))
             .addText((text) => {
                 statusNextSymbolText = text;
                 text.setValue(this.statusNextSymbol).onChange((v) => {
@@ -100,8 +99,8 @@ export class CustomStatusModal extends Modal {
             });
 
         new Setting(settingDiv)
-            .setName('Task Status Type')
-            .setDesc('Control how the status behaves for searching and toggling.')
+            .setName(i18n.t('modals.customStatusModal.editStatusType.name'))
+            .setDesc(i18n.t('modals.customStatusModal.editStatusType.description'))
             .addDropdown((dropdown) => {
                 const types = [
                     StatusType.TODO,
@@ -119,11 +118,11 @@ export class CustomStatusModal extends Modal {
             });
 
         if (Status.tasksPluginCanCreateCommandsForStatuses()) {
+            // This feature is disabled as not-yet implemented.
+            // But we will apply the translation string now, for possible later use.
             new Setting(settingDiv)
-                .setName('Available as command')
-                .setDesc(
-                    'If enabled this status will be available as a command so you can assign a hotkey and toggle the status using it.',
-                )
+                .setName(i18n.t('modals.customStatusModal.editAvailableAsCommand.name'))
+                .setDesc(i18n.t('modals.customStatusModal.editAvailableAsCommand.description'))
                 .addToggle((toggle) => {
                     toggle.setValue(this.statusAvailableAsCommand).onChange(async (value) => {
                         this.statusAvailableAsCommand = value;
@@ -139,7 +138,8 @@ export class CustomStatusModal extends Modal {
                 .onClick(async () => {
                     const errors = validator.validate(this.statusConfiguration());
                     if (errors.length > 0) {
-                        const message = errors.join('\n') + '\n\n' + 'Fix errors before saving.';
+                        const message =
+                            errors.join('\n') + '\n\n' + i18n.t('modals.customStatusModal.fixErrorsBeforeSaving');
                         // console.debug(message);
                         new Notice(message);
                         return;

src/Config/Settings.ts

@@ -11,6 +11,7 @@ import { DefaultTaskSerializer, type TaskSerializer } from '../TaskSerializer';
 import type { SuggestionBuilder } from '../Suggestor';
 import type { LogOptions } from '../lib/logging';
 import { DataviewTaskSerializer } from '../TaskSerializer/DataviewTaskSerializer';
+import { i18n } from '../i18n/i18n';
 import { DebugSettings } from './DebugSettings';
 import { StatusSettings } from './StatusSettings';
 import { Feature } from './Feature';
@@ -29,8 +30,8 @@ export type HeadingState = {
  *
  */
 interface TaskFormat {
-    /** User facing name of the {@link TaskFormat} */
-    displayName: string;
+    /** Function that returns the user facing name of the {@link TaskFormat} */
+    getDisplayName: () => string;
     /** {@link TaskSerializer} responsible for reading Tasks from text and writing them back into text */
     taskSerializer: TaskSerializer;
     /** Function that generates Intellisense-like suggestions as a user is typing a Task */
@@ -40,12 +41,12 @@ interface TaskFormat {
 /** Map of all defined {@link TaskFormat}s */
 export const TASK_FORMATS = {
     tasksPluginEmoji: {
-        displayName: 'Tasks Emoji Format',
+        getDisplayName: () => i18n.t('settings.format.displayName.tasksEmojiFormat'),
         taskSerializer: new DefaultTaskSerializer(DEFAULT_SYMBOLS),
         buildSuggestions: makeDefaultSuggestionBuilder(DEFAULT_SYMBOLS, DEFAULT_MAX_GENERIC_SUGGESTIONS, false),
     },
     dataview: {
-        displayName: 'Dataview',
+        getDisplayName: () => i18n.t('settings.format.displayName.dataview'),
         taskSerializer: new DataviewTaskSerializer(),
         buildSuggestions: onlySuggestIfBracketOpen(
             makeDefaultSuggestionBuilder(DATAVIEW_SYMBOLS, DEFAULT_MAX_GENERIC_SUGGESTIONS, true),