i18n: First steps

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "lokalise.i18n-ally"
+    ]
+}

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,30 @@
+# An array of strings which contain Language Ids defined by VS Code
+# You can check available language ids here: https://code.visualstudio.com/docs/languages/identifiers
+languageIds:
+  - javascript
+  - typescript
+
+# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+usageMatchRegex:
+  # The following example shows how to detect `t("your.i18n.keys")`
+  # the `{key}` will be placed by a proper keypath matching regex,
+  # you can ignore it and use your own matching rules as well
+  - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+
+# A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
+# and works like how the i18next framework identifies the namespace scope from the
+# useTranslation() hook.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+scopeRangeRegex: "useTranslation\\(\\s*\\[?\\s*['\"`](.*?)['\"`]"
+
+# An array of strings containing refactor templates.
+# The "$1" will be replaced by the keypath specified.
+refactorTemplates:
+  - t("$1")
+
+
+# If set to true, only enables this custom framework (will disable all built-in frameworks)
+monopoly: true

.vscode/settings.json

@@ -2,5 +2,10 @@
     "editor.formatOnSave": false,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "files.eol": "\n",
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.keystyle": "nested",
+    "i18n-ally.localesPaths": [
+        "./src/public/translations"
+    ],
 }

package.json

@@ -77,6 +77,8 @@
     "html2plaintext": "2.1.4",
     "http-proxy-agent": "7.0.2",
     "https-proxy-agent": "^7.0.5",
+    "i18next": "^23.12.2",
+    "i18next-http-backend": "^2.5.2",
     "image-type": "4.1.0",
     "ini": "^4.1.3",
     "is-animated": "2.0.2",

src/public/app/services/i18n.js

@@ -0,0 +1,15 @@
+import library_loader from "./library_loader.js";
+
+await library_loader.requireLibrary(library_loader.I18NEXT);
+
+await i18next
+    .use(i18nextHttpBackend)
+    .init({
+        lng: "en",
+        debug: true,
+        backend: {
+            loadPath: `/${window.glob.assetPath}/translations/{{lng}}/{{ns}}.json`
+        }
+    });
+
+export const t = i18next.t;

src/public/app/services/library_loader.js

@@ -72,6 +72,13 @@ const MARKJS = {
     ]
 };
 
+const I18NEXT = {
+    js: [
+        "node_modules/i18next/i18next.min.js",
+        "node_modules/i18next-http-backend/i18nextHttpBackend.min.js"
+    ]
+};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => requireCss(cssUrl));
@@ -129,5 +136,6 @@ export default {
     FORCE_GRAPH,
     MERMAID,
     EXCALIDRAW,
-    MARKJS
+    MARKJS,
+    I18NEXT
 }

src/public/app/widgets/dialogs/about.js

@@ -1,13 +1,14 @@
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
+import { t } from "../../services/i18n.js";
 import BasicWidget from "../basic_widget.js";
 
 const TPL = `
 <div class="about-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">About TriliumNext Notes</h5>
+                <h5 class="modal-title mr-auto">${t("about.title")}</h5>
 
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0;">
                     <span aria-hidden="true">&times;</span>
@@ -16,33 +17,33 @@ const TPL = `
             <div class="modal-body">
                 <table class="table table-borderless">
                     <tr>
-                        <th>Homepage:</th>
+                        <th>${t("about.homepage")}</th>
                         <td><a href="https://github.com/TriliumNext/Notes" class="external">https://github.com/TriliumNext/Notes</a></td>
                     </tr>
                     <tr>
-                        <th>App version:</th>
+                        <th>${t("about.app_version")}</th>
                         <td class="app-version"></td>
                     </tr>
                     <tr>
-                        <th>DB version:</th>
+                        <th>${t("about.db_version")}</th>
                         <td class="db-version"></td>
                     </tr>
                     <tr>
-                        <th>Sync version:</th>
+                        <th>${t("about.sync_version")}</th>
                         <td class="sync-version"></td>
                     </tr>
                     <tr>
-                        <th>Build date:</th>
+                        <th>${t("about.build_date")}</th>
                         <td class="build-date"></td>
                     </tr>
 
                     <tr>
-                        <th>Build revision:</th>
+                        <th>${t("about.build_revision")}</th>
                         <td><a href="" class="build-revision external" target="_blank"></a></td>
                     </tr>
 
                     <tr>
-                        <th>Data directory:</th>
+                        <th>${t("about.data_directory")}</th>
                         <td class="data-directory"></td>
                     </tr>
                 </table>

src/public/translations/en/translation.json

@@ -0,0 +1,12 @@
+{
+    "about": {
+        "title": "About TriliumNext Notes",
+        "homepage": "Homepage:",
+        "app_version": "App version:",
+        "db_version": "DB version:",
+        "sync_version": "Sync version:",
+        "build_date": "Build date:",
+        "build_revision": "Build revision:",
+        "data_directory": "Data directory:"
+    }
+}

src/public/translations/ro/translation.json

@@ -0,0 +1,12 @@
+{
+    "about": {
+        "title": "Despre TriliumNext Notes",
+        "homepage": "Site web:",
+        "app_version": "Versiune aplicație:",
+        "db_version": "Versiune bază de date:",
+        "sync_version": "Versiune sincronizare:",
+        "build_date": "Data compilării:",
+        "build_revision": "Revizia compilării:",
+        "data_directory": "Directorul de date:"
+    }
+}

src/routes/assets.ts

@@ -69,6 +69,11 @@ function register(app: express.Application) {
     app.use(`/${assetPath}/node_modules/split.js/dist/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/split.js/dist/')));
 
     app.use(`/${assetPath}/node_modules/panzoom/dist/`, persistentCacheStatic(path.join(srcRoot, '..', 'node_modules/panzoom/dist/')));
+
+    // i18n
+    app.use(`/${assetPath}/node_modules/i18next/`, persistentCacheStatic(path.join(srcRoot, "..", 'node_modules/i18next/')));
+    app.use(`/${assetPath}/node_modules/i18next-http-backend/`, persistentCacheStatic(path.join(srcRoot, "..", 'node_modules/i18next-http-backend/')));
+    app.use(`/${assetPath}/translations/`, persistentCacheStatic(path.join(srcRoot, "public", "translations/")));
 }
 
 export = {