typebytes · MSakamaki · Jun 24, 2019
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,7 @@
 /out-tsc
 
 # generated content
-content.json
+content.*.json
 
 # dependencies
 /node_modules

diff --git a/TRANSLATION.md b/TRANSLATION.md
@@ -0,0 +1,44 @@
+# Translation Guide
+
+## Add languages
+
+The following tasks are required to add a new language.
+[See available code here](https://github.com/angular/angular/tree/master/packages/common/locales).
+
+- Copy production into the configurations section of angular.json to create production build settings for the language.
+- Add rewrites for the language to the `rewrites` of `firebase.json`.
+- Add languages to the languages in `xliffmerge.json` (And do `yarn i18n`).
+- Add languages to `langages`, an array of `tools/utils.ts` files.
+- Let's make build environment for language in `build:ssr` in scripts of package.json.
+- Register localeData of the language to be added to `app.module.ts` using `registerLocaleData()`.
+https://angular.io/guide/i18n#i18n-pipes
+- Add a language to the languages propety of `src/app/shared/footer/footer.component.ts`.
+- Make a target language directory by copying `en-US` in the content directory. And then run `yarn build-content`.
+
+Hooray! Now you can choose a new language.
+
+## Do translation
+
+There are two types of translation: translation of the application using angular i18n and translation of the main content composed of markdown.
+
+### Application translation
+
+Please read the [angular i18n](https://angular.io/guide/i18n) documentation once.
+
+Translate the app by editing `src/locale/messages.[language code].xlf`.
+It is difficult to edit xlf file manually, so use something like a tool.
+
+Tool Example: https://poedit.net/
+
+### Translation of content
+
+Translation of content is editing files in the `content/[target lang]` directory.
+
+You don't have to make all the files at once. but when it's missing it will be displayed in original English.
+
+**Note:** If you set char such as `*` or `@` at the beginning of metadata such as `title:`, the translation will be broken.
+Use double-byte characters or devise a text.
+
+## Reflect the translated content
+
+See [CONTRIBUTING.md](https://github.com/angular-checklist/angular-checklist/blob/master/CONTRIBUTING.md).
diff --git a/angular.json b/angular.json
@@ -43,7 +43,31 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
+              "buildOptimizer": true,
+              "outputPath": "dist/browser/en-US",
+              "baseHref": "/en-US/"
+            },
+            "ja": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "outputPath": "dist/browser/ja",
+              "baseHref": "/ja/",
+              "i18nFile": "src/locale/messages.ja.xlf",
+              "i18nFormat": "xlf",
+              "i18nLocale": "ja"
             }
           }
         },

diff --git a/content/architecture/.category → content/en-US/architecture/.category b/content/architecture/.category → content/en-US/architecture/.category
diff --git a/content/architecture/never-mutate-objects.md → ...n-US/architecture/never-mutate-objects.md b/content/architecture/never-mutate-objects.md → ...n-US/architecture/never-mutate-objects.md
diff --git a/.../provide-shared-services-on-root-level.md → .../provide-shared-services-on-root-level.md b/.../provide-shared-services-on-root-level.md → .../provide-shared-services-on-root-level.md
diff --git a/...cture/put-business-logic-into-services.md → ...cture/put-business-logic-into-services.md b/...cture/put-business-logic-into-services.md → ...cture/put-business-logic-into-services.md
diff --git a/...rchitecture/use-descriptive-file-names.md → ...rchitecture/use-descriptive-file-names.md b/...rchitecture/use-descriptive-file-names.md → ...rchitecture/use-descriptive-file-names.md
diff --git a/...itecture/use-smart-and-dumb-components.md → ...itecture/use-smart-and-dumb-components.md b/...itecture/use-smart-and-dumb-components.md → ...itecture/use-smart-and-dumb-components.md
diff --git a/content/components/.category → content/en-US/components/.category b/content/components/.category → content/en-US/components/.category
diff --git a/...nts/clean-up-resource-in-ng-on-destroy.md → ...nts/clean-up-resource-in-ng-on-destroy.md b/...nts/clean-up-resource-in-ng-on-destroy.md → ...nts/clean-up-resource-in-ng-on-destroy.md
diff --git a/...operty-bindings-to-pass-static-strings.md → ...operty-bindings-to-pass-static-strings.md b/...operty-bindings-to-pass-static-strings.md → ...operty-bindings-to-pass-static-strings.md
diff --git a/...components/minimize-logic-in-templates.md → ...components/minimize-logic-in-templates.md b/...components/minimize-logic-in-templates.md → ...components/minimize-logic-in-templates.md
diff --git a/...nt/components/ng-oninit-vs-constructor.md → ...US/components/ng-oninit-vs-constructor.md b/...nt/components/ng-oninit-vs-constructor.md → ...US/components/ng-oninit-vs-constructor.md
diff --git a/...ly-manipulate-the-dom-via-the-renderer.md → ...ly-manipulate-the-dom-via-the-renderer.md b/...ly-manipulate-the-dom-via-the-renderer.md → ...ly-manipulate-the-dom-via-the-renderer.md
diff --git a/content/general/.category → content/en-US/general/.category b/content/general/.category → content/en-US/general/.category
diff --git a/...neral/use-latest-version-of-everything.md → ...neral/use-latest-version-of-everything.md b/...neral/use-latest-version-of-everything.md → ...neral/use-latest-version-of-everything.md
diff --git a/content/http/.category → content/en-US/http/.category b/content/http/.category → content/en-US/http/.category
diff --git a/...nt/http/dont-reimport-httpclientmodule.md → ...US/http/dont-reimport-httpclientmodule.md b/...nt/http/dont-reimport-httpclientmodule.md → ...US/http/dont-reimport-httpclientmodule.md
diff --git a/content/ngrx/.category → content/en-US/ngrx/.category b/content/ngrx/.category → content/en-US/ngrx/.category
diff --git a/content/ngrx/action-hygiene.md → content/en-US/ngrx/action-hygiene.md b/content/ngrx/action-hygiene.md → content/en-US/ngrx/action-hygiene.md
diff --git a/...nt/ngrx/actions-are-defined-as-classes.md → ...US/ngrx/actions-are-defined-as-classes.md b/...nt/ngrx/actions-are-defined-as-classes.md → ...US/ngrx/actions-are-defined-as-classes.md
diff --git a/...grx/do-not-put-everything-in-the-store.md → ...grx/do-not-put-everything-in-the-store.md b/...grx/do-not-put-everything-in-the-store.md → ...grx/do-not-put-everything-in-the-store.md
diff --git a/...x/dont-store-state-that-can-be-derived.md → ...x/dont-store-state-that-can-be-derived.md b/...x/dont-store-state-that-can-be-derived.md → ...x/dont-store-state-that-can-be-derived.md
diff --git a/content/ngrx/reducers-are-pure-functions.md → ...en-US/ngrx/reducers-are-pure-functions.md b/content/ngrx/reducers-are-pure-functions.md → ...en-US/ngrx/reducers-are-pure-functions.md
diff --git a/content/ngrx/use-entity-pattern.md → content/en-US/ngrx/use-entity-pattern.md b/content/ngrx/use-entity-pattern.md → content/en-US/ngrx/use-entity-pattern.md
diff --git a/content/ngrx/use-selectors.md → content/en-US/ngrx/use-selectors.md b/content/ngrx/use-selectors.md → content/en-US/ngrx/use-selectors.md
diff --git a/content/performance/.category → content/en-US/performance/.category b/content/performance/.category → content/en-US/performance/.category
diff --git a/.../performance/track-by-option-on-ng-for.md → .../performance/track-by-option-on-ng-for.md b/.../performance/track-by-option-on-ng-for.md → .../performance/track-by-option-on-ng-for.md
diff --git a/content/performance/use-aot-compilation.md → .../en-US/performance/use-aot-compilation.md b/content/performance/use-aot-compilation.md → .../en-US/performance/use-aot-compilation.md
diff --git a/...nt/performance/use-on-push-cd-strategy.md → ...US/performance/use-on-push-cd-strategy.md b/...nt/performance/use-on-push-cd-strategy.md → ...US/performance/use-on-push-cd-strategy.md
diff --git a/content/router/.category → content/en-US/router/.category b/content/router/.category → content/en-US/router/.category
diff --git a/content/router/add-404-route.md → content/en-US/router/add-404-route.md b/content/router/add-404-route.md → content/en-US/router/add-404-route.md
diff --git a/content/router/default-route.md → content/en-US/router/default-route.md b/content/router/default-route.md → content/en-US/router/default-route.md
diff --git a/content/router/lazy-load-feature-modules.md → ...en-US/router/lazy-load-feature-modules.md b/content/router/lazy-load-feature-modules.md → ...en-US/router/lazy-load-feature-modules.md
diff --git a/...r/protect-restricted-pages-with-guards.md → ...r/protect-restricted-pages-with-guards.md b/...r/protect-restricted-pages-with-guards.md → ...r/protect-restricted-pages-with-guards.md
diff --git a/content/router/use-preloading-strategy.md → ...t/en-US/router/use-preloading-strategy.md b/content/router/use-preloading-strategy.md → ...t/en-US/router/use-preloading-strategy.md
diff --git a/content/rxjs/.category → content/en-US/rxjs/.category b/content/rxjs/.category → content/en-US/rxjs/.category
diff --git a/content/rxjs/avoid-nested-subscriptions.md → .../en-US/rxjs/avoid-nested-subscriptions.md b/content/rxjs/avoid-nested-subscriptions.md → .../en-US/rxjs/avoid-nested-subscriptions.md
diff --git a/content/rxjs/pipeable-operators.md → content/en-US/rxjs/pipeable-operators.md b/content/rxjs/pipeable-operators.md → content/en-US/rxjs/pipeable-operators.md
diff --git a/content/rxjs/takeuntil-operator.md → content/en-US/rxjs/takeuntil-operator.md b/content/rxjs/takeuntil-operator.md → content/en-US/rxjs/takeuntil-operator.md
diff --git a/content/rxjs/use-async-pipe.md → content/en-US/rxjs/use-async-pipe.md b/content/rxjs/use-async-pipe.md → content/en-US/rxjs/use-async-pipe.md
diff --git a/content/rxjs/use-ngifas.md → content/en-US/rxjs/use-ngifas.md b/content/rxjs/use-ngifas.md → content/en-US/rxjs/use-ngifas.md
diff --git a/...tchMap-only-when-you-need-cancellation.md → ...tchMap-only-when-you-need-cancellation.md b/...tchMap-only-when-you-need-cancellation.md → ...tchMap-only-when-you-need-cancellation.md
diff --git a/content/tooling/.category → content/en-US/tooling/.category b/content/tooling/.category → content/en-US/tooling/.category
diff --git a/content/tooling/compodoc.md → content/en-US/tooling/compodoc.md b/content/tooling/compodoc.md → content/en-US/tooling/compodoc.md
diff --git a/content/tooling/use-angular-cli.md → content/en-US/tooling/use-angular-cli.md b/content/tooling/use-angular-cli.md → content/en-US/tooling/use-angular-cli.md
diff --git a/content/tooling/use-prettier.md → content/en-US/tooling/use-prettier.md b/content/tooling/use-prettier.md → content/en-US/tooling/use-prettier.md
diff --git a/content/typescript/.category → content/en-US/typescript/.category b/content/typescript/.category → content/en-US/typescript/.category
diff --git a/content/typescript/avoid-using-any.md → content/en-US/typescript/avoid-using-any.md b/content/typescript/avoid-using-any.md → content/en-US/typescript/avoid-using-any.md
diff --git a/...ypescript/define-interfaces-for-models.md → ...ypescript/define-interfaces-for-models.md b/...ypescript/define-interfaces-for-models.md → ...ypescript/define-interfaces-for-models.md
diff --git a/...fine-types-at-the-non-typed-boundaries.md → ...fine-types-at-the-non-typed-boundaries.md b/...fine-types-at-the-non-typed-boundaries.md → ...fine-types-at-the-non-typed-boundaries.md
diff --git a/...script/move-common-types-to-interfaces.md → ...script/move-common-types-to-interfaces.md b/...script/move-common-types-to-interfaces.md → ...script/move-common-types-to-interfaces.md
diff --git a/content/typescript/use-type-inference.md → ...nt/en-US/typescript/use-type-inference.md b/content/typescript/use-type-inference.md → ...nt/en-US/typescript/use-type-inference.md
diff --git a/firebase.json b/firebase.json
@@ -7,10 +7,23 @@
       "**/node_modules/**"
     ],
     "rewrites": [
+      {
+        "source": "/en-US/**",
+        "destination": "/en-US/index.html"
+      },
+      {
+        "source": "/ja/**",
+        "destination": "/ja/index.html"
+      },
       {
         "source": "**",
-        "destination": "/index.html"
+        "destination": "/en-US/index.html"
       }
-    ]
+    ],
+    "redirects": [{
+      "source" : "/",
+      "destination" : "/en-US",
+      "type" : 301
+    }]
   }
 }
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "ng": "ng",
     "start": "concurrently \"ng serve\" \"yarn build-content:watch\"",
     "build": "ng build",
-    "build:ssr": "ng build --prod && ng run angular-checklist:server -- --output-hashing=none",
+    "build:ssr": "ng build --prod && ng build -c ja && ng run angular-checklist:server -- --output-hashing=none",
     "prerender": "npm run build:ssr && ts-node prerender.ts",
     "serve:ssr": "npm run prerender && http-server dist/browser",
     "test": "ng test",
@@ -16,7 +16,8 @@
     "ci": "npm run build-content && ng build --prod",
     "format:base": "prettier \"{src,tools,cypress}/**/*{.ts,.js,.json,.html}\"",
     "format:check": "npm run format:base -- --list-different",
-    "format:fix": "npm run format:base -- --write"
+    "format:fix": "npm run format:base -- --write",
+    "i18n": "ng xi18n --output-path locale/ --i18n-locale en && xliffmerge --profile xliffmerge.json"
   },
   "husky": {
     "hooks": {
@@ -58,6 +59,7 @@
     "highlight.js": "^9.13.1",
     "lodash.groupby": "^4.6.0",
     "ngrx-store-localstorage": "^5.1.0",
+    "ngx-i18nsupport": "^0.17.1",
     "normalize.css": "^8.0.0",
     "rxjs": "^6.3.3",
     "tslib": "^1.9.0",

diff --git a/prerender.ts b/prerender.ts
@@ -14,7 +14,7 @@ enableProdMode();
 
 const ROUTES = ['/', '/checklist'];
 const DIST_FOLDER = join(process.cwd(), 'dist');
-const BROWSER_FOLDER = join(DIST_FOLDER, 'browser');
+const BROWSER_FOLDER = join(DIST_FOLDER, 'browser/en-US');
 
 const index = readFileSync(join(BROWSER_FOLDER, 'index.html'), 'utf8');
 

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,17 +1,22 @@
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID, Inject } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { registerLocaleData } from '@angular/common';
+import localeJa from '@angular/common/locales/ja';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { PreloadAllModules, RouterModule } from '@angular/router';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
-import { StoreModule } from '@ngrx/store';
+import { StoreModule, Store } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { environment } from '../environments/environment';
 import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
 import { ChecklistModule } from './checklist/checklist.module';
 import { CustomMaterialModule } from './custom-material.module';
 import { ProjectsModule } from './projects/projects.module';
-import { META_REDUCERS, ROOT_REDUCER } from './state/app.state';
+import { META_REDUCERS, ROOT_REDUCER, ApplicationState } from './state/app.state';
+import { SetLangageCode } from './checklist/state/checklist.actions';
+
+registerLocaleData(localeJa, 'ja');
 
 @NgModule({
   declarations: [AppComponent],
@@ -33,4 +38,8 @@ import { META_REDUCERS, ROOT_REDUCER } from './state/app.state';
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+  constructor(@Inject(LOCALE_ID) locale: string, store: Store<ApplicationState>) {
+    store.dispatch(new SetLangageCode(locale));
+  }
+}
diff --git a/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html b/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html
@@ -2,15 +2,15 @@
   <div class="filters" *ngIf="filter">
     <button class="filter" mat-button (click)="filterChange.emit('ALL')" [class.active]="filter === 'ALL'">
       <mat-icon>assignment</mat-icon>
-      ALL
+      <ng-container i18n="@@checlistCtaBarAll">ALL</ng-container>
     </button>
     <button class="filter" mat-button (click)="filterChange.emit('DONE')" [class.active]="filter === 'DONE'">
       <mat-icon>done</mat-icon>
-      DONE
+      <ng-container i18n="@@checlistCtaBarDone">DONE</ng-container>
     </button>
     <button class="filter" mat-button (click)="filterChange.emit('TODO')" [class.active]="filter === 'TODO'">
       <mat-icon>check_box_outline_blank</mat-icon>
-      TODO
+      <ng-container i18n="@@checlistCtaBarToto">TODO</ng-container>
     </button>
   </div>
   <div class="cta-buttons" *ngIf="showActionButtons">

diff --git a/src/app/checklist/checklist-detail-view/checklist-detail-view.component.html b/src/app/checklist/checklist-detail-view/checklist-detail-view.component.html
@@ -1,6 +1,8 @@
 <ng-container *ngIf="(item$ | async) as item">
   <header>
-    <mat-checkbox color="primary" (click)="toggleItem(item)" [checked]="item.checked">Done</mat-checkbox>
+    <mat-checkbox color="primary" (click)="toggleItem(item)" [checked]="item.checked" i18n="@@checkListDetailDone"
+      >Done</mat-checkbox
+    >
     <ac-checklist-favorite-button
       (toggle)="toggleFavorite(item)"
       [active]="item.favorite"

diff --git a/src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html b/src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html
@@ -21,7 +21,7 @@ <h4>{{ favorite.category.title }}</h4>
   <ng-template #noFavorites>
     <div class="no-favorites">
       <img src="assets/undraw_no_data.svg" alt="No Data" />
-      <span>You have no favorites yet... but they are only a few clicks away!</span>
+      <span i18n="@@checklistViewNoFavorites">You have no favorites yet... but they are only a few clicks away!</span>
     </div>
   </ng-template>
 </ng-container>
diff --git a/src/app/checklist/checklist-item-metadata/checklist-metadata.component.html b/src/app/checklist/checklist-item-metadata/checklist-metadata.component.html
@@ -1,2 +1,2 @@
 <a class="info author" [href]="author.url" *ngIf="author">{{ author.name }}</a>
-<a class="info link" [href]="source" *ngIf="source">Source</a>
+<a class="info link" [href]="source" *ngIf="source" i18n="@@checklistMetadataSource">Source</a>
diff --git a/src/app/checklist/checklist.component.html b/src/app/checklist/checklist.component.html
@@ -9,7 +9,9 @@
     bindValue="id"
   >
     <ac-dropdown-static-options>
-      <ac-dropdown-static-option routerLink="/"> <mat-icon>edit</mat-icon> Manage Projects </ac-dropdown-static-option>
+      <ac-dropdown-static-option routerLink="/">
+        <mat-icon>edit</mat-icon> <ng-container i18n="@@confirmDialogManageProjects">Manage Projects</ng-container>
+      </ac-dropdown-static-option>
     </ac-dropdown-static-options>
   </ac-dropdown>
   <ac-checklist-search *ngIf="(mediumUp$ | async)"></ac-checklist-search>
@@ -26,15 +28,16 @@
               [matBadgeHidden]="!(favoritesCount$ | async)"
               matBadgeColor="accent"
               matBadgeOverlap="false"
+              i18n="@@confirmDialogFavorites"
               >Favorites</span
             >
           </a>
         </nav>
       </section>
       <section class="category-list-wrapper">
         <div class="section-header">
-          <h4>CATEGORIES</h4>
-          <mat-slide-toggle (change)="toggleEditMode()">Edit</mat-slide-toggle>
+          <h4 i18n="@@confirmDialogHeader">CATEGORIES</h4>
+          <mat-slide-toggle (change)="toggleEditMode()" i18n="@@confirmDialogEdit">Edit</mat-slide-toggle>
         </div>
         <div class="category-list">
           <nav class="category" *ngFor="let category of (categories$ | async); trackBy: trackBySlug">
@@ -61,7 +64,9 @@ <h4>CATEGORIES</h4>
   </mat-sidenav>
   <mat-sidenav-content>
     <div class="scroll-container"><router-outlet></router-outlet></div>
-    <div *ngIf="editMode" class="overlay"><span>🧐 Ups, seems like you're in edit mode!</span></div>
+    <div *ngIf="editMode" class="overlay">
+      <span i18n="@@confirmDialogUpsEditMode">🧐 Ups, seems like you're in edit mode!</span>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>
 <ac-footer></ac-footer>
diff --git a/src/app/checklist/confirmation-dialog/confirmation-dialog.component.html b/src/app/checklist/confirmation-dialog/confirmation-dialog.component.html
@@ -1,6 +1,6 @@
 <h1 mat-dialog-title>{{ data.title }}</h1>
 <div mat-dialog-content>{{ data.text }}</div>
 <div mat-dialog-actions align="end">
-  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button [mat-dialog-close]="false" i18n="@@confirmDialogCancel">Cancel</button>
   <button mat-button color="warn" [mat-dialog-close]="true" cdkFocusInitial>{{ data.buttonText }}</button>
 </div>
diff --git a/src/app/checklist/state/checklist.actions.ts b/src/app/checklist/state/checklist.actions.ts
@@ -4,7 +4,8 @@ import { ChecklistFilter } from '../models/checklist.model';
 export enum ChecklistActionTypes {
   SET_CATEGORIES_FILTER = '[Checklist] set categories filter',
   SET_FAVORITES_FILTER = '[Checklist] set favroites filter',
-  TOGGLE_EDIT_MODE = '[Checklist] toggle edit mode'
+  TOGGLE_EDIT_MODE = '[Checklist] toggle edit mode',
+  SET_LANG_CODE = '[Checklist] set langage code '
 }
 
 export class SetCategoriesFilter implements Action {
@@ -25,4 +26,10 @@ export class ToggleEditMode implements Action {
   constructor() {}
 }
 
-export type ChecklistActions = SetCategoriesFilter | SetFavoritesFilter | ToggleEditMode;
+export class SetLangageCode implements Action {
+  readonly type = ChecklistActionTypes.SET_LANG_CODE;
+
+  constructor(public payload: string) {}
+}
+
+export type ChecklistActions = SetCategoriesFilter | SetFavoritesFilter | ToggleEditMode | SetLangageCode;
diff --git a/src/app/checklist/state/checklist.reducer.ts b/src/app/checklist/state/checklist.reducer.ts
@@ -2,7 +2,7 @@ import { Filter } from '../models/checklist.model';
 import { ChecklistActions, ChecklistActionTypes } from './checklist.actions';
 import { ChecklistState } from './checklist.state';
 
-const CHECKLIST = require('../../../assets/content.json');
+const CHECKLIST = require('../../../assets/content.en-US.json');
 
 export const INITIAL_STATE: ChecklistState = {
   ...CHECKLIST,
@@ -26,6 +26,12 @@ export function checklistReducer(state = INITIAL_STATE, action: ChecklistActions
         ...state,
         editMode: !state.editMode
       };
+    case ChecklistActionTypes.SET_LANG_CODE:
+      return {
+        ...state,
+        ...require(`../../../assets/content.${action.payload || 'en-US'}.json`),
+        editMode: !state.editMode
+      };
     default:
       return state;
   }

diff --git a/src/app/projects/project-dialog/project-dialog.component.html b/src/app/projects/project-dialog/project-dialog.component.html
@@ -14,22 +14,34 @@ <h1 mat-dialog-title>
         type="text"
       />
       <mat-hint align="end">{{ projectName.value?.length || 0 }}/{{ maxLength }}</mat-hint>
-      <mat-error *ngIf="projectName.hasError('projectExists')">Project already exists</mat-error>
+      <mat-error *ngIf="projectName.hasError('projectExists')" i18n="@@projectDialogExistsError"
+        >Project already exists</mat-error
+      >
       <mat-spinner *ngIf="projectName.pending" diameter="20" color="primary" matSuffix></mat-spinner>
     </mat-form-field>
   </div>
   <div class="danger-zone-wrapper" *ngIf="isEditMode()">
-    <h4>DANGER ZONE</h4>
+    <h4 i18n="@@projectDialogDengerZoneSection">DANGER ZONE</h4>
     <ul class="danger-zone">
       <li class="danger-zone-cta">
-        <span class="danger-zone-cta-title">Delete Project</span>
+        <span class="danger-zone-cta-title" i18n="@@projectDialogDeleteProject">Delete Project</span>
         <div class="danger-zone-cta-content">
-          <p>Once you delete a project, there is no going back. Please be certain.</p>
+          <p i18n="@@projectDialogConfirmMessage">
+            Once you delete a project, there is no going back. Please be certain.
+          </p>
           <mat-form-field>
             <input matInput [formControl]="verifyProjectName" type="text" />
-            <mat-hint align="end">Please type in the project name to confirm.</mat-hint>
+            <mat-hint align="end" i18n="@@projectDialogConfirmMessageHint"
+              >Please type in the project name to confirm.</mat-hint
+            >
           </mat-form-field>
-          <button (click)="deleteProject()" [disabled]="!verifyProjectName.valid" mat-raised-button color="warn">
+          <button
+            (click)="deleteProject()"
+            [disabled]="!verifyProjectName.valid"
+            mat-raised-button
+            color="warn"
+            i18n="@@projectDialogSubmitButton"
+          >
             Delete this Project
           </button>
         </div>
@@ -38,7 +50,7 @@ <h4>DANGER ZONE</h4>
   </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button mat-button [mat-dialog-close]="null">Cancel</button>
+  <button mat-button [mat-dialog-close]="null" i18n="@@projectDialogCancel">Cancel</button>
   <button
     mat-raised-button
     color="primary"