62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
|
import { Injectable } from '@angular/core';
|
||
|
|
import { Meta } from '@angular/platform-browser';
|
||
|
|
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
|
||
|
|
import { filter, map, switchMap } from 'rxjs/operators';
|
||
|
|
import { combineLatest } from 'rxjs';
|
||
|
|
import { StateService } from './state.service';
|
||
|
|
import { LanguageService } from './language.service';
|
||
|
|
|
||
|
|
@Injectable({
|
||
|
|
providedIn: 'root'
|
||
|
|
})
|
||
|
|
export class OpenGraphService {
|
||
|
|
network = '';
|
||
|
|
defaultImageUrl = '';
|
||
|
|
|
||
|
|
constructor(
|
||
|
|
private metaService: Meta,
|
||
|
|
private stateService: StateService,
|
||
|
|
private LanguageService: LanguageService,
|
||
|
|
private router: Router,
|
||
|
|
private activatedRoute: ActivatedRoute,
|
||
|
|
) {
|
||
|
|
// save og:image tag from original template
|
||
|
|
const initialOgImageTag = metaService.getTag("property='og:image'");
|
||
|
|
this.defaultImageUrl = initialOgImageTag?.content || 'https://mempool.space/resources/mempool-space-preview.png';
|
||
|
|
this.router.events.pipe(
|
||
|
|
filter(event => event instanceof NavigationEnd),
|
||
|
|
map(() => this.activatedRoute),
|
||
|
|
map(route => {
|
||
|
|
while (route.firstChild) route = route.firstChild;
|
||
|
|
return route;
|
||
|
|
}),
|
||
|
|
filter(route => route.outlet === 'primary'),
|
||
|
|
switchMap(route => route.data),
|
||
|
|
).subscribe((data) => {
|
||
|
|
if (data.ogImage) {
|
||
|
|
this.setOgImage();
|
||
|
|
} else {
|
||
|
|
this.clearOgImage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
setOgImage() {
|
||
|
|
const lang = this.LanguageService.getLanguage();
|
||
|
|
const ogImageUrl = `${window.location.protocol}//${window.location.host}/render/${lang}/preview${this.router.url}`;
|
||
|
|
this.metaService.updateTag({ property: 'og:image', content: ogImageUrl });
|
||
|
|
this.metaService.updateTag({ property: 'twitter:image:src', content: ogImageUrl });
|
||
|
|
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
|
||
|
|
this.metaService.updateTag({ property: 'og:image:width', content: '1024' });
|
||
|
|
this.metaService.updateTag({ property: 'og:image:height', content: '512' });
|
||
|
|
}
|
||
|
|
|
||
|
|
clearOgImage() {
|
||
|
|
this.metaService.updateTag({ property: 'og:image', content: this.defaultImageUrl });
|
||
|
|
this.metaService.updateTag({ property: 'twitter:image:src', content: this.defaultImageUrl });
|
||
|
|
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });
|
||
|
|
this.metaService.updateTag({ property: 'og:image:width', content: '1000' });
|
||
|
|
this.metaService.updateTag({ property: 'og:image:height', content: '500' });
|
||
|
|
}
|
||
|
|
}
|