diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index c9f7e19d4..28faa9595 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -87,7 +87,10 @@ let routes: Routes = [ children: [ { path: ':id', - component: BlockComponent + component: BlockComponent, + data: { + ogImage: true + } }, ], }, @@ -190,7 +193,10 @@ let routes: Routes = [ children: [ { path: ':id', - component: BlockComponent + component: BlockComponent, + data: { + ogImage: true + } }, ], }, @@ -290,7 +296,10 @@ let routes: Routes = [ children: [ { path: ':id', - component: BlockComponent + component: BlockComponent, + data: { + ogImage: true + } }, ], }, @@ -325,6 +334,14 @@ let routes: Routes = [ path: 'block/:id', component: BlockPreviewComponent }, + { + path: 'testnet/block/:id', + component: BlockPreviewComponent + }, + { + path: 'signet/block/:id', + component: BlockPreviewComponent + }, ], }, { @@ -416,7 +433,10 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') { children: [ { path: ':id', - component: BlockComponent + component: BlockComponent, + data: { + ogImage: true + } }, ], }, @@ -520,7 +540,10 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') { children: [ { path: ':id', - component: BlockComponent + component: BlockComponent, + data: { + ogImage: true + } }, ], }, @@ -560,6 +583,20 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') { }, ], }, + { + path: 'preview', + component: MasterPagePreviewComponent, + children: [ + { + path: 'block/:id', + component: BlockPreviewComponent + }, + { + path: 'testnet/block/:id', + component: BlockPreviewComponent + }, + ], + }, { path: 'status', component: StatusViewComponent diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 97c8f9957..b6b8859f6 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -10,6 +10,7 @@ import { EnterpriseService } from './services/enterprise.service'; import { WebsocketService } from './services/websocket.service'; import { AudioService } from './services/audio.service'; import { SeoService } from './services/seo.service'; +import { OpenGraphService } from './services/opengraph.service'; import { SharedModule } from './shared/shared.module'; import { StorageService } from './services/storage.service'; import { HttpCacheInterceptor } from './services/http-cache.interceptor'; @@ -36,6 +37,7 @@ import { CapAddressPipe } from './shared/pipes/cap-address-pipe/cap-address-pipe WebsocketService, AudioService, SeoService, + OpenGraphService, StorageService, EnterpriseService, LanguageService, diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts index e060fae54..c96489454 100644 --- a/frontend/src/app/components/app/app.component.ts +++ b/frontend/src/app/components/app/app.component.ts @@ -2,6 +2,7 @@ import { Location } from '@angular/common'; import { Component, HostListener, OnInit, Inject, LOCALE_ID, HostBinding } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { StateService } from 'src/app/services/state.service'; +import { OpenGraphService } from 'src/app/services/opengraph.service'; import { NgbTooltipConfig } from '@ng-bootstrap/ng-bootstrap'; @Component({ @@ -16,6 +17,7 @@ export class AppComponent implements OnInit { constructor( public router: Router, private stateService: StateService, + private openGraphService: OpenGraphService, private location: Location, tooltipConfig: NgbTooltipConfig, @Inject(LOCALE_ID) private locale: string, diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html index 5cfc31c70..c47ea236e 100644 --- a/frontend/src/app/components/block/block-preview.component.html +++ b/frontend/src/app/components/block/block-preview.component.html @@ -26,10 +26,6 @@ {{ block?.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} - - Size - - Weight @@ -51,12 +47,6 @@ - - Subsidy + fees: - - - - Miner diff --git a/frontend/src/app/components/block/block-preview.component.scss b/frontend/src/app/components/block/block-preview.component.scss index fb51413e3..6099f5d47 100644 --- a/frontend/src/app/components/block/block-preview.component.scss +++ b/frontend/src/app/components/block/block-preview.component.scss @@ -1,7 +1,27 @@ .box { - padding: 2rem 6rem; + padding: 2rem 3rem; } .block-title { - margin-bottom: 0.5em; + margin-bottom: 0.75em; + font-size: 42px; + + ::ng-deep .next-previous-blocks { + font-size: 42px; + } +} + +.table { + font-size: 24px; +} + +.chart-container { + flex-grow: 0; + flex-shrink: 0; + width: 420px; + min-width: 420px; +} + +::ng-deep .symbol { + font-size: 18px; } diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss index eebb9a75b..0384e0f86 100644 --- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss +++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss @@ -20,6 +20,7 @@ align-items: center; background: #11131f; text-align: start; + font-size: 1.2em; } .footer-brand { diff --git a/frontend/src/app/services/opengraph.service.ts b/frontend/src/app/services/opengraph.service.ts new file mode 100644 index 000000000..48064fdea --- /dev/null +++ b/frontend/src/app/services/opengraph.service.ts @@ -0,0 +1,61 @@ +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' }); + } +} diff --git a/frontend/src/app/services/seo.service.ts b/frontend/src/app/services/seo.service.ts index 772c0410a..01ed7ae8c 100644 --- a/frontend/src/app/services/seo.service.ts +++ b/frontend/src/app/services/seo.service.ts @@ -20,11 +20,13 @@ export class SeoService { setTitle(newTitle: string): void { this.titleService.setTitle(newTitle + ' - ' + this.getTitle()); this.metaService.updateTag({ property: 'og:title', content: newTitle}); + this.metaService.updateTag({ property: 'twitter:title', content: newTitle}); } resetTitle(): void { this.titleService.setTitle(this.getTitle()); this.metaService.updateTag({ property: 'og:title', content: this.getTitle()}); + this.metaService.updateTag({ property: 'twitter:title', content: this.getTitle()}); } setEnterpriseTitle(title: string) { diff --git a/unfurler/src/index.ts b/unfurler/src/index.ts index 8d0011a44..998beb1eb 100644 --- a/unfurler/src/index.ts +++ b/unfurler/src/index.ts @@ -36,7 +36,7 @@ class Server { maxConcurrency: config.PUPPETEER.CLUSTER_SIZE, puppeteerOptions: puppeteerConfig, }); - await this.cluster?.task(async (args) => { return this.renderPreviewTask(args) }); + await this.cluster?.task(async (args) => { return this.clusterTask(args) }); this.setUpRoutes(); @@ -52,31 +52,45 @@ class Server { this.app.get('*', (req, res) => { return this.renderHTML(req, res) }) } - async renderPreviewTask({ page, data: url }) { + async clusterTask({ page, data: { url, action } }) { await page.goto(url, { waitUntil: "domcontentloaded" }); - await page.evaluate(async () => { - // wait for all images to finish loading - const imgs = Array.from(document.querySelectorAll("img")); - await Promise.all([ - document.fonts.ready, - ...imgs.map((img) => { - if (img.complete) { - if (img.naturalHeight !== 0) return; - throw new Error("Image failed to load"); - } - return new Promise((resolve, reject) => { - img.addEventListener("load", resolve); - img.addEventListener("error", reject); - }); - }), - ]); - }); - return page.screenshot(); + switch (action) { + case 'screenshot': { + await page.evaluate(async () => { + // wait for all images to finish loading + const imgs = Array.from(document.querySelectorAll("img")); + await Promise.all([ + document.fonts.ready, + ...imgs.map((img) => { + if (img.complete) { + if (img.naturalHeight !== 0) return; + throw new Error("Image failed to load"); + } + return new Promise((resolve, reject) => { + img.addEventListener("load", resolve); + img.addEventListener("error", reject); + }); + }), + ]); + }); + return page.screenshot(); + } break; + default: { + try { + await page.waitForSelector('meta[property="og:title"', { timeout: 5000 }) + } catch (e) { + // probably timed out + } + return page.content(); + } + } } async renderPreview(req, res) { try { - const img = await this.cluster?.execute(this.mempoolHost + req.params[0]); + // strip default language code for compatibility + const path = req.params[0].replace('/en/', '/'); + const img = await this.cluster?.execute({ url: this.mempoolHost + path, action: 'screenshot' }); res.contentType('image/png'); res.send(img); @@ -86,39 +100,23 @@ class Server { } } - renderHTML(req, res) { - let lang = ''; - let path = req.originalUrl - // extract the language setting (if any) - const parts = path.split(/^\/(ar|bg|bs|ca|cs|da|de|et|el|es|eo|eu|fa|fr|gl|ko|hr|id|it|he|ka|lv|lt|hu|mk|ms|nl|ja|nb|nn|pl|pt|pt-BR|ro|ru|sk|sl|sr|sh|fi|sv|th|tr|uk|vi|zh|hi)\//) - if (parts.length > 1) { - lang = "/" + parts[1]; - path = "/" + parts[2]; + async renderHTML(req, res) { + // drop requests for static files + const path = req.params[0]; + const match = path.match(/\.[\w]+$/); + if (match?.length && match[0] !== '.html') { + res.status(404).send(); + return } - const ogImageUrl = config.SERVER.HOST + '/render' + lang + "/preview" + path; - res.send(` - - - - - mempool - Bitcoin Explorer - - - - - - - - - - - - + try { + let html = await this.cluster?.execute({ url: this.mempoolHost + req.params[0], action: 'html' }); - - - `); + res.send(html) + } catch (e) { + console.log(e); + res.status(500).send(e instanceof Error ? e.message : e); + } } }