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

Better block unfurls

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

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,

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,

frontend/src/app/components/block/block-preview.component.html

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

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

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 {

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

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

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 () => {
+    switch (action) {
-      // wait for all images to finish loading
+      case 'screenshot': {
-      const imgs = Array.from(document.querySelectorAll("img"));
+        await page.evaluate(async () => {
-      await Promise.all([
+          // wait for all images to finish loading
-        document.fonts.ready,
+          const imgs = Array.from(document.querySelectorAll("img"));
-        ...imgs.map((img) => {
+          await Promise.all([
-          if (img.complete) {
+            document.fonts.ready,
-            if (img.naturalHeight !== 0) return;
+            ...imgs.map((img) => {
-            throw new Error("Image failed to load");
+              if (img.complete) {
-          }
+                if (img.naturalHeight !== 0) return;
-          return new Promise((resolve, reject) => {
+                throw new Error("Image failed to load");
-            img.addEventListener("load", resolve);
+              }
-            img.addEventListener("error", reject);
+              return new Promise((resolve, reject) => {
-          });
+                img.addEventListener("load", resolve);
-        }),
+                img.addEventListener("error", reject);
-      ]);
+              });
-    });
+            }),
-    return page.screenshot();
+          ]);
+        });
+        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) {
+  async renderHTML(req, res) {
-    let lang = '';
+    // drop requests for static files
-    let path = req.originalUrl
+    const path = req.params[0];
-    // extract the language setting (if any)
+    const match = path.match(/\.[\w]+$/);
-    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 (match?.length && match[0] !== '.html') {
-    if (parts.length > 1) {
+      res.status(404).send();
-      lang = "/" + parts[1];
+      return
-      path = "/" + parts[2];
     }
-    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."/>
+    try {
-        <meta property="og:image" content="${ogImageUrl}"/>
+      let html = await this.cluster?.execute({ url: this.mempoolHost + req.params[0], action: 'html' });
-        <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">
 
-      <body></body>
+      res.send(html)
-      </html>
+    } catch (e) {
-    `);
+      console.log(e);
+      res.status(500).send(e instanceof Error ? e.message : e);
+    }
   }
 }