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

Merge pull request #2205 from mononaut/better-block-unfurls

Browse Source 
Better block unfurls
This commit is contained in:
wiz 2022-07-28 01:48:36 +00:00 committed by GitHub
commit d39062fb8f
9 changed files with 181 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/app-routing.module.ts
View File

@ -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

2
frontend/src/app/app.module.ts
View File

@ -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,

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

@ -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,

10
frontend/src/app/components/block/block-preview.component.html
View File

@ -26,10 +26,6 @@
{{ block?.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
</tr>
<tr>
<td i18n="block.size">Size</td>
<td [innerHTML]="'&lrm;' + (block?.size | bytes: 2)"></td>
</tr>
<tr>
<td i18n="block.weight">Weight</td>
<td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
@ -51,12 +47,6 @@
</td>
</ng-template>
</tr>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
<td>
<app-amount [satoshis]="block?.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
</td>
</tr>
</ng-template>
<tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
<td i18n="block.miner">Miner</td>

24
frontend/src/app/components/block/block-preview.component.scss
View File

@ -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;
}

1
frontend/src/app/components/master-page-preview/master-page-preview.component.scss
View File

@ -20,6 +20,7 @@
align-items: center;
background: #11131f;
text-align: start;
font-size: 1.2em;
}
.footer-brand {

61
frontend/src/app/services/opengraph.service.ts Normal file
View File

@ -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' });
}
}

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

@ -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) {

100
unfurler/src/index.ts
View File

@ -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(`
<!doctype html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<title>mempool - Bitcoin Explorer</title>
<meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Bitcoin community."/>
<meta property="og:image" content="${ogImageUrl}"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1024"/>
<meta property="og:image:height" content="512"/>
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@mempool">
<meta property="twitter:creator" content="@mempool">
<meta property="twitter:title" content="The Mempool Open Source Project™">
<meta property="twitter:description" content="Our self-hosted mempool explorer for the Bitcoin community."/>
<meta property="twitter:image:src" content="${ogImageUrl}"/>
<meta property="twitter:domain" content="mempool.space">
try {
let html = await this.cluster?.execute({ url: this.mempoolHost + req.params[0], action: 'html' });
<body></body>
</html>
`);
res.send(html)
} catch (e) {
console.log(e);
res.status(500).send(e instanceof Error ? e.message : e);
}
}
}