okfn-brasil · lguima · Aug 12, 2023 · Aug 12, 2023 · Aug 12, 2023 · Aug 12, 2023
diff --git a/angular.json b/angular.json
@@ -5,6 +5,12 @@
   "projects": {
     "querido-diario": {
       "projectType": "application",
+      "i18n": {
+        "sourceLocale": "pt",
+        "locales": {
+          "en": "src/locales/messages.en.xlf"
+        }
+      },
       "schematics": {
         "@schematics/angular:component": {
           "style": "sass"
@@ -25,6 +31,8 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
+            "localize": true,
+            "i18nMissingTranslation": "error",
             "aot": true,
             "assets": [
               "src/favicon.ico",
@@ -64,6 +72,9 @@
                   "maximumError": "5mb"
                 }
               ]
+            },
+            "en": {
+              "localize": ["en"]
             }
           }
         },
@@ -75,6 +86,9 @@
           "configurations": {
             "production": {
               "browserTarget": "querido-diario:build:production"
+            },
+            "en": {
+              "browserTarget": "querido-diario:build:en"
             }
           }
         },

diff --git a/docs/README.md b/docs/README.md
@@ -47,7 +47,7 @@ Para mais detalhes ou informações sobre a configuração em outros sistemas op
 # Como executar
 1. Com o terminal aberto no diretório raíz do repositório, o projeto pode ser servido localmente com o comando:
 ``` console
-yarn ng serve
+yarn serve
 ```
 2. Durante a execução, um log aparecerá no terminal. O trecho final, como este a seguir, informa em qual porta a visualização do site está hospedada. Basta copiar o endereço `http` e abrir no navegador. 
 ```

diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,19 @@
+[build]
+  publish = "dist/querido-diario"
+  command = "ng build --prod"
+
+[[redirects]]
+  from = "/*"
+  to = "/en/index.html"
+  status = 200
+  conditions = {Language = ["en"]}
+
+[[redirects]]
+  from = "/en/*"
+  to = "/en/index.html"
+  status = 200
+
+[[redirects]]
+  from = "/*"
+  to = "/pt/index.html"
+  status = 200
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "heroku-postbuild": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "i18n:extract": "ng extract-i18n --output-path src/locales"
   },
   "private": true,
   "engines": {
@@ -24,6 +25,7 @@
     "@angular/core": "~11.2.11",
     "@angular/flex-layout": "12.0.0-beta.34",
     "@angular/forms": "~11.2.11",
+    "@angular/localize": "11.2.11",
     "@angular/material": "^11.2.11",
     "@angular/material-moment-adapter": "^12.0.2",
     "@angular/platform-browser": "~11.2.11",

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -23,22 +23,16 @@ import { SearchTutorialComponent } from './modules/pages/search-tutorial/search-
 import { SuggestionComponent } from './modules/pages/suggestion/suggestion.component';
 import { SupportComponent } from './modules/pages/support/support.component';
 import { TechComponent } from './modules/pages/tech/tech.component';
-import { AboutComponent as AboutComponentEnUS } from './modules/pages/about-en_US/about.component';
-import { TechComponent as TechComponentEnUS } from './modules/pages/tech-en_US/tech.component';
-import { PrivacyPolicyComponent as PrivacyPolicyComponentEnUS } from './modules/pages/privacy-policy-en_US/privacy-policy.component';
-
+import { PageNotFoundComponent } from './modules/pages/page-not-found/page-not-found.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'sobre', component: AboutComponent },
-  { path: 'en-US/sobre', component: AboutComponentEnUS },
   { path: 'privacidade', component: PrivacyPolicyComponent },
-  { path: 'en-US/privacidade', component: PrivacyPolicyComponentEnUS },
   { path: 'informacoes', component: ComplaintComponent },
   { path: 'acesso', component: AccessLevelsComponent },
   { path: 'apoie', component: SupportComponent },
   { path: 'tecnologia', component: TechComponent },
-  { path: 'en-US/tecnologia', component: TechComponentEnUS },
   { path: 'sugestao', component: SuggestionComponent },
   { path: 'glossario', component: GlossaryComponent },
   { path: 'pesquisa', component: SearchComponent },
@@ -58,6 +52,8 @@ const routes: Routes = [
   { path: 'educacao/relatorio/:id', component: ReportDetailComponent },
   { path: 'educacao/caso/:id', component: ReportDetailComponent },
   { path: 'educacao/redefinir-senha', component: PassResetComponent },
+
+  { path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -22,7 +22,7 @@ export class AppComponent {
     Icons.map((icon) => {
       this.matIconRegistry.addSvgIcon(
         icon,
-        this.sanitizer.bypassSecurityTrustResourceUrl(`../assets/icons/${icon}.svg`)
+        this.sanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${icon}.svg`)
       )
     })
   }

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -110,8 +110,7 @@ import { ResetPassModalComponent } from './modules/pages/area-education/header/r
 import { AboutComponent as AboutComponentEnUS } from './modules/pages/about-en_US/about.component';
 import { TechComponent as TechComponentEnUS } from './modules/pages/tech-en_US/tech.component';
 import { PrivacyPolicyComponent as PrivacyPolicyComponentEnUS } from './modules/pages/privacy-policy-en_US/privacy-policy.component';
-
-
+import { PageNotFoundComponent } from './modules/pages/page-not-found/page-not-found.component';
 
 @NgModule({
   declarations: [
@@ -190,10 +189,10 @@ import { PrivacyPolicyComponent as PrivacyPolicyComponentEnUS } from './modules/
     AboutComponentEnUS,
     TechComponentEnUS,
     PrivacyPolicyComponentEnUS,
+    PageNotFoundComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
     BrowserAnimationsModule,
     MatGridListModule,
     MatMenuModule,
@@ -217,6 +216,7 @@ import { PrivacyPolicyComponent as PrivacyPolicyComponentEnUS } from './modules/
     IvyCarouselModule,
 
     NgxPaginationModule,
+    AppRoutingModule,
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

diff --git a/src/app/modules/components/carousel/carousel.component.sass b/src/app/modules/components/carousel/carousel.component.sass
@@ -27,8 +27,8 @@
 
     .carousel-arrow-prev
       left: 0 !important
-      background-image: url('/assets/icons/slide-left.svg') !important
+      background-image: url('../../../../assets/icons/slide-left.svg') !important
 
     .carousel-arrow-next
       right: 0 !important
-      background-image: url('/assets/icons/slide-right.svg') !important
+      background-image: url('../../../../assets/icons/slide-right.svg') !important
diff --git a/src/app/modules/components/cities-search-result/cities-search-result.component.html b/src/app/modules/components/cities-search-result/cities-search-result.component.html
@@ -2,7 +2,7 @@
   <div class="content">
     <div class="levels">
       <div class="level" *ngIf="levels.length && levels.includes(1)" [style]="{width: 'calc((100%/' + levels.length + ') - 40px)'}">
-        <div class="level-icon"><img src="/assets/icons/pin.svg"/></div>
+        <div class="level-icon"><img src="assets/icons/pin.svg"/></div>
         <div class="level-title">Nível 1 de acesso</div>
         <div class="level-text">Possuímos a fonte de publicação do diário oficial deste município.</div>
         <div class="cities level-1">
@@ -14,7 +14,7 @@
       </div>
 
       <div class="level" *ngIf="levels.length && levels.includes(2)" [style]="{width: 'calc((100%/' + levels.length + ') - 40px)'}">
-        <div class="level-icon"><img src="/assets/icons/search.svg"/></div>
+        <div class="level-icon"><img src="assets/icons/search.svg"/></div>
         <div class="level-title">Nível 2 de acesso</div>
         <div class="level-text">
           Temos o script para coletar os arquivos e armazená-los em nossa base.<br/>
@@ -29,7 +29,7 @@
       </div>
 
       <div class="level" *ngIf="levels.length && levels.includes(3)" [style]="{width: 'calc((100%/' + levels.length + ') - 40px)'}">
-        <div class="level-icon"><img src="/assets/icons/check.svg"/></div>
+        <div class="level-icon"><img src="assets/icons/check.svg"/></div>
         <div class="level-title">Nível 3 de acesso</div>
         <div class="level-text">o conteúdo dos diários oficiais deste município está disponível na plataforma Querido Diário.</div>
         <div class="cities level-3">

diff --git a/src/app/modules/components/cities-search-result/cities-search-result.component.sass b/src/app/modules/components/cities-search-result/cities-search-result.component.sass
@@ -89,4 +89,4 @@
         top: calc(50% - 5px)
         background-position: center
         background-repeat: no-repeat
-        background-image: url('/assets/icons/right-arrow-white.svg')
+        background-image: url('../../../../assets/icons/right-arrow-white.svg')
diff --git a/src/app/modules/components/header/header.component.html b/src/app/modules/components/header/header.component.html
@@ -1,17 +1,33 @@
 <app-row class="row-header">
   <header fxLayout="row">
     <div class="container">
-      <a routerLink="/"><mat-icon svgIcon="logo" class="logo"></mat-icon></a>
+      <a routerLink="/">
+        <mat-icon svgIcon="logo" class="logo"></mat-icon>
+      </a>
+
       <nav fxHide.xs fxLayoutGap="32px" *ngIf="!hideMenu">
-        <a routerLink="/" #explore>Explore</a>
-        <a routerLink="/tecnologia">Tecnologia</a>
-        <a routerLink="/blog">Blog</a>
-        <a routerLink="/educacao">Educação</a>
-        <a routerLink="/sobre">Sobre</a>
+        <a routerLink="/" #explore i18n="menu superior|Item do menu superior para a página inicial">Explore</a>
+        <a routerLink="/tecnologia" i18n="menu superior|Item do menu superior para a página de Tecnologia">Tecnologia</a>
+        <a routerLink="/blog" i18n="menu superior|Item do menu superior para a página de Blog">Blog</a>
+        <a routerLink="/educacao" i18n="menu superior|Item do menu superior para a página de Educação">Educação</a>
+        <a routerLink="/sobre" i18n="menu superior|Item do menu superior para a página Sobre">Sobre</a>
         <a fxLayout="center" (click)="openNotifications()">
           <app-icon [icon]="notificationIcon"></app-icon>
         </a>
-        <button routerLink="/apoie" class="btn">Apoie</button>
+        <button routerLink="/apoie" class="btn" i18n="menu superior|Item do menu superior para a página de Apoie">Apoie</button>
+
+        <button mat-icon-button [matMenuTriggerFor]="languageSwitcher" aria-label="Seletor de idioma" class="top-header-menu-item">
+          <mat-icon>language</mat-icon>
+        </button>
+        <mat-menu #languageSwitcher="matMenu" xPosition="before" class="language-switcher-menu">
+          <ng-container *ngFor="let language of languageList">
+            <a href="../{{language.code}}{{router.url}}" target="_self">
+              <button mat-menu-item [attr.data-language-code]="language.code">
+                <span>{{language.label}}</span>
+              </button>
+            </a>
+          </ng-container>
+        </mat-menu>
       </nav>
       <a *ngIf="!hideMenu" (click)="openDialog()" id="support" fxHide fxHide.xs="false">
         <mat-icon svgIcon="bars" class="bars"></mat-icon>
@@ -22,25 +38,27 @@
   </header>
 </app-row>
 
-
 <div class="suspended-menu" *ngIf="mobileMenuOpen" (click)="onClickLink()">
-  <a routerLink="/" #explore><div class="link bg-white">
-    Explore
-  </div></a>
-  <a routerLink="/tecnologia"><div class="link bg-white">
-    Tecnologia 
-  </div></a>
-  <a routerLink="/blog"><div class="link bg-white">
-    Blog
-  </div></a>
-  <a routerLink="/sobre"><div class="link bg-white">
-    Sobre 
-  </div></a>
-  <a routerLink="/apoie"><div class="link bg-orange">
-    Apoie
-  </div></a>
+ <a routerLink="/" #explore>
+    <div class="link bg-white" i18n="menu superior|Item do menu superior para a página inicial">Explore</div>
+  </a>
+  <a routerLink="/tecnologia">
+    <div class="link bg-white" i18n="menu superior|Item do menu superior para a página de Tecnologia">Tecnologia</div>
+  </a>
+  <a routerLink="/blog">
+    <div class="link bg-white" i18n="menu superior|Item do menu superior para a página de Blog">Blog</div>
+  </a>
+  <a routerLink="/sobre">
+    <div class="link bg-white" i18n="menu superior|Item do menu superior para a página Sobre">Sobre</div>
+  </a>
+  <a routerLink="/apoie">
+    <div class="link bg-orange" i18n="menu superior|Item do menu superior para a página de Apoie">Apoie</div>
+  </a>
+
+  <a routerLink="/educacao/">
+    <div class="link divider bg-purple">Tecnologias na Educação</div>
+  </a>
 
-  <a routerLink="/educacao/"><div class="link divider bg-purple">Tecnologias na Educação</div></a>
   <div *ngIf="userData.full_name" class="user-name link">
     Olá, {{userData.full_name.split(' ')[0]}}
   </div>
@@ -57,10 +75,33 @@
   <!-- <a><div class="link bg-purple"> -->
   <!--   Estudos de caso -->
   <!-- </div></a> -->
-  <a routerLink="/educacao/busca"><div class="link bg-purple">
+
+  <a routerLink="/educacao/busca">
+    <div class="link bg-purple">
     Busca 
-  </div></a>
-  <a routerLink="/educacao/sobre"><div class="link bg-purple">
-    Sobre 
-  </div></a>
+    </div>
+  </a>
+  <a routerLink="/educacao/sobre">
+    <div class="link bg-purple">
+      Sobre 
+    </div>
+  </a>
+
+  <a (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
+    <div class="link bg-white">
+      <button mat-icon-button [matMenuTriggerFor]="languageSwitcher" aria-label="Seletor de idioma">
+        <mat-icon>language</mat-icon>
+        <span i18n="Rótulo do botão para trocar de idioma">Idioma</span>
+      </button>
+    </div>
+  </a>
+  <mat-menu #languageSwitcher="matMenu" xPosition="before">
+    <ng-container *ngFor="let language of languageList">
+      <a href="../{{language.code}}{{router.url}}" (click)="onClickLink()" target="_self">
+        <button mat-menu-item [attr.data-language-code]="language.code">
+          <span>{{language.label}}</span>
+        </button>
+      </a>
+    </ng-container>
+  </mat-menu>
 </div>
diff --git a/src/app/modules/components/header/header.component.sass b/src/app/modules/components/header/header.component.sass
@@ -17,14 +17,8 @@ header
   nav 
     display: flex
 
-  a 
-    color: #5e3f8e
-    font-family: Lato
-    font-size: rem(16)
-    font-weight: 600
-    letter-spacing: 0
-    line-height: rem(28)
-    align-self: center
+  a, .top-header-menu-item
+    @apply self-center font-lato text-[#5e3f8e] font-semibold text-base tracking-normal leading-7
 
   button.btn 
     height: rem(42)
@@ -40,7 +34,6 @@ header
     text-align: center
     align-self: center
     border: none
-
 
 .logo
   height: rem(36)
@@ -97,7 +90,7 @@ header
 
       &.bg-orange, &.bg-purple, &.bg-dark-purple, &.login
         &::after
-          background-image: url('/assets/icons/right-arrow-white.svg')
+          background-image: url('../../../../assets/icons/right-arrow-white.svg')
 
       &.bg-orange
         background-color: rgba(255, 133, 0, 1)
@@ -115,7 +108,7 @@ header
         top: calc(50% - 5px)
         width: rem(5)
         height: rem(10)
-        background-image: url('/assets/icons/right-arrow-purple-dark.svg')
+        background-image: url('../../../../assets/icons/right-arrow-purple-dark.svg')
         background-position: center
 
     .user-name, .logged-link, .login

diff --git a/src/app/modules/components/header/header.component.ts b/src/app/modules/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { UserModel } from 'src/app/interfaces/account';
@@ -20,13 +20,18 @@ export class HeaderComponent implements OnInit {
   userData: UserModel = {};
   urlsHide = ['/educacao/cadastrar'];
   hideMenu = false;
+  languageList = [
+    { code: 'pt', label: 'Português (BR)' },
+    { code: 'en', label: 'English (US)' }
+  ];
 
   constructor(
     private userQuery: UserQuery,
     private modal: MatDialog,
     private contentService: ContentService,
     private userService: UserService,
-    private router: Router,
+    public router: Router,
+    @Inject(LOCALE_ID) public localeId: string
   ) {}
 
   notificationIcon: IconType = {