Merge pull request #217 from gilcierweb/master

Adding SEO in pages statics e book details.

src/app/components/about/about.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
-import { Contributor } from 'src/app/core/models/contributor';
-import { ContributorsService } from 'src/app/core/services/contributors/contributors.service';
+import {Contributor} from 'src/app/core/models/contributor';
+import {ContributorsService} from 'src/app/core/services/contributors/contributors.service';
+import {SeoService} from '../../core/services/seo/seo.service';
 
 @Component({
   selector: 'app-about',
@@ -15,9 +16,17 @@ export class AboutComponent implements OnInit {
 
   contributors: Contributor[] = [];
 
-  constructor(private contributorsService: ContributorsService) { }
+  constructor(private contributorsService: ContributorsService, private _seo: SeoService) {
+  }
 
   ngOnInit() {
+    this._seo.generateTags({
+      title: 'Quem somos.',
+      description: 'Sharebook é um projeto social. Um app livre e gratuito para ajudar as pessoas a doar ou ganhar livros.' +
+        'Foi fundado pelo Raffaello Damgaard após conversar com Vagner Nunes que incentivou a ideia. ' +
+        'Centenas de livros já foram doados em nossa plataforma. Em cada um deles temos muito orgulho e incentivo de continuar em frente.',
+      slug: 'quem-somos'
+    });
     this.contributors = this.contributorsService.getContributors();
   }
 

src/app/components/book/details/details.component.ts

@@ -1,16 +1,18 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-
-import { BookService } from '../../../core/services/book/book.service';
-import { Category } from '../../../core/models/category';
-import { FreightOptions } from '../../../core/models/freightOptions';
-import { UserService } from '../../../core/services/user/user.service';
-import { Book } from '../../../core/models/book';
-
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { RequestComponent } from '../request/request.component';
-import { AuthenticationService } from 'src/app/core/services/authentication/authentication.service';
-import { UserInfo } from 'src/app/core/models/userInfo';
+import {Component, OnInit} from '@angular/core';
+import {Router, ActivatedRoute} from '@angular/router';
+
+import {BookService} from '../../../core/services/book/book.service';
+import {Category} from '../../../core/models/category';
+import {FreightOptions} from '../../../core/models/freightOptions';
+import {UserService} from '../../../core/services/user/user.service';
+import {Book} from '../../../core/models/book';
+
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {RequestComponent} from '../request/request.component';
+import {AuthenticationService} from 'src/app/core/services/authentication/authentication.service';
+import {UserInfo} from 'src/app/core/models/userInfo';
+import {ToastrService} from 'ngx-toastr';
+import {SeoService} from '../../../core/services/seo/seo.service';
 
 @Component({
   selector: 'app-details',
@@ -44,7 +46,8 @@ export class DetailsComponent implements OnInit {
     private _activatedRoute: ActivatedRoute,
     private _router: Router,
     private _modalService: NgbModal,
-    private _scAuthentication: AuthenticationService) {
+    private _scAuthentication: AuthenticationService,
+    private _seo: SeoService) {
 
     this._scAuthentication.checkTokenValidity();
   }
@@ -74,68 +77,76 @@ export class DetailsComponent implements OnInit {
     if (slug) {
       this._scBook.getBySlug(slug).subscribe(x => {
 
-        this._scBook.getFreightOptions().subscribe(data => {
-          this.freightOptions = data;
+          this._scBook.getFreightOptions().subscribe(data => {
+            this.freightOptions = data;
 
-          const name = this.freightOptions.find(obj => obj.value.toString() === x.freightOption.toString());
-          this.freightName = name.text;
+            const name = this.freightOptions.find(obj => obj.value.toString() === x.freightOption.toString());
+            this.freightName = name.text;
 
-          this.bookInfo = x;
-          this.pageTitle = this.bookInfo.title;
-          this.available = this.bookInfo.approved;
-          const chooseDate = Math.floor(new Date(this.bookInfo.chooseDate).getTime() / (3600 * 24 * 1000));
-          const todayDate   = Math.floor(new Date().getTime() / (3600 * 24 * 1000));
+            this.bookInfo = x;
+            this.pageTitle = this.bookInfo.title;
+            this.available = this.bookInfo.approved;
+            const chooseDate = Math.floor(new Date(this.bookInfo.chooseDate).getTime() / (3600 * 24 * 1000));
+            const todayDate = Math.floor(new Date().getTime() / (3600 * 24 * 1000));
 
-          this.daysToChoose = chooseDate - todayDate;
-          this.chooseDateInfo = (!this.daysToChoose || this.daysToChoose <= 0) ? 'Hoje' : 'Daqui a ' + this.daysToChoose + ' dia(s)';
+            this.daysToChoose = chooseDate - todayDate;
+            this.chooseDateInfo = (!this.daysToChoose || this.daysToChoose <= 0) ? 'Hoje' : 'Daqui a ' + this.daysToChoose + ' dia(s)';
 
-          if (this.myUser.name) {
-            switch (x.freightOption.toString()) {
-              case 'City': {
-                if (this.bookInfo.user.address.city !== this.myUser.address.city) {
-                  this.isFreeFreight = false;
+            if (this.myUser.name) {
+              switch (x.freightOption.toString()) {
+                case 'City': {
+                  if (this.bookInfo.user.address.city !== this.myUser.address.city) {
+                    this.isFreeFreight = false;
+                  }
+                  break;
                 }
-                break;
-              }
-              case 'State': {
-                if (this.bookInfo.user.address.state !== this.myUser.address.state) {
+                case 'State': {
+                  if (this.bookInfo.user.address.state !== this.myUser.address.state) {
+                    this.isFreeFreight = false;
+                  }
+                  break;
+                }
+                case 'WithoutFreight': {
                   this.isFreeFreight = false;
+                  break;
+                }
+                default: {
+                  this.isFreeFreight = true;
                 }
-                break;
-              }
-              case 'WithoutFreight': {
-                this.isFreeFreight = false;
-                break;
-              }
-              default: {
-                this.isFreeFreight = true;
               }
             }
-          }
 
-          if (this.userProfile) {
-            this._scBook.getRequested(x.id).subscribe(requested => {
-              this.requested = requested.value.bookRequested;
+            if (this.userProfile) {
+              this._scBook.getRequested(x.id).subscribe(requested => {
+                this.requested = requested.value.bookRequested;
+                this.state = 'ready';
+              });
+            } else {
               this.state = 'ready';
+            }
+
+            this._seo.generateTags({
+              title: this.bookInfo.title,
+              description: this.bookInfo.synopsis,
+              image: this.bookInfo.imageUrl,
+              slug: slug
             });
-          } else {
-            this.state = 'ready';
-          }
+
+          });
+        }
+        , err => {
+          console.error(err);
+          this.pageTitle = 'Ops... Não encontramos esse livro :/';
+          this.state = 'not-found';
         });
-      }
-      , err => {
-        console.error(err);
-        this.pageTitle = 'Ops... Não encontramos esse livro :/';
-        this.state = 'not-found';
-      });
     } else {
       this.pageTitle = 'Ops... Não encontramos esse livro :/';
       this.state = 'not-found';
     }
   }
 
   onRequestBook() {
-    const modalRef = this._modalService.open(RequestComponent, { backdropClass: 'light-blue-backdrop', centered: true });
+    const modalRef = this._modalService.open(RequestComponent, {backdropClass: 'light-blue-backdrop', centered: true});
 
     modalRef.result.then((result) => {
       if (result === 'Success') {
@@ -151,7 +162,7 @@ export class DetailsComponent implements OnInit {
   }
 
   onLoginBook() {
-    this._router.navigate(['/login'], { queryParams: { returnUrl: this._activatedRoute.snapshot.url.join('/') } });
+    this._router.navigate(['/login'], {queryParams: {returnUrl: this._activatedRoute.snapshot.url.join('/')}});
   }
 
   onConvertImageToBase64(event: any) {

src/app/components/book/form/form.component.ts

@@ -12,6 +12,8 @@ import { FreightOptions } from '../../../core/models/freightOptions';
 import { User } from '../../../core/models/user';
 import { UserService } from '../../../core/services/user/user.service';
 import { ToastrService } from 'ngx-toastr';
+import {ContributorsService} from '../../../core/services/contributors/contributors.service';
+import {SeoService} from '../../../core/services/seo/seo.service';
 
 
 @Component({
@@ -46,13 +48,25 @@ export class FormComponent implements OnInit {
     private _formBuilder: FormBuilder,
     private _activatedRoute: ActivatedRoute,
     private _toastr: ToastrService,
-    private _ng2ImgMaxService: Ng2ImgMaxService) {
+    private _ng2ImgMaxService: Ng2ImgMaxService,
+    private _seo: SeoService) {
 
     /*  Inicializa o formGroup defatult por que é obrigatório  */
     this.createFormGroup();
   }
 
   ngOnInit() {
+
+    this._seo.generateTags({
+      title: 'Doe um livro.',
+      description: 'Doe um livro e você vai ficar emocionado com a experiência. Nossos usuários tem relatado que eh emocionante. ' +
+        'Apesar de ser no anonimato vc se envolve com muitas histórias incríveis. ' +
+        'Vc não faz ideia de como tem pessoas que realmente precisam. ' +
+        'E da força transformadora que um simples livro causa na vida de uma pessoa. ' +
+        'E que você ao escolher um ganhador, passa a fazer parte dessa história.',
+      slug: 'doar-livro'
+    });
+
     this.findProfile();
 
     if (this._scUser.getLoggedUserFromLocalStorage()) {

src/app/components/contact-us/contact-us.component.ts

@@ -1,35 +1,43 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators, FormArray, FormControl} from '@angular/forms';
 import * as AppConst from '../../core/utils/app.const';
-import { ContactUsService } from '../../core/services/contact-us/contact-us.service';
-import { ToastrService } from 'ngx-toastr';
+import {ContactUsService} from '../../core/services/contact-us/contact-us.service';
+import {ToastrService} from 'ngx-toastr';
+import {SeoService} from '../../core/services/seo/seo.service';
 
 @Component({
   selector: 'app-contact-us',
   templateUrl: './contact-us.component.html',
   styleUrls: ['./contact-us.component.css']
 })
 
-
 export class ContactUsComponent implements OnInit {
   formGroup: FormGroup;
   isSent: Boolean;
   isLoading: Boolean = false;
   pageTitle: string;
 
-  constructor(private _formBuilder: FormBuilder, private _scContactUs: ContactUsService, private _toastr: ToastrService) {
+  constructor(private _formBuilder: FormBuilder, private _scContactUs: ContactUsService,
+              private _toastr: ToastrService, private _seo: SeoService) {
     this.createFormGroup();
-   }
+  }
 
   ngOnInit() {
     // TODO: receber mensagem por query string, pra integrar com outras pages.
+    this._seo.generateTags({
+      title: 'Fale Conosco',
+      description: 'Tem alguma dúvida, sugestão de melhoria ou crítica? Entre em contato conosco.' +
+        ' É sempre um prazer atendê-lo.Também estamos buscando apoiadores e parceiros pro projeto. ' +
+        'Se você conhece alguém, não hesite em entrar em contato. Obrigado.',
+      slug: 'fale-conosco'
+    });
   }
 
   createFormGroup() {
     this.formGroup = this._formBuilder.group({
       id: '',
       name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(200)]],
-      email: ['',  [Validators.required, Validators.pattern(AppConst.emailPattern)]],
+      email: ['', [Validators.required, Validators.pattern(AppConst.emailPattern)]],
       phone: ['', [Validators.pattern(AppConst.phonePattern)]],
       message: ['', [Validators.required, Validators.minLength(20), Validators.maxLength(512)]],
       recaptchaReactive: new FormControl(null, Validators.required)

src/app/components/contribute-project/contribute-project.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
-import { CardItem } from '../../core/models/card';
-import { TechnologiesService } from '../../core/services/technologies/technologies.service';
-import { ToolsService } from '../../core/services/tools/tools.service';
-import { CareersService } from '../../core/services/careers/careers.service';
+import {CardItem} from '../../core/models/card';
+import {TechnologiesService} from '../../core/services/technologies/technologies.service';
+import {ToolsService} from '../../core/services/tools/tools.service';
+import {CareersService} from '../../core/services/careers/careers.service';
+import {ToastrService} from 'ngx-toastr';
+import {SeoService} from '../../core/services/seo/seo.service';
 
 @Component({
   selector: 'app-contribute-project',
@@ -24,9 +26,21 @@ export class ContributeProjectComponent implements OnInit {
   constructor(
     private technologiesService: TechnologiesService,
     private toolsService: ToolsService,
-    private careersService: CareersService) { }
+    private careersService: CareersService,
+    private _seo: SeoService) {
+  }
 
   ngOnInit() {
+
+    this._seo.generateTags({
+      title: 'Apoie o projeto.',
+      description: 'Precisamos da sua ajuda. Tem muitas formas de ajudar. Todos são bem vindos, seja para contribuir ou aprender. ' +
+        'Você pode ajudar contribuindo em nosso código-fonte open source. ' +
+        'Temos .Net core no backend, Angular no front e Ionic no mobile. ' +
+        'Você vai se sentir confortável porque temos um cuidado especial em ter um código limpo e fácil de entender. ' +
+        'Acreditamos que cada commit conta uma estória, e que isso incentiva o aprendizado.',
+      slug: 'apoie-projeto'
+    });
     this.technologies = this.technologiesService.getTechnologies();
     this.tools = this.toolsService.getTools();
     this.careers = this.careersService.getCareers();

src/app/core/services/seo/seo.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SeoService } from './seo.service';
+
+describe('SeoService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SeoService = TestBed.get(SeoService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/seo/seo.service.ts

@@ -0,0 +1,40 @@
+import {Injectable} from '@angular/core';
+import {Meta} from '@angular/platform-browser';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeoService {
+
+  constructor(private meta: Meta) {
+  }
+
+  public generateTags(config) {
+    // default values
+    config = {
+      title: 'ShareBook - Doe ou ganhe livros.',
+      description: 'Sharebook é um projeto social. Um app livre e gratuito para ajudar as pessoas a doar ou ganhar livros.' +
+        ' Doe um único livro para você sentir a experiência. Do início ao fim. Nossos usuários tem relatado que é emocionante.' +
+        ' Apesar de ser no anonimato você se envolve com muitas histórias incríveis.' +
+        ' Você não faz ideia de como tem pessoas que realmente precisam.' +
+        ' E da força transformadora que um simples livro causa na vida de uma pessoa.' +
+        ' E que você ao escolher um ganhador, passa a fazer parte dessa história.',
+      image: 'https://www.sharebook.com.br/assets/img/sharebook-share.png',
+      slug: '',
+      ...config
+    };
+
+    this.meta.updateTag({name: 'twitter:card', content: 'summary'});
+    this.meta.updateTag({name: 'twitter:site', content: '@sharebook'});
+    this.meta.updateTag({name: 'twitter:title', content: config.title});
+    this.meta.updateTag({name: 'twitter:description', content: config.description});
+    this.meta.updateTag({name: 'twitter:image', content: config.image});
+
+    this.meta.updateTag({property: 'og:type', content: 'article'});
+    this.meta.updateTag({property: 'og:site_name', content: 'ShareBook'});
+    this.meta.updateTag({property: 'og:title', content: config.title});
+    this.meta.updateTag({property: 'og:description', content: config.description});
+    this.meta.updateTag({property: 'og:image', content: config.image});
+    this.meta.updateTag({property: 'og:url', content: `https://www.sharebook.com.br/${config.slug}`});
+  }
+}