Add i18n support

_redirects

@@ -1 +1,2 @@
-* /index.html
+/ /en-US/index.html
+/:lang/* /:lang/index.html

angular.json

@@ -10,6 +10,15 @@
   "projects": {
     "ctrl": {
       "projectType": "application",
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "zh-CN": {
+            "translation": "src/locale/messages.zh-CN.xlf",
+            "baseHref": "/zh-CN/"
+          }
+        }
+      },
       "schematics": {
         "@schematics/angular:component": {
           "style": "sass",

package.json

@@ -5,6 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:i18n": "ng build --localize",
+    "extract-i18n": "ng extract-i18n --output-path src/locale",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
@@ -15,6 +17,7 @@
     "@angular/compiler": "^16.2.12",
     "@angular/core": "^16.2.12",
     "@angular/forms": "^16.2.12",
+    "@angular/localize": "^16.2.12",
     "@angular/platform-browser": "^16.2.12",
     "@angular/platform-browser-dynamic": "^16.2.12",
     "@angular/router": "^16.2.12",
@@ -25,7 +28,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.12",
-    "@angular/cli": "~16.2.12",
+    "@angular/cli": "^16.2.12",
     "@angular/compiler-cli": "^16.2.12",
     "@types/jasmine": "~4.3.0",
     "@types/w3c-web-usb": "^1.0.6",

src/components/central/central.html

@@ -16,8 +16,8 @@
         <div class='icon'>
             <span class='material'>stadia_controller</span>
         </div>
-        <div class='title'>Controller not found</div>
-        <button routerLink='help/windows'>How to setup</button>
+        <div class='title' i18n>Controller not found</div>
+        <button routerLink='help/windows' i18n>How to setup</button>
     </div>
 </div>
 
@@ -29,10 +29,10 @@
         <div class='icon'>
             <span class='material'>heart_broken</span>
         </div>
-        <div class='title'>There was a problem</div>
+        <div class='title' i18n>There was a problem</div>
         <div><span class='code slim'>{{webusb.getFailedError()}}</span></div>
         <div class='hint'>{{webusb.getFailedHint()}}</div>
-        <button routerLink='help/windows'>How to setup</button>
+        <button routerLink='help/windows' i18n>How to setup</button>
     </div>
 </div>
 
@@ -45,8 +45,8 @@
             <span class='material'>report</span>
         </div>
         <div>&nbsp;</div>
-        <div class='title'>Browser not compatible</div>
-        <div class='msg'>
+        <div class='title' i18n>Browser not compatible</div>
+        <div class='msg' i18n>
             This browser do not support
             <a href='https://caniuse.com/webusb' target='_blank'>WebUSB</a>
         </div>

src/components/header/header.html

@@ -13,6 +13,7 @@
         <a
             routerLink='{{lastRouteForSettings}}'
             [ngClass]='this.routeIsSettings()'
+            i18n
             >
             Settings
         </a>
@@ -21,6 +22,7 @@
         <a
             routerLink='{{lastRouteForProfiles}}'
             routerLinkActive='active'
+            i18n
             >
             Profiles
         </a>
@@ -29,6 +31,7 @@
         <a
             routerLink='help'
             routerLinkActive='active'
+            i18n
             >
             Help
         </a>
@@ -57,15 +60,15 @@
             </div>
         </div>
         <div class='add' (click)='webusb.requestDevice()'>
-            <span *ngIf='!webusb.isConnectedRaw()'>Add device</span>
+            <span *ngIf='!webusb.isConnectedRaw()' i18n>Add device</span>
             <span class='material'>add</span>
         </div>
     </div>
 </div>
 
 <dialog id='dialog-firmware' *ngIf='webusb.isConnected()'>
-    <h3>Firmware update required</h3>
-    <div>
+    <h3 i18n>Firmware update required</h3>
+    <div i18n>
         {{webusb.selectedDevice!.getConnectorName()}} firmware is outdated, the Ctrl app won't work correctly.<br/>
         <br/>
         Current {{webusb.selectedDevice!.getConnectorName()}}
@@ -74,19 +77,19 @@ <h3>Firmware update required</h3>
         <a [href]='RELEASES_LINK' target='_blank'>Check latest firmware releases</a>
     </div>
     <div class='buttons'>
-        <button (click)='hideDialog() && firmwareAck()'>Got it!</button>
+        <button (click)='hideDialog() && firmwareAck()' i18n>Got it!</button>
     </div>
 </dialog>
 
 <dialog id='dialog-serial'>
-    <h3>Controller model undefined</h3>
-    <div>
+    <h3 i18n>Controller model undefined</h3>
+    <div i18n>
         The identifier for the controller model cannot be read.
         The app functionality is limited without this piece of information.
         <br/><br/>
         A privacy protector (for example Brave Shields) could be blocking the access to it.
     </div>
     <div class='buttons'>
-        <button (click)='hideDialog()'>Close</button>
+        <button (click)='hideDialog()' i18n>Close</button>
     </div>
 </dialog>

src/components/help/help_deck.html

@@ -3,28 +3,28 @@
 Copyright (C) 2023, Input Labs Oy.
 -->
 
-<h2>Setup in Steam Deck / Arch Linux</h2>
+<h2 i18n>Setup in Steam Deck / Arch Linux</h2>
 <hr/>
 
-<h3>Compatible browsers</h3>
+<h3 i18n>Compatible browsers</h3>
 <ul>
-    <li>Chrome / Chromium.</li>
-    <li>Brave.</li>
+    <li i18n>Chrome / Chromium.</li>
+    <li i18n>Brave.</li>
 </ul>
-<i>(Install with Discover)</i>
+<i i18n>(Install with Discover)</i>
 <hr/>
 
-<h3>Protocol mode</h3>
+<h3 i18n>Protocol mode</h3>
 <ul>
-    <li>Controller must be either in <em>Linux Xinput</em> mode, or in <em>Generic</em> mode.</li>
-    <li>Each mode have to be paired individually.</li>
+    <li i18n>Controller must be either in <em>Linux XInput</em> mode, or in <em>Generic</em> mode.</li>
+    <li i18n>Each mode have to be paired individually.</li>
 </ul>
 <hr/>
 
-<h3>Pair controller</h3>
+<h3 i18n>Pair controller</h3>
 <ul>
-    <li>Click the <span class='color' (click)='webusb.requestDevice()'>Add device +</span> button on the top right corner.</li>
-    <li>Select <em>Alpakka</em>, <em>Kapybara</em>, or <em>Dongle</em> from the list.</li>
+    <li i18n>Click the <span class='color' (click)='webusb.requestDevice()'>Add device +</span> button on the top right corner.</li>
+    <li i18n>Select <em>Alpakka</em>, <em>Kapybara</em>, or <em>Dongle</em> from the list.</li>
 </ul>
 
 

src/components/help/help_linux.html

@@ -3,43 +3,43 @@
 Copyright (C) 2023, Input Labs Oy.
 -->
 
-<h2>Setup in Debian / Ubuntu</h2>
+<h2 i18n>Setup in Debian / Ubuntu</h2>
 <hr/>
 
-<h3>Compatible browsers</h3>
+<h3 i18n>Compatible browsers</h3>
 <ul>
-    <li>Chrome / Chromium.</li>
-    <li>Brave.</li>
+    <li i18n>Chrome / Chromium.</li>
+    <li i18n>Brave.</li>
 </ul>
 <hr/>
 
-<h3>Protocol mode</h3>
+<h3 i18n>Protocol mode</h3>
 <ul>
-    <li>Controller must be either in <em>Linux XInput</em> mode, or in <em>Generic</em> mode.</li>
-    <li>Each mode have to be paired individually.</li>
+    <li i18n>Controller must be either in <em>Linux XInput</em> mode, or in <em>Generic</em> mode.</li>
+    <li i18n>Each mode have to be paired individually.</li>
 </ul>
 <hr/>
 
-<h3>Pair controller</h3>
+<h3 i18n>Pair controller</h3>
 <ul>
-    <li>Click the <span class='color' (click)='webusb.requestDevice()'>Add device +</span> button on the top right corner.</li>
-    <li>Select <em>Alpakka</em>, <em>Kapybara</em>, or <em>Dongle</em> from the list.</li>
+    <li i18n>Click the <span class='color' (click)='webusb.requestDevice()'>Add device +</span> button on the top right corner.</li>
+    <li i18n>Select <em>Alpakka</em>, <em>Kapybara</em>, or <em>Dongle</em> from the list.</li>
 </ul>
 <hr/>
 
-<h3>Known issues</h3>
-<p>The controller may have to be unplugged and plugged at least once after opening the browser.</p>
+<h3 i18n>Known issues</h3>
+<p i18n>The controller may have to be unplugged and plugged at least once after opening the browser.</p>
 
 <hr/>
-<h3>Additional OS configuration</h3>
-<p>Some distros may require additional Udev rules to allow access to USB devices.</p>
-<p>Create a file with udev rules:</p>
+<h3 i18n>Additional OS configuration</h3>
+<p i18n>Some distros may require additional Udev rules to allow access to USB devices.</p>
+<p i18n>Create a file with udev rules:</p>
 <p><span class='code'>sudo nano /etc/udev/rules.d/99-alpakka.rules</span></p>
 <div class='code'>
     <pre>
 {{'SUBSYSTEMS=="usb", ATTRS{idVendor}=="045e", MODE="0660", GROUP="plugdev", SYMLINK+="webusb"'}}
 {{'SUBSYSTEMS=="usb", ATTRS{idVendor}=="0170", MODE="0660", GROUP="plugdev", SYMLINK+="webusb"'}}</pre>
 </div>
-<p>Reconnect the controller and verify the rule has been loaded by checking if <span class='code'>/dev/webusb</span> exist.</p>
-<p>If Chromium was installed using <em>Snap</em>, it may require additional permissions to access USB devices:</p>
+<p i18n>Reconnect the controller and verify the rule has been loaded by checking if <span class='code'>/dev/webusb</span> exist.</p>
+<p i18n>If Chromium was installed using <em>Snap</em>, it may require additional permissions to access USB devices:</p>
 <span class='code'>snap connect chromium:raw-usb</span>