Implement i18n support in frontend using Angular + Transifex + NGINX

This PR adds basic i18n support into the mempool frontend, together with
a smooth workflow for developers and translators to collaborate:

* Using the existing @angular/localize module, developers add i18n
metadata to any frontend strings their new features or changes modify

* Using the new npm script `i18n-extract-from-source`, developers
extract the i18n data from source code into `src/locale/messages.xlf`

* After pushing the updated `src/locale/messages.xlf` to GitHub, the
Transifex service will update its database from the new source data

* Using the Transifex website UI, translators can work together to
translate all the mempool frontend strings into their native languages

* Using the new npm script `i18n-pull-from-transifex`, developers can
pull in completed translations from Transifex, and commit them into git.

This flow requires an API key from Transifex, which can be obtained at
https://www.transifex.com/user/settings/api/ to be used with the python
script installed by `pip install transifex-client` - after preparing
these, run the npm script which will ask you for the API key the first
time. When downloading is complete, you can test building the frontend,
and if successful, commit the new strings files into git.

This PR implements a new locale selector in the footer of the homepage
dashboard, and includes WIP translations for the following languages:

* Czech (cs)
* German (de)
* Japanese (ja)
* Norwegian (nn)
* Spanish (es)
* Swedish (sv)
* Ukrainian (uk)
* Persian (fa)
* Portugese (pt)
* Turkish (tr)
* Dutch (nl)
* French (fr)
* Chinese (zh)
* Slovenian (sl)
* Korean (ko)
* Polish (pl)

The user-agent's `Accept-Language` header is used to automatically
detect their preferred language, which can be manually overriden by the
pull-down selector, which saves their preference to a cookie, which is
used by nginx to serve the correct HTML bundle to the user.

Remaining tasks include adding i18n metadata for strings in the Bisq and
Liquid frontend code, mouseover hover tooltip strings, hard-coded og
metadata inside HTML templates, and many other places. This will be done
in a separate PR.

When upgrading to add i18n support, mempool instance operators must take
care to install the new nginx.conf and nginx-mempool.conf files, and
tweak for their specific site configuration.

Fixes #81

frontend/src/app/dashboard/dashboard.component.html

@@ -72,18 +72,18 @@
       <div class="col mb-4">
         <div class="card text-center">
           <div class="card-body">
-            <h5 class="card-title">Latest blocks</h5>
+            <h5 class="card-title" i18n="dashboard.latest-blocks">Latest blocks</h5>
             <table class="table table-borderless text-left">
               <thead>
-                <th style="width: 15%;">Height</th>
-                <th style="width: 35%;">Mined</th>
-                <th style="width: 20%;" class="d-none d-lg-table-cell">Txs</th>
-                <th style="width: 30%;">Filled</th>
+                <th style="width: 15%;" i18n="dashboard.latest-blocks.height">Height</th>
+                <th style="width: 35%;" i18n="dashboard.latest-blocks.mined">Mined</th>
+                <th style="width: 20%;" class="d-none d-lg-table-cell" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
+                <th style="width: 30%;" i18n="dashboard.latest-blocks.size">Size</th>
               </thead>
               <tbody>
                 <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
                   <td><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-                  <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</td>
+                  <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
                   <td class="d-none d-lg-table-cell">{{ block.tx_count | number }}</td>
                   <td>
                     <div class="progress position-relative">
@@ -94,27 +94,27 @@
                 </tr>
               </tbody>
             </table>
-            <div class="text-center"><a href="" [routerLink]="['/blocks' | relativeUrl]">View all &raquo;</a></div>
+            <div class="text-center"><a href="" [routerLink]="['/blocks' | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
           </div>
         </div>
       </div>
       <div class="col mb-4">
         <div class="card text-center">
           <div class="card-body">
-            <h5 class="card-title">Latest transactions</h5>
+            <h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
             <table class="table table-borderless text-left">
               <thead>
-                <th style="width: 20%;">TXID</th>
-                <th style="width: 35%;" class="text-right d-none d-lg-table-cell">Amount</th>
-                <th *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell">USD</th>
-                <th style="width: 25%;" class="text-right">Fee</th>
+                <th style="width: 20%;" i18n="dashboard.latest-transactions.txid">TXID</th>
+                <th style="width: 35%;" class="text-right d-none d-lg-table-cell" i18n="dashboard.latest-transactions.amount">Amount</th>
+                <th *ngIf="(network$ | async) === ''" style="width: 20%;" class="text-right d-none d-lg-table-cell" i18n="dashboard.latest-transactions.USD">USD</th>
+                <th style="width: 25%;" class="text-right" i18n="dashboard.latest-transactions.fee">Fee</th>
               </thead>
               <tbody>
                 <tr *ngFor="let transaction of transactions$ | async; let i = index;">
                   <td><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
                   <td class="text-right d-none d-lg-table-cell"><app-amount [satoshis]="transaction.value" digitsInfo="1.8-8" [noFiat]="true"></app-amount></td>
                   <td *ngIf="(network$ | async) === ''" class="text-right d-none d-lg-table-cell"><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
-                  <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} sat/vB</td>
+                  <td class="text-right">{{ transaction.fee / (transaction.weight / 4) | number : '1.1-1' }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
                 </tr>
               </tbody>
             </table>
@@ -133,8 +133,14 @@
     </div>
   </button>
 
+  <div [formGroup]="languageForm" class="text-small text-center mt-4">
+    <select formControlName="language" class="form-control form-control-secondary form-control-sm mx-auto" style="width: 130px;" (change)="changeLanguage()">
+      <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
+    </select>
+  </div>
+
   <div class="text-small text-center mt-3">
-    <a [routerLink]="['/terms-of-service']">Terms of Service</a>
+    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
   </div>
 
 </div>
@@ -153,15 +159,15 @@
   <table style="width: 100%;">
     <tr>
       <td>
-        <h5 class="card-title">Mempool size</h5>
+        <h5 class="card-title" i18n="dashboard.mempool-size|Mempool size">Mempool size</h5>
         <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">
-          {{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)
+          {{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} <span [hidden]="mempoolBlocksData.blocks == 1" i18n="dashboard.block">block</span><span [hidden]="mempoolBlocksData.blocks != 1">blocks</span>)
         </p>
       </td>
       <td>
-        <h5 class="card-title">Unconfirmed</h5>
+        <h5 class="card-title" i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</h5>
         <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
-          {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs
+          {{ mempoolInfoData.value.memPoolInfo.size | number }} <span i18n="dashboard.txs">TXs</span>
         </p>
       </td>
     </tr>
@@ -169,14 +175,14 @@
 </ng-template>
 
 <ng-template #txPerSecond let-mempoolInfoData>
-  <h5 class="card-title">Incoming transactions</h5>
+  <h5 class="card-title" i18n="dashboard.incoming-transactions">Incoming transactions</h5>
   <ng-template [ngIf]="mempoolInfoData.value" [ngIfElse]="loading">
     <span *ngIf="mempoolInfoData.value.vBytesPerSecond === 0; else inSync">
-      &nbsp;<span class="badge badge-pill badge-warning">Backend is synchronizing</span>
+      &nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span>
     </span>
     <ng-template #inSync>
       <div class="progress sub-text" style="max-width: 250px;">
-        <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} vB/s</div>
+        <div class="progress-bar {{ mempoolInfoData.value.progressClass }}" style="padding: 4px;" role="progressbar" [ngStyle]="{'width': mempoolInfoData.value.progressWidth}">{{ mempoolInfoData.value.vBytesPerSecond | ceil | number }} <ng-template i18n="shared.vbytes-per-second|vB/s">vB/s</ng-template></div>
       </div>
     </ng-template>
   </ng-template>
@@ -185,7 +191,7 @@
 <ng-template #difficultyEpoch>
   <div class="card text-center">
     <div class="card-body more-padding">
-      <h5 class="card-title">Difficulty adjustment</h5>
+      <h5 class="card-title" i18n="dashboard.difficulty-adjustment">Difficulty adjustment</h5>
       <div class="progress" *ngIf="(difficultyEpoch$ | async) as epochData; else loading">
         <div class="progress-bar" role="progressbar" style="width: 15%; background-color: #105fb0" [ngStyle]="{'width': epochData.base}"><ng-template [ngIf]="epochData.change > 0">+</ng-template>{{ epochData.change | number: '1.0-2' }}%</div>
         <div class="progress-bar bg-success" role="progressbar" style="width: 0%" [ngStyle]="{'width': epochData.green}"></div>
@@ -193,4 +199,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>

frontend/src/app/dashboard/dashboard.component.ts

@@ -7,10 +7,12 @@ import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interf
 import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
 import * as Chartist from '@mempool/chartist';
-import { formatDate } from '@angular/common';
+import { DOCUMENT, formatDate } from '@angular/common';
 import { WebsocketService } from '../services/websocket.service';
 import { SeoService } from '../services/seo.service';
 import { StorageService } from '../services/storage.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { languages, Language } from '../app.constants';
 
 interface MempoolBlocksData {
   blocks: number;
@@ -55,6 +57,8 @@ export class DashboardComponent implements OnInit {
   mempoolTransactionsWeightPerSecondData: any;
   mempoolStats$: Observable<MempoolStatsData>;
   transactionsWeightPerSecondOptions: any;
+  languageForm: FormGroup;
+  languages: Language[];
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -63,14 +67,22 @@ export class DashboardComponent implements OnInit {
     private websocketService: WebsocketService,
     private seoService: SeoService,
     private storageService: StorageService,
+    private formBuilder: FormBuilder,
+    @Inject(DOCUMENT) private document: Document
   ) { }
 
   ngOnInit(): void {
+    this.languages = languages;
     this.seoService.resetTitle();
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
     this.network$ = merge(of(''), this.stateService.networkChanged$);
     this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one';
 
+    this.languageForm = this.formBuilder.group({
+      language: ['']
+    });
+    this.setLanguageFromUrl();
+
     this.mempoolInfoData$ = combineLatest([
       this.stateService.mempoolInfo$,
       this.stateService.vbytesPerSecond$
@@ -232,4 +244,21 @@ export class DashboardComponent implements OnInit {
     }
     this.storageService.setValue('dashboard-collapsed', this.collapseLevel);
   }
+
+  setLanguageFromUrl() {
+    const urlLanguage = this.document.location.pathname.split('/')[1];
+    if (urlLanguage === '') {
+      this.languageForm.get('language').setValue('en');
+    } else if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) > -1) {
+      this.languageForm.get('language').setValue(urlLanguage);
+    }
+  }
+
+  changeLanguage() {
+    const language = this.languageForm.get('language').value;
+    this.document.location.href = (language === 'en' ? '/' : '/' + language);
+    try {
+      document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`;
+    } catch (e) { }
+  }
 }