feat(post): prerender to get og meta html tags for LinkedIn post publication

nginx/default.conf

@@ -14,6 +14,14 @@ map $http_user_agent $outdated {
   "~Chrome/3[0-3]\."                      1;
 }
 
+map $http_user_agent $prerender {
+  default                                 0;
+  "~*twitterbot"                          1;
+  "~*facebookexternalhit"                 1;
+  "~*linkedinbot"                         1;
+  "~*Instagram"                           1;
+}
+
 server {
   listen 8080 default_server;
 
@@ -33,6 +41,24 @@ server {
   #allow 80.14.51.82;      # Erasme
   #deny all;
 
+  # Prerender news post for linkedin
+  location /actualites/details/ {
+    # resolver is needed by nginx to resolve proxy_pass url (https://stackoverflow.com/questions/57937222/502-bad-gateway-nginx-no-resolver-defined-to-resolve )
+    resolver  dns-default.openshift-dns.svc.cluster.local;
+
+    # Call from LinkedinBot User-Agent header will be passed to /api/render (puppeteer). We remove User-Agent header to be sure to avoid infinite redirection.
+    # proxy_set_header must be outside if clause (cf. https://stackoverflow.com/questions/16500594/why-i-cant-put-proxy-set-header-inside-an-if-clause )
+    proxy_set_header User-Agent "";
+    proxy_ssl_server_name on;
+    
+    if ($prerender = 1) {
+      proxy_pass https://$host/api/render/$uri;
+    }
+
+    # if no prerender, apply default angular route
+    try_files $uri $uri/ /index.html;
+  }
+  
   location /data-grandlyon-cities {
     proxy_pass https://data.grandlyon.com/fr/datapusher/ws/grandlyon/adr_voie_lieu.adrcomgl/all.json;
   }
@@ -55,14 +81,6 @@ server {
     proxy_pass http://res-server-service:3000;
   }
 
-  # temp to remove  
-  # https://ghost.org/docs/faq/proxying-https-infinite-loops/
-  location ~* (/blog) {
-    expires epoch;
-    proxy_no_cache 1;
-    proxy_pass http://res-ghost-service:2368;
-  }
-
   location /base-adresse/base-adresse-nationale/streets {
     proxy_pass https://passerelle.formulaireextranet.grandlyon.com/base-adresse/base-adresse-nationale/streets;
   }

nginx/local.conf

@@ -14,11 +14,37 @@ map $http_user_agent $outdated {
   "~Chrome/3[0-3]\."                      1;
 }
 
+map $http_user_agent $prerender {
+  default                                 0;
+  "~*twitterbot"                          1;
+  "~*facebookexternalhit"                 1;
+  "~*linkedinbot"                         1;
+  "~*Instagram"                           1;
+}
+
 server {
   listen 8080 default_server;
 
   root /usr/share/nginx/html/;
 
+  # Prerender news post for linkedin
+  location /actualites/details/ {
+    # Call from LinkedinBot User-Agent header will be passed to /api/render (puppeteer). We remove User-Agent header to be sure to avoid infinite redirection.
+    # proxy_set_header must be outside if clause (cf. https://stackoverflow.com/questions/16500594/why-i-cant-put-proxy-set-header-inside-an-if-clause )
+    proxy_set_header User-Agent "";
+
+    if ($prerender = 1) {
+      proxy_pass http://172.17.0.1:8030/api/render/$uri;
+    }
+
+    # if no prerender, apply default angular route
+    try_files $uri $uri/ /index.html;
+  }
+
+  location /data-grandlyon-cities {
+    proxy_pass https://data.grandlyon.com/fr/datapusher/ws/grandlyon/adr_voie_lieu.adrcomgl/all.json;
+  }
+
   location / {
     # Redirect outdated nav
     if ($outdated = 1){

src/app/post/components/post-details/post-details.component.ts

 import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
-import { DomSanitizer, Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
 import { RouterListenerService } from '../../../services/routerListener.service';
 import { Post } from '../../models/post.model';
 import { PostService } from '../../services/post.service';
@@ -16,31 +16,51 @@ export class PostDetailsComponent implements OnInit {
 
   constructor(
     private activatedRoute: ActivatedRoute,
+    private router: Router,
     private postService: PostService,
     private sanitizer: DomSanitizer,
     private routerListener: RouterListenerService,
     private readonly elementRef: ElementRef,
     private renderer: Renderer2,
     private title: Title,
+    private meta: Meta,
   ) {}
 
   ngOnInit(): void {
     if (history.state.data) {
+      // Case of post opened from the news page
       this.post = new Post(history.state.data);
       this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
+
+      // Set page properties (title, og tags)
+      this.setProperties();
     } else {
+      // Case of post page opened directly in the browser
       const postSlug = this.activatedRoute.snapshot.paramMap.get('slug');
       this.postService.getPost(postSlug).subscribe((post) => {
         this.post = post.posts[0];
         this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
+
+        // Set page properties (title, og tags)
+        this.setProperties();
       });
     }
     // add ghost JS
     const script = this.renderer.createElement('script');
     script.src = '/assets/ghost/cards.min.js';
     this.renderer.appendChild(this.elementRef.nativeElement, script);
+  }
+
+  private setProperties(): void {
     // set page title
     this.title.setTitle(this.post.title + " | Réseau des acteurs de l'inclusion numérique de la métropole de Lyon");
+
+    // set og tags (for linkedin post publication)
+    this.meta.updateTag({ property: 'og:title', content: this.post.title });
+    this.meta.removeTag("property='og:description'");
+    this.meta.updateTag({ property: 'og:type', content: 'article' });
+    this.meta.updateTag({ property: 'og:image', content: this.post.feature_image });
+    this.meta.updateTag({ property: 'og:url', content: `${window.location.origin}${this.router.url}` });
   }
 
   public backToPosts(): void {