Add language support for wordpress content (es+eu)

Redesign css for url backgrounds
TODO: dedalo language support

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build --prod",
+		"build-i18n":"for lang in es eu; do ng build --output-path=dist/$lang --aot --bh /$lang/ --i18n-file=src/locale/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done",
    	"test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

src/app/app-routing.module.ts

@@ -6,8 +6,9 @@ import { InterviewComponent } from './interview/interview.component';
 
 
 const routes: Routes = [
-  { path: '', redirectTo: 'home', pathMatch: 'full'},
+  // { path: '', redirectTo: 'home', pathMatch: 'full'},
-  { path: 'home', component: HomeComponent },
+  // { path: 'home', component: HomeComponent },
+  { path: '', component: HomeComponent , pathMatch: 'full'},
   { path: 'entrevistas', component: InterviewComponent },
   { path: 'entrevistas/:id', component: InterviewComponent },
   { path: ':id', component: PageComponent },

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { HttpModule } from '@angular/http';
 /*pdf*/
 import { FormsModule } from '@angular/forms';
@@ -48,6 +48,7 @@ import { DedaloService } from './dedalo.service';
   providers: [
     PageService,
     DedaloService,
+    //{provide: LOCALE_ID, useValue: 'es-ES'}
   ],
   bootstrap: [AppComponent]
 })

src/app/home/home.component.html

@@ -1,2 +1,2 @@
-<header class="homepage" id="header"></header>
+<header class="homepage" id="header" [ngStyle]="{'background-image': 'url(\'./assets/'+homeImage+'\')'}"></header>
 <app-section [pages]=pages></app-section>

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,LOCALE_ID, Inject } from '@angular/core';
 import { PageService } from '../page.service';
 import { PageItem } from '../page';
 import { ActivatedRoute } from "@angular/router";
@@ -11,20 +11,26 @@ import { ActivatedRoute } from "@angular/router";
 export class HomeComponent implements OnInit {
 
   pages : PageItem[];
+  homeImage = "industria-paisaia.svg"
 
   constructor(
     private route: ActivatedRoute,
-    private pageService: PageService
+    private pageService: PageService,
+    @Inject(LOCALE_ID) protected localeId: string
   )
   {
         // this.route.params.subscribe( params => console.log(params.id) );
   }
 
   ngOnInit() {
+		console.log(this.localeId);
+    if (this.localeId==='es') this.homeImage = "industria-paisaia.es.svg";
+    else if (this.localeId==='eu') this.homeImage = "industria-paisaia.svg";
     // this.pageService.getItems();
     this.pageService.getParentPages()
       .subscribe(data => {
         this.pages = data;
+        //this.pageService.currentPage
       });
   }
 

src/app/interview-grid/interview-grid.component.css

@@ -0,0 +1,23 @@
+.thumbnail-image {
+  width: 100%;
+  height:100%;
+  min-height: 150px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}
+
+.entrevista .item-container-wrapper {
+  cursor:pointer;
+  transition-duration: 2s;
+  padding-top:20px;
+  padding-bottom:20px;
+}
+
+.entrevista .item-container-wrapper:hover {
+  background:#d2e8eb;
+}
+
+h2.thumbtitle {
+  color:#f7886c;
+}

src/app/interview-grid/interview-grid.component.html

@@ -10,10 +10,10 @@
 <section *ngIf="entrevistas && single">
   <div class="row" *ngFor="let entrevista of entrevistas">
 <div class="col-md-3 offset-md-1 info">
-  <h3 class="parent-header"><a href="entrevistas">Entrevistas</a></h3>
+  <!-- <h3 class="parent-header"><a href="entrevistas">Entrevistas</a></h3> -->
   <h1><span>{{entrevista.title}}</span></h1>
   <!-- <h3>{{entrevista.date}}</h3> -->
-  <h2>{{entrevista.abstract}}</h2>
+  <!-- <h2>{{entrevista.abstract}}</h2> -->
   <!-- <ul class="filters">
     <li class="active"><a href="entrevistas">Entrevistas</a></li>
   </ul> -->
@@ -44,14 +44,19 @@
 </div>
 </div>
 </section>
+<!-- grid -->
 <section class="entrevista" *ngIf="entrevistas && !single">
- <div class="row item-container-wrapper">
+ <div class="row item-container-wrapper" *ngFor="let entrevista of entrevistas" [routerLink]="entrevista.id" style="">
-   <div class="col-md-10 offset-md-1">
+   <div class="col-md-3 offset-md-1">
-   <div class="item-container" *ngFor="let entrevista of entrevistas">
+     <div *ngIf="entrevista.image" class="thumbnail-image" [ngStyle]="{backgroundImage:'url(http://dedalo.anorgatarrak.eus'+entrevista.image[0].src+')'}"></div>
-          <!-- <div *ngFor="let image of entrevista.image" class="thumbnail-image" [ngStyle]="{backgroundImage:'url()'}">{{image.src}}</div> -->
+   </div>
-          <h2 class="thumbtitle"><a [routerLink]="entrevista.id">{{entrevista.title}}</a></h2>
+   <div class="col-md-7">
+     <div class="item-container" style="width:auto;">
+        <h2 class="thumbtitle">{{entrevista.title}}</h2>
+      </div>
+  </div>
+  <!-- <div class="col-md-4">
     <h3 [innerHTML]="entrevista.abstract"></h3>
-   </div>
+  </div> -->
- </div>
+</div>
-  </div>
 </section>

src/app/interview/interview.component.html

@@ -1,9 +1,5 @@
 <app-header [pages]=pages *ngIf="pages"></app-header>
-<div class="loading-block" *ngIf="!pages">
+<div class="loading-block" *ngIf="!pages" style="margin-top:60px;">
-  <div class="progress-bar-load blue"></div>
-  <div class="progress-bar-load"></div>
-</div>
-<div class="loading-block" *ngIf="!entrevistas">
   <div class="progress-bar-load blue"></div>
   <div class="progress-bar-load"></div>
 </div>

src/app/interview/interview.component.ts

@@ -17,11 +17,14 @@ export class InterviewComponent implements OnInit {
   entrevistas : Entrevista[]
   entrevistaID: string
   single: boolean = false
+  loading: boolean = true;
 
   constructor(
     private entrevistaService : DedaloService,
     private route: ActivatedRoute,
-  ) {
+  ) {}
+
+  ngOnInit() {
     this.getEntrevistas()
     this.route.params.subscribe( params => {
       this.entrevistaID = params.id
@@ -29,9 +32,6 @@ export class InterviewComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-  }
-
   getInterviews() : void {
     this.interviews = [];
   }

src/app/menu/menu.component.html

@@ -1,5 +1,5 @@
 <div class="menu">
-  <a  routerLink="/"><img src="../../assets/industria-paisaia.svg" width="150" height="60" alt=""/></a>
+  <a  routerLink="/"><img src="./assets/{{homeImage}}" width="150" height="60" alt=""/></a>
   <nav>
     <ul class="nav">
       <!-- <li class="nav-item" [routerLink]='home' [routerLinkActive]="['active']">Inicio</li> -->
@@ -10,7 +10,7 @@
   <div id="search" class="Search" style="display:none;">
     <input type="search" placeholder="Search for a title..." value=""/>
   </div>
-  <div class="language" style="display:none;">
+  <div class="language" style="">
-    <span>EUS</span> <span>|</span> <span>ES</span>
+    <span><a [href]="getLink('eu')">EUS</a></span> <span>|</span> <span><a [href]="getLink('es')">ES</a></span>
   </div>
 </div>

src/app/menu/menu.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input,LOCALE_ID, Inject } from '@angular/core';
 import { PageItem } from '../page';
+import { PageService } from '../page.service';
 
 
 @Component({
@@ -10,10 +11,20 @@ import { PageItem } from '../page';
 export class MenuComponent implements OnInit {
 
   @Input() pages : PageItem[];
+  homeImage = "industria-paisaia.es.svg";
 
-  constructor() { }
+  constructor(
+    @Inject(LOCALE_ID) protected localeId: string,
+    private pageService: PageService,
+  ) { }
 
   ngOnInit() {
+    if (this.localeId==='es') this.homeImage = "industria-paisaia.es.svg";
+    else if (this.localeId==='eu') this.homeImage = "industria-paisaia.svg";
+  }
+
+  getLink(locale) {
+    return "/"+locale+"/"+this.pageService.getLink(locale);
   }
 
 }

src/app/page.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable,LOCALE_ID, Inject } from '@angular/core';
 import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angular/http';
 import { Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
@@ -13,11 +13,14 @@ import { Image} from '@ks89/angular-modal-gallery';
 
 export class PageService {
 
+
+  currentPage:PageItem;
   apiUrl : string = "https://backend.industriapaisaia.eus/wp-json/wp/v2"
 
   constructor(
     private http: Http,
-    public  sanitizer: DomSanitizer
+    public  sanitizer: DomSanitizer,
+    @Inject(LOCALE_ID) protected localeId: string
   ) { }
 
   // getItems() : void {
@@ -32,6 +35,14 @@ export class PageService {
   //     .then(res => console.log(res.json()));
   // }
 
+  getLink(locale) {
+    if (this.currentPage) {
+      return this.currentPage.language[locale].slug;
+    } else {
+      return ''
+    }
+  }
+
   getParentPages() : Observable<PageItem[]> {
     let search = new URLSearchParams();
     search.set('parent','0');
@@ -55,6 +66,7 @@ export class PageService {
     searchParams.set('orderby','menu_order');
     searchParams.set('_embed','');
     searchParams.set('per_page',20);
+    searchParams.set('lang',this.localeId);
     //searchParams.set('context','embed');
     let url = `${this.apiUrl}/pages`;
     return this.http.get(url,{search:searchParams})
@@ -69,6 +81,9 @@ export class PageService {
             item.parent
           );
 
+          /*transalte*/
+          page.language = item.language;
+
           /*parent */
           page['parent_title']=item['parentTitle']['title'];
           page['parent_link']=item['parentTitle']['link'];

src/app/page.ts

@@ -17,6 +17,11 @@ export class PageItem {
     public hasChild? : boolean,
     public childs?: PageItem[],
     public parent_title? : string,
+    public language? : {
+      current:string,
+      es:{ slug:string},
+      eu:{ slug:string},
+    },
   ) {}
 
   // public set (key,attr) {

src/app/page/page.component.html

@@ -41,24 +41,28 @@
 				</section>
 				<section class="section-publitas">
 					<div class="row" *ngIf="page.pdf">
+
 						<div class="col-md-12">
+              <!-- <div><h3>{{page.pdf.title}}</h3></div> -->
 							<simple-pdf-viewer #pdfViewer [src]="page.pdf.url" [removePageBorders]="true" (onProgress)="onProgressPDF($event,page.pdf.filesize)"></simple-pdf-viewer>
 							<div class="pdf-buttons" *ngIf="!pdfViewer.isDocumentLoaded()">
 								<button>Cargando documento {{loaderPDF}}%</button>
 							</div>
 							<div class="pdf-buttons" style="" *ngIf="pdfViewer.isDocumentLoaded()">
-								<button (click)="pdfViewer.firstPage()">First Page</button>
+								<button (click)="pdfViewer.firstPage()">Primera página</button>
-								<button (click)="pdfViewer.prevPage()">Previous Page</button>
+								<button (click)="pdfViewer.prevPage()">Anterior</button>
 								<button>{{pdfViewer.getCurrentPage()}}/{{pdfViewer.getNumberOfPages()}}</button>
-								<button (click)="pdfViewer.nextPage()">Next Page</button>
+								<button (click)="pdfViewer.nextPage()">Siguiente</button>
-								<button (click)="pdfViewer.lastPage()">Last Page</button>
+								<button (click)="pdfViewer.lastPage()">Última página</button>
+                <button (click)="windowOpen(page.pdf.url)">Descarga</button>
 							</div>
 							<div class="pdf-buttons pdf-buttons-bottom" style="" *ngIf="pdfViewer.isDocumentLoaded()">
-								<button (click)="pdfViewer.firstPage()">First Page</button>
+								<button (click)="pdfViewer.firstPage()">Primera página</button>
-								<button (click)="pdfViewer.prevPage()">Previous Page</button>
+								<button (click)="pdfViewer.prevPage()">Anterior</button>
 								<button>{{pdfViewer.getCurrentPage()}}/{{pdfViewer.getNumberOfPages()}}</button>
-								<button (click)="pdfViewer.nextPage()">Next Page</button>
+								<button (click)="pdfViewer.nextPage()">Siguiente</button>
-								<button (click)="pdfViewer.lastPage()">Last Page</button>
+								<button (click)="pdfViewer.lastPage()">Última página</button>
+                <button (click)="windowOpen(page.pdf.url)">Descarga</button>
 							</div>
 						</div>
 					</div>

src/app/page/page.component.ts

@@ -90,7 +90,7 @@ export class PageComponent implements OnInit {
       .subscribe(data => {
         this.pages = data;
         this.pages.forEach( (p) => {
-
+          this.pageService.currentPage = p;
           var safeUrl:SafeUrl;
           safeUrl = this.sanitizer.bypassSecurityTrustUrl('https://backend.industriapaisaia.eus/wp-content/uploads/2018/10/test.pdf');
           p['publitas_link_sanitize'] = safeUrl;
@@ -169,4 +169,8 @@ onProgressPDF(event,total) {
   this.loaderPDF = Math.floor(loadInt/totalInt*100);
 }
 
+windowOpen(url){
+  window.open(url);
+}
+
 }

src/assets/industria-paisaia.es.svg

@@ -0,0 +1,185 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="297mm"
+   height="210mm"
+   viewBox="0 0 297 210"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="industria-paisaia.es.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.51675612"
+     inkscape:cx="509.51202"
+     inkscape:cy="399.21176"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer3"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="734"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="1"
+     inkscape:measure-start="0,0"
+     inkscape:measure-end="0,0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Capa 2" />
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-87)">
+    <rect
+       style="opacity:1;fill:#f7886c;fill-opacity:1;stroke:none;stroke-width:0.16465119;stroke-opacity:1"
+       id="rect6351"
+       width="227.6949"
+       height="45.884129"
+       x="65.001244"
+       y="145.11119" />
+    <rect
+       y="208.6413"
+       x="12.77956"
+       height="45.884129"
+       width="279.37857"
+       id="rect6353"
+       style="opacity:1;fill:#d2e8eb;fill-opacity:1;stroke:none;stroke-width:0.18238316;stroke-opacity:1" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="110.90788"
+       y="157.2045"
+       id="text75"><tspan
+         sodipodi:role="line"
+         id="tspan73"
+         x="110.90788"
+         y="167.03558"
+         style="stroke-width:0.26458332" /></text>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Capa 3">
+    <g
+       id="g93">
+      <g
+         aria-label="PAISAJE"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+         id="text79">
+        <path
+           d="M 96.64349,62.699686 V 51.234408 H 85.178212 V 62.699686 Z M 79.445574,85.630241 V 45.50177 H 96.64349 q 2.373671,0 4.03076,1.701877 1.70188,1.657091 1.70188,4.030761 v 11.465278 q 0,2.418457 -1.70188,4.075548 -1.657089,1.657091 -4.03076,1.657091 H 85.178212 v 17.197916 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path95" />
+        <path
+           d="M 125.30668,62.699686 V 51.234408 H 113.84141 V 62.699686 Z M 108.10877,85.630241 V 51.234408 q 0,-2.37367 1.65709,-4.030761 1.65709,-1.701877 4.07555,-1.701877 h 11.46527 q 2.37368,0 4.03077,1.701877 1.70187,1.657091 1.70187,4.030761 v 34.395833 h -5.73264 V 68.432325 h -11.46527 v 17.197916 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path97" />
+        <path
+           d="m 136.77196,85.630241 v -5.732638 h 5.73264 V 51.234408 h -5.73264 V 45.50177 h 17.19792 v 5.732638 h -5.73264 v 28.663195 h 5.73264 v 5.732638 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path99" />
+        <path
+           d="m 165.43516,85.630241 q -2.41846,0 -4.07555,-1.657091 -1.65709,-1.65709 -1.65709,-4.075547 v -5.732639 h 5.73264 v 5.732639 h 11.46527 V 68.432325 h -11.46527 q -2.41846,0 -4.07555,-1.657091 -1.65709,-1.657091 -1.65709,-4.075548 V 51.234408 q 0,-2.37367 1.65709,-4.030761 1.65709,-1.701877 4.07555,-1.701877 h 11.46527 q 2.37367,0 4.03076,1.701877 1.70188,1.657091 1.70188,4.030761 v 5.732639 h -5.73264 v -5.732639 h -11.46527 v 11.465278 h 11.46527 q 2.37367,0 4.03076,1.701877 1.70188,1.657091 1.70188,4.030762 v 11.465278 q 0,2.418457 -1.70188,4.075547 -1.65709,1.657091 -4.03076,1.657091 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path101" />
+        <path
+           d="M 205.56363,62.699686 V 51.234408 H 194.09835 V 62.699686 Z M 188.36571,85.630241 V 51.234408 q 0,-2.37367 1.65709,-4.030761 1.65709,-1.701877 4.07555,-1.701877 h 11.46528 q 2.37367,0 4.03076,1.701877 1.70187,1.657091 1.70187,4.030761 v 34.395833 h -5.73263 V 68.432325 h -11.46528 v 17.197916 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path103" />
+        <path
+           d="m 222.76154,85.630241 q -2.41846,0 -4.07555,-1.657091 -1.65709,-1.65709 -1.65709,-4.075547 v -8.598959 h 5.73264 v 8.598959 h 11.46528 V 45.50177 h 5.73264 v 34.395833 q 0,2.418457 -1.70188,4.075547 -1.65709,1.657091 -4.03076,1.657091 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path105" />
+        <path
+           d="M 245.69209,85.630241 V 45.50177 h 22.93056 v 5.732638 h -17.19792 v 11.465278 h 11.46528 v 5.732639 h -11.46528 v 11.465278 h 17.19792 v 5.732638 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path107" />
+      </g>
+      <g
+         aria-label="INDUSTRIAL"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+         id="text87">
+        <path
+           d="m 16.240706,148.91768 v -5.73264 h 5.732639 v -28.66319 h -5.732639 v -5.73264 h 17.197917 v 5.73264 h -5.732639 v 28.66319 h 5.732639 v 5.73264 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path110" />
+        <path
+           d="M 39.171262,148.91768 V 108.78921 H 44.9039 l 14.331597,28.66319 v -28.66319 h 5.732639 v 40.12847 H 59.235497 L 44.9039,120.25448 v 28.6632 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path112" />
+        <path
+           d="M 87.89869,143.18504 V 114.52185 H 76.433413 v 28.66319 z m -17.197916,5.73264 V 108.78921 H 87.89869 q 2.373671,0 4.030762,1.70187 1.701877,1.6571 1.701877,4.03077 v 28.66319 q 0,2.41846 -1.701877,4.07555 -1.657091,1.65709 -4.030762,1.65709 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path114" />
+        <path
+           d="m 105.09661,148.91768 q -2.41846,0 -4.07555,-1.65709 -1.657093,-1.65709 -1.657093,-4.07555 v -34.39583 h 5.732643 v 34.39583 h 11.46527 v -34.39583 h 5.73264 v 34.39583 q 0,2.41846 -1.70188,4.07555 -1.65709,1.65709 -4.03076,1.65709 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path116" />
+        <path
+           d="m 133.75981,148.91768 q -2.41846,0 -4.07555,-1.65709 -1.65709,-1.65709 -1.65709,-4.07555 v -5.73264 h 5.73264 v 5.73264 h 11.46527 v -11.46528 h -11.46527 q -2.41846,0 -4.07555,-1.65709 -1.65709,-1.65709 -1.65709,-4.07555 v -11.46527 q 0,-2.37367 1.65709,-4.03077 1.65709,-1.70187 4.07555,-1.70187 h 11.46527 q 2.37367,0 4.03077,1.70187 1.70187,1.6571 1.70187,4.03077 v 5.73263 h -5.73264 v -5.73263 h -11.46527 v 11.46527 h 11.46527 q 2.37367,0 4.03077,1.70188 1.70187,1.65709 1.70187,4.03076 v 11.46528 q 0,2.41846 -1.70187,4.07555 -1.6571,1.65709 -4.03077,1.65709 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path118" />
+        <path
+           d="m 162.42299,148.91768 v -34.39583 h -8.59896 v -5.73264 h 22.93056 v 5.73264 h -8.59896 v 34.39583 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path120" />
+        <path
+           d="m 199.68514,125.98712 v -11.46527 h -11.46527 v 11.46527 z m -17.19791,22.93056 v -40.12847 h 17.19791 q 2.37367,0 4.03077,1.70187 1.70187,1.6571 1.70187,4.03077 v 11.46527 q 0,2.41846 -1.70187,4.07555 -1.6571,1.65709 -4.03077,1.65709 h -2.86632 l 8.59896,17.19792 h -5.73264 l -8.59895,-17.19792 h -2.86632 v 17.19792 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path122" />
+        <path
+           d="m 211.15044,148.91768 v -5.73264 h 5.73263 v -28.66319 h -5.73263 v -5.73264 h 17.19791 v 5.73264 h -5.73264 v 28.66319 h 5.73264 v 5.73264 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path124" />
+        <path
+           d="m 251.27889,125.98712 v -11.46527 h -11.46527 v 11.46527 z m -17.19791,22.93056 v -34.39583 q 0,-2.37367 1.65709,-4.03077 1.65709,-1.70187 4.07555,-1.70187 h 11.46527 q 2.37367,0 4.03077,1.70187 1.70187,1.6571 1.70187,4.03077 v 34.39583 h -5.73264 v -17.19792 h -11.46527 v 17.19792 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path126" />
+        <path
+           d="m 262.74419,148.91768 v -40.12847 h 5.73263 v 34.39583 h 17.19792 v 5.73264 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path128" />
+      </g>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="211.15044"
+       y="114.52185"
+       id="text133"><tspan
+         sodipodi:role="line"
+         id="tspan131"
+         x="211.15044"
+         y="124.35294"
+         style="stroke-width:0.26458332" /></text>
+  </g>
+</svg>

src/assets/industria-paisaia.svg.es.svg

@@ -0,0 +1,185 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="297mm"
+   height="210mm"
+   viewBox="0 0 297 210"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="industria-paisaia.svg.es.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.51482793"
+     inkscape:cx="509.51202"
+     inkscape:cy="399.21176"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer3"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="734"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
+     inkscape:window-maximized="1"
+     inkscape:measure-start="0,0"
+     inkscape:measure-end="0,0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Capa 2" />
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-87)">
+    <rect
+       style="opacity:1;fill:#f7886c;fill-opacity:1;stroke:none;stroke-width:0.16465119;stroke-opacity:1"
+       id="rect6351"
+       width="227.6949"
+       height="45.884129"
+       x="65.001244"
+       y="145.11119" />
+    <rect
+       y="208.6413"
+       x="12.77956"
+       height="45.884129"
+       width="279.37857"
+       id="rect6353"
+       style="opacity:1;fill:#d2e8eb;fill-opacity:1;stroke:none;stroke-width:0.18238316;stroke-opacity:1" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="110.90788"
+       y="157.2045"
+       id="text75"><tspan
+         sodipodi:role="line"
+         id="tspan73"
+         x="110.90788"
+         y="167.03558"
+         style="stroke-width:0.26458332" /></text>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Capa 3">
+    <g
+       id="g93">
+      <g
+         aria-label="PAISAJE"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+         id="text79">
+        <path
+           d="M 96.64349,62.699686 V 51.234408 H 85.178212 V 62.699686 Z M 79.445574,85.630241 V 45.50177 H 96.64349 q 2.373671,0 4.03076,1.701877 1.70188,1.657091 1.70188,4.030761 v 11.465278 q 0,2.418457 -1.70188,4.075548 -1.657089,1.657091 -4.03076,1.657091 H 85.178212 v 17.197916 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path95" />
+        <path
+           d="M 125.30668,62.699686 V 51.234408 H 113.84141 V 62.699686 Z M 108.10877,85.630241 V 51.234408 q 0,-2.37367 1.65709,-4.030761 1.65709,-1.701877 4.07555,-1.701877 h 11.46527 q 2.37368,0 4.03077,1.701877 1.70187,1.657091 1.70187,4.030761 v 34.395833 h -5.73264 V 68.432325 h -11.46527 v 17.197916 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path97" />
+        <path
+           d="m 136.77196,85.630241 v -5.732638 h 5.73264 V 51.234408 h -5.73264 V 45.50177 h 17.19792 v 5.732638 h -5.73264 v 28.663195 h 5.73264 v 5.732638 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path99" />
+        <path
+           d="m 165.43516,85.630241 q -2.41846,0 -4.07555,-1.657091 -1.65709,-1.65709 -1.65709,-4.075547 v -5.732639 h 5.73264 v 5.732639 h 11.46527 V 68.432325 h -11.46527 q -2.41846,0 -4.07555,-1.657091 -1.65709,-1.657091 -1.65709,-4.075548 V 51.234408 q 0,-2.37367 1.65709,-4.030761 1.65709,-1.701877 4.07555,-1.701877 h 11.46527 q 2.37367,0 4.03076,1.701877 1.70188,1.657091 1.70188,4.030761 v 5.732639 h -5.73264 v -5.732639 h -11.46527 v 11.465278 h 11.46527 q 2.37367,0 4.03076,1.701877 1.70188,1.657091 1.70188,4.030762 v 11.465278 q 0,2.418457 -1.70188,4.075547 -1.65709,1.657091 -4.03076,1.657091 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path101" />
+        <path
+           d="M 205.56363,62.699686 V 51.234408 H 194.09835 V 62.699686 Z M 188.36571,85.630241 V 51.234408 q 0,-2.37367 1.65709,-4.030761 1.65709,-1.701877 4.07555,-1.701877 h 11.46528 q 2.37367,0 4.03076,1.701877 1.70187,1.657091 1.70187,4.030761 v 34.395833 h -5.73263 V 68.432325 h -11.46528 v 17.197916 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path103" />
+        <path
+           d="m 222.76154,85.630241 q -2.41846,0 -4.07555,-1.657091 -1.65709,-1.65709 -1.65709,-4.075547 v -8.598959 h 5.73264 v 8.598959 h 11.46528 V 45.50177 h 5.73264 v 34.395833 q 0,2.418457 -1.70188,4.075547 -1.65709,1.657091 -4.03076,1.657091 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path105" />
+        <path
+           d="M 245.69209,85.630241 V 45.50177 h 22.93056 v 5.732638 h -17.19792 v 11.465278 h 11.46528 v 5.732639 h -11.46528 v 11.465278 h 17.19792 v 5.732638 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path107" />
+      </g>
+      <g
+         aria-label="INDUSTRIAL"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+         id="text87">
+        <path
+           d="m 16.240706,148.91768 v -5.73264 h 5.732639 v -28.66319 h -5.732639 v -5.73264 h 17.197917 v 5.73264 h -5.732639 v 28.66319 h 5.732639 v 5.73264 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path110" />
+        <path
+           d="M 39.171262,148.91768 V 108.78921 H 44.9039 l 14.331597,28.66319 v -28.66319 h 5.732639 v 40.12847 H 59.235497 L 44.9039,120.25448 v 28.6632 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path112" />
+        <path
+           d="M 87.89869,143.18504 V 114.52185 H 76.433413 v 28.66319 z m -17.197916,5.73264 V 108.78921 H 87.89869 q 2.373671,0 4.030762,1.70187 1.701877,1.6571 1.701877,4.03077 v 28.66319 q 0,2.41846 -1.701877,4.07555 -1.657091,1.65709 -4.030762,1.65709 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path114" />
+        <path
+           d="m 105.09661,148.91768 q -2.41846,0 -4.07555,-1.65709 -1.657093,-1.65709 -1.657093,-4.07555 v -34.39583 h 5.732643 v 34.39583 h 11.46527 v -34.39583 h 5.73264 v 34.39583 q 0,2.41846 -1.70188,4.07555 -1.65709,1.65709 -4.03076,1.65709 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path116" />
+        <path
+           d="m 133.75981,148.91768 q -2.41846,0 -4.07555,-1.65709 -1.65709,-1.65709 -1.65709,-4.07555 v -5.73264 h 5.73264 v 5.73264 h 11.46527 v -11.46528 h -11.46527 q -2.41846,0 -4.07555,-1.65709 -1.65709,-1.65709 -1.65709,-4.07555 v -11.46527 q 0,-2.37367 1.65709,-4.03077 1.65709,-1.70187 4.07555,-1.70187 h 11.46527 q 2.37367,0 4.03077,1.70187 1.70187,1.6571 1.70187,4.03077 v 5.73263 h -5.73264 v -5.73263 h -11.46527 v 11.46527 h 11.46527 q 2.37367,0 4.03077,1.70188 1.70187,1.65709 1.70187,4.03076 v 11.46528 q 0,2.41846 -1.70187,4.07555 -1.6571,1.65709 -4.03077,1.65709 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path118" />
+        <path
+           d="m 162.42299,148.91768 v -34.39583 h -8.59896 v -5.73264 h 22.93056 v 5.73264 h -8.59896 v 34.39583 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path120" />
+        <path
+           d="m 199.68514,125.98712 v -11.46527 h -11.46527 v 11.46527 z m -17.19791,22.93056 v -40.12847 h 17.19791 q 2.37367,0 4.03077,1.70187 1.70187,1.6571 1.70187,4.03077 v 11.46527 q 0,2.41846 -1.70187,4.07555 -1.6571,1.65709 -4.03077,1.65709 h -2.86632 l 8.59896,17.19792 h -5.73264 l -8.59895,-17.19792 h -2.86632 v 17.19792 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path122" />
+        <path
+           d="m 211.15044,148.91768 v -5.73264 h 5.73263 v -28.66319 h -5.73263 v -5.73264 h 17.19791 v 5.73264 h -5.73264 v 28.66319 h 5.73264 v 5.73264 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path124" />
+        <path
+           d="m 251.27889,125.98712 v -11.46527 h -11.46527 v 11.46527 z m -17.19791,22.93056 v -34.39583 q 0,-2.37367 1.65709,-4.03077 1.65709,-1.70187 4.07555,-1.70187 h 11.46527 q 2.37367,0 4.03077,1.70187 1.70187,1.6571 1.70187,4.03077 v 34.39583 h -5.73264 v -17.19792 h -11.46527 v 17.19792 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path126" />
+        <path
+           d="m 262.74419,148.91768 v -40.12847 h 5.73263 v 34.39583 h 17.19792 v 5.73264 z"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45.86111069px;font-family:Manteka;-inkscape-font-specification:Manteka;stroke-width:0.26458332"
+           id="path128" />
+      </g>
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Avantgarde;-inkscape-font-specification:Avantgarde;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
+       x="211.15044"
+       y="114.52185"
+       id="text133"><tspan
+         sodipodi:role="line"
+         id="tspan131"
+         x="211.15044"
+         y="124.35294"
+         style="stroke-width:0.26458332"></tspan></text>
+  </g>
+</svg>

src/index.html

@@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="es">
+<html>
 <head>
   <meta charset="utf-8">
-  <title>Industria Paisaia | Memoria y paisaje industrial . Irizar</title>
+  <title i18n>Industria Paisaia | Memoria y paisaje industrial . Irizar</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

src/locale/messages.es.xlf

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+    </body>
+  </file>
+</xliff>

src/locale/messages.eu.xlf

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+    </body>
+  </file>
+</xliff>

src/locale/messages.xlf

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+    </body>
+  </file>
+</xliff>

src/styles.css

@@ -19,7 +19,7 @@ h1,h2 { font-family: "Oswald", sans-serif; text-transform:uppercase; font-weight
 
 app-home header { overflow:hidden; width:100%;height:100%;height:98vh;text-align:center;position:relative;}
 
-header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;}
+header.homepage { background-size:contain; background-repeat:no-repeat; background-position:center center;}
 
 header.section { background-attachment: fixed; }
 header.section > div {padding-top:10%;background-color:rgba(255,255,255,0.6); height:100vh;}
@@ -68,6 +68,8 @@ article {padding-top:80px;}
 article img {max-width:100%; height:auto; border:0px solid #f7886c;margin:20px auto;filter:grayscale(0);box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.4);}
 article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);}
 article p {font-size:1.2rem;line-height:2;}
+article div.article-content a { color:#000; font-weight:bold; background:#d2e8eb;padding:5px;}
+article div.article-content a:hover { background:#f7886c;}
 article h2 span {background:#d2e8eb;padding:10px;}
 article h2 {margin-bottom:20px;}
 article video {max-width:100%; height:auto;}