i18n: Translate about page

Author: eliandoran

src/public/app/services/i18n.js

@@ -2,4 +2,25 @@ import library_loader from "./library_loader.js";
 
 await library_loader.requireLibrary(library_loader.I18NEXT);
 
+i18next.init({
+    lng: "en",
+    debug: true,
+    resources: {
+        en: {
+            translation: {
+                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:"
+                }
+            }
+        }
+    }
+});
+
 export const t = i18next.t;

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_date")}</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>