diff --git a/nginx/default.conf b/nginx/default.conf
index 3cc40f5d51b4b832ff3d420489872c09c12131cb..d9dd99a9c0c914037148d986dafc390263838dbc 100644
--- a/nginx/default.conf
+++ b/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;
}
diff --git a/nginx/local.conf b/nginx/local.conf
index 9ebd913798568e0f2dde87f5addea1370daf49cd..1d9fa9f41b017e6582f265bd6d6ee5add88eca0f 100644
--- a/nginx/local.conf
+++ b/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){
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index f429423bca4b4e84662dd541c186d17b24b84d75..be250f225f0bc5b0e9d80c38b017465a5d8c141a 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,6 +1,6 @@
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 {