machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5074 from mempool/mononaut/meta-slurper

Browse Source 
Preserve site-specific meta title/descriptions/canonical urls
This commit is contained in:
softsimon 2024-05-16 23:19:03 +07:00 committed by GitHub
commit 97817e770f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/components/app/app.component.ts
View File

@ -5,6 +5,7 @@ import { StateService } from '../../services/state.service';
import { OpenGraphService } from '../../services/opengraph.service'; import { OpenGraphService } from '../../services/opengraph.service';
import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'; import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap';
import { ThemeService } from '../../services/theme.service'; import { ThemeService } from '../../services/theme.service';
import { SeoService } from '../../services/seo.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -13,12 +14,11 @@ import { ThemeService } from '../../services/theme.service';
providers: [NgbTooltipConfig] providers: [NgbTooltipConfig]
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
link: HTMLElement = document.getElementById('canonical');
constructor( constructor(
public router: Router, public router: Router,
private stateService: StateService, private stateService: StateService,
private openGraphService: OpenGraphService, private openGraphService: OpenGraphService,
private seoService: SeoService,
private themeService: ThemeService, private themeService: ThemeService,
private location: Location, private location: Location,
tooltipConfig: NgbTooltipConfig, tooltipConfig: NgbTooltipConfig,
@ -54,11 +54,7 @@ export class AppComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.router.events.subscribe((val) => { this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd) { if (val instanceof NavigationEnd) {
let domain = 'mempool.space'; this.seoService.updateCanonical(this.location.path());
if (this.stateService.env.BASE_MODULE === 'liquid') {
domain = 'liquid.network';
}
this.link.setAttribute('href', 'https://' + domain + this.location.path());
} }
}); });
} }

24
frontend/src/app/services/seo.service.ts
View File

@ -11,8 +11,9 @@ export class SeoService {
network = ''; network = '';
baseTitle = 'mempool'; baseTitle = 'mempool';
baseDescription = 'Explore the full Bitcoin ecosystem® with The Mempool Open Source Project®.'; baseDescription = 'Explore the full Bitcoin ecosystem® with The Mempool Open Source Project®.';
baseDomain = 'mempool.space';
canonicalLink: HTMLElement = document.getElementById('canonical'); canonicalLink: HTMLLinkElement = document.getElementById('canonical') as HTMLLinkElement;
constructor( constructor(
private titleService: Title, private titleService: Title,
@ -21,6 +22,16 @@ export class SeoService {
private router: Router, private router: Router,
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
) { ) {
// save original meta tags
this.baseDescription = metaService.getTag('name=\'description\'')?.content || this.baseDescription;
this.baseTitle = titleService.getTitle()?.split(' - ')?.[0] || this.baseTitle;
try {
const canonicalUrl = new URL(this.canonicalLink?.href || '');
this.baseDomain = canonicalUrl?.host;
} catch (e) {
// leave as default
}
this.stateService.networkChanged$.subscribe((network) => this.network = network); this.stateService.networkChanged$.subscribe((network) => this.network = network);
this.router.events.pipe( this.router.events.pipe(
filter(event => event instanceof NavigationEnd), filter(event => event instanceof NavigationEnd),
@ -72,11 +83,7 @@ export class SeoService {
} }
updateCanonical(path) { updateCanonical(path) {
let domain = 'mempool.space'; this.canonicalLink.setAttribute('href', 'https://' + this.baseDomain + path);
if (this.stateService.env.BASE_MODULE === 'liquid') {
domain = 'liquid.network';
}
this.canonicalLink.setAttribute('href', 'https://' + domain + path);
} }
getTitle(): string { getTitle(): string {
@ -94,10 +101,7 @@ export class SeoService {
} }
getDescription(): string { getDescription(): string {
if ( (this.network === 'testnet') || (this.network === 'testnet4') || (this.network === 'signet') || (this.network === '') || (this.network == 'mainnet') ) return this.baseDescription;
return this.baseDescription + ' See the real-time status of your transactions, browse network stats, and more.';
if ( (this.network === 'liquid') || (this.network === 'liquidtestnet') )
return this.baseDescription + ' See Liquid transactions & assets, get network info, and more.';
} }
ucfirst(str: string) { ucfirst(str: string) {