Seo upgrades (#32)

* wip seo upgrade, need fixing sitemap.xml

* fix loading lib http on server side

* fix loading seo sub class

* fix all

package.json

@@ -28,6 +28,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@funixproductions/funixproductions-requests": "^0.0.3",
     "@ng-bootstrap/ng-bootstrap": "^15.1.0",
     "@nguniversal/express-engine": "^16.1.2",
     "@popperjs/core": "^2.11.8",

server.ts

@@ -1,12 +1,12 @@
 import 'zone.js/node';
 
-import { APP_BASE_HREF } from '@angular/common';
-import { ngExpressEngine } from '@nguniversal/express-engine';
+import {APP_BASE_HREF} from '@angular/common';
+import {ngExpressEngine} from '@nguniversal/express-engine';
 import * as express from 'express';
-import { existsSync } from 'fs';
-import { join } from 'path';
+import {existsSync} from 'fs';
+import {join} from 'path';
 
-import { AppServerModule } from './src/main.server';
+import {AppServerModule} from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnDestroy} from '@angular/core';
-import NotificationService from "./services/core/notifications/services/NotificationService";
+import NotificationService from "./services/notifications/services/NotificationService";
 
 @Component({
   selector: 'app-root',

src/app/components/notification/notification.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
-import NotificationService from "../../services/core/notifications/services/NotificationService";
-import {NotificationType} from "../../services/core/notifications/enums/NotificationType";
+import NotificationService from "../../services/notifications/services/NotificationService";
+import {NotificationType} from "../../services/notifications/enums/NotificationType";
 import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 import {faCheckCircle, faExclamationTriangle, faInfoCircle} from "@fortawesome/free-solid-svg-icons";
 

src/app/components/pacifista-page/pacifista-page.ts

@@ -0,0 +1,65 @@
+import {Component, OnInit} from "@angular/core";
+import {Title} from "@angular/platform-browser";
+
+@Component({ template: ''})
+export abstract class PacifistaPage implements OnInit {
+
+  protected title: string = '';
+  protected canonicalPath: string = '';
+  protected pageDescription: string = "Bienvenue sur Pacifista, le serveur Minecraft français survie créatif en 1.19 ! Rejoignez une communauté bienveillante, profitez d'un staff attentif et découvrez nos plugins faits maison.";
+  protected pageImage: string = 'https://pacifista.fr/assets/img/pacifista-logo.webp';
+
+  /**
+   * seo
+   * @param titleService the titleServiceManager
+   * @param doc Inject(DOCUMENT) private doc: Document
+   */
+  constructor(protected titleService: Title,
+              private doc: Document) {
+  }
+
+  ngOnInit(): void {
+    this.updateTitle();
+    this.updateCanonicalPath();
+    this.updateMetaTags();
+    this.onPageInit();
+  }
+
+  protected onPageInit() {
+  }
+
+  private updateTitle(): void {
+    const prefix = this.title.length > 0 ? this.title + ' - ' : '';
+    this.titleService.setTitle(prefix + 'Pacifista Minecraft - Serveur Minecraft Survie Creatif Français en 1.19');
+  }
+
+  private updateCanonicalPath(): void {
+    const canonical = this.doc.createElement('link');
+    canonical.setAttribute('rel', 'canonical');
+    canonical.setAttribute('href', 'https://pacifista.fr/' + this.canonicalPath);
+    this.doc.head.appendChild(canonical);
+  }
+
+  private updateMetaTags(): void {
+    this.setMetaTag('description', this.pageDescription)
+
+    this.setMetaTag('og:title', this.titleService.getTitle());
+    this.setMetaTag('og:description', this.pageDescription);
+    this.setMetaTag('og:image', this.pageImage);
+    this.setMetaTag('og:url', 'https://pacifista.fr/' + this.canonicalPath);
+
+    this.setMetaTag('twitter:title', this.titleService.getTitle());
+    this.setMetaTag('twitter:description', this.pageDescription);
+    this.setMetaTag('twitter:image', this.pageImage);
+    this.setMetaTag('twitter:url', 'https://pacifista.fr/' + this.canonicalPath);
+  }
+
+  private setMetaTag(name: string, content: string): void {
+    const meta = this.doc.createElement('meta');
+    meta.setAttribute('name', name);
+    meta.setAttribute('property', name);
+    meta.setAttribute('content', content);
+    this.doc.head.appendChild(meta);
+  }
+
+}

src/app/pages/accueil/accueil.component.ts

@@ -1,9 +1,18 @@
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {Title} from "@angular/platform-browser";
+import {PacifistaPage} from "../../components/pacifista-page/pacifista-page";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-accueil',
   templateUrl: './accueil.component.html',
   styleUrls: ['./accueil.component.scss']
 })
-export class AccueilComponent {
+export class AccueilComponent extends PacifistaPage {
+
+  constructor(title: Title,
+              @Inject(DOCUMENT) doc: Document) {
+    super(title, doc);
+  }
+
 }

src/app/pages/accueil/components/news/news-accueil-section.component.ts

@@ -1,7 +1,13 @@
-import {AfterViewInit, Component} from '@angular/core';
-import NewsDTO from "../../../../services/pacifista-api/news/dtos/NewsDTO";
-import NewsService from "../../../../services/pacifista-api/news/services/NewsService";
-import {PageOption} from "../../../../services/core/http/dtos/PaginatedDTO";
+import {AfterViewInit, Component, Inject, PLATFORM_ID} from '@angular/core';
+import {
+  PacifistaNewsDTO,
+  PacifistaNewsService,
+  PageOption,
+  QueryBuilder
+} from "@funixproductions/funixproductions-requests";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../../../environments/environment";
+import {isPlatformBrowser} from "@angular/common";
 
 @Component({
   selector: 'news-section',
@@ -10,18 +16,24 @@ import {PageOption} from "../../../../services/core/http/dtos/PaginatedDTO";
 })
 export class NewsAccueilSectionComponent implements AfterViewInit {
 
-  newsList: NewsDTO[] = [];
+  private readonly newsService: PacifistaNewsService;
+
+  newsList: PacifistaNewsDTO[] = [];
   totalNews: number = 0;
 
-  constructor(private newsService: NewsService) {
+  constructor(@Inject(PLATFORM_ID) private platfomId: Object,
+              httpClient: HttpClient) {
+    this.newsService = new PacifistaNewsService(httpClient, environment.production);
   }
 
   ngAfterViewInit(): void {
+    if (!isPlatformBrowser(this.platfomId)) return;
+
     const pageOption = new PageOption();
     pageOption.elemsPerPage = 3;
     pageOption.sort = 'createdAt:desc';
 
-    this.newsService.find(pageOption, null).subscribe(newsList => {
+    this.newsService.find(pageOption, new QueryBuilder()).subscribe(newsList => {
       this.newsList = newsList.content;
       this.totalNews = newsList.totalElementsDatabase;
     });

src/app/pages/join/join.component.ts

@@ -1,19 +1,22 @@
-import { Component } from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {Title} from "@angular/platform-browser";
+import {PacifistaPage} from "../../components/pacifista-page/pacifista-page";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-join',
   templateUrl: './join.component.html',
   styleUrls: ['./join.component.scss']
 })
-export class JoinComponent {
+export class JoinComponent extends PacifistaPage {
 
-  constructor(private titleService: Title) {
-    const title: string = titleService.getTitle();
+  protected override readonly title: string = 'Se connecter'
+  protected override readonly canonicalPath: string = 'join'
+  protected override readonly pageDescription: string = 'Découvrez comment rejoindre Pacifista en 1.19 : votre guide pour jouer sur notre serveur Minecraft survie, créatif français !';
 
-    if (!title.startsWith("Nous rejoindre")) {
-      titleService.setTitle('Nous rejoindre - ' + title);
-    }
+  constructor(title: Title,
+      @Inject(DOCUMENT) doc: Document) {
+    super(title,  doc);
   }
 
 }

src/app/pages/legal/cgu/cgu.component.ts

@@ -1,19 +1,22 @@
-import { Component } from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {Title} from "@angular/platform-browser";
+import {PacifistaPage} from "../../../components/pacifista-page/pacifista-page";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-cgu',
   templateUrl: './cgu.component.html',
   styleUrls: ['./cgu.component.scss']
 })
-export class CguComponent {
+export class CguComponent extends PacifistaPage {
 
-  constructor(private titleService: Title) {
-    const title: string = titleService.getTitle();
+  protected override readonly title: string = "CGU";
+  protected override readonly canonicalPath: string = "cgu";
+  protected override readonly pageDescription: string = "Conditions générales d'utilisation de Pacifista.";
 
-    if (!title.startsWith("CGU")) {
-      titleService.setTitle('CGU - ' + title);
-    }
+  constructor(title: Title,
+              @Inject(DOCUMENT) doc: Document) {
+    super(title, doc);
   }
 
 }

src/app/pages/legal/cgv/cgv.component.ts

@@ -1,19 +1,22 @@
-import {Component} from '@angular/core';
+import {Component, Inject} from '@angular/core';
 import {Title} from "@angular/platform-browser";
+import {PacifistaPage} from "../../../components/pacifista-page/pacifista-page";
+import {DOCUMENT} from "@angular/common";
 
 @Component({
   selector: 'app-cgv',
   templateUrl: './cgv.component.html',
   styleUrls: ['./cgv.component.scss']
 })
-export class CgvComponent {
+export class CgvComponent extends PacifistaPage {
 
-  constructor(private titleService: Title) {
-    const title: string = titleService.getTitle();
+  protected override readonly title: string = 'CGV';
+  protected override readonly canonicalPath: string = 'cgv';
+  protected override readonly pageDescription: string = 'Conditions générales de vente de Pacifista.';
 
-    if (!title.startsWith("CGV")) {
-      titleService.setTitle('CGV - ' + title);
-    }
+  constructor(title: Title,
+              @Inject(DOCUMENT) doc: Document) {
+    super(title, doc);
   }
 
 }

src/app/pages/news/news-card/news-card.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {faClock, faComments, faThumbsUp, faUser} from '@fortawesome/free-solid-svg-icons';
-import NewsDTO from "../../../services/pacifista-api/news/dtos/NewsDTO";
+import {PacifistaNewsDTO} from "@funixproductions/funixproductions-requests";
 
 @Component({
   selector: 'app-news-card',
@@ -14,6 +14,6 @@ export class NewsCardComponent {
   protected readonly faThumbsUp = faThumbsUp;
   protected readonly faComment = faComments;
 
-  @Input() news: NewsDTO = new NewsDTO();
+  @Input() news: PacifistaNewsDTO = new PacifistaNewsDTO();
 
 }

src/app/pages/news/news-list-page/news-list-page.component.html

@@ -3,7 +3,7 @@ <h1>News</h1>
 
   <p>
     Voici les news du serveur Minecraft Pacifista.<br/>
-    Vous pouvez aussi les retrouver sur notre <a href="https://twitter.com/pacifista-mc"><fa-icon [icon]="twitter"></fa-icon> Twitter</a>.
+    Vous pouvez aussi les retrouver sur notre <a href="https://x.com/pacifista_mc"><fa-icon [icon]="twitter"></fa-icon> Twitter</a>.
   </p>
   <h3>
     {{ totalNews }} news au total