tweak lightning unfurl layouts

frontend/src/app/lightning/channel/channel-preview.component.html

@@ -1,7 +1,7 @@
 <div class="box preview-box" *ngIf="(channel$ | async) as channel">
   <div class="row d-flex justify-content-between full-width-row">
     <h1 class="title">
-      <span i18n="lightning.channel">Channel</span>
+      <span i18n="lightning.channel">Channel</span>: 
       <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]"> {{ channel.short_id }}</a>
     </h1>
     <div class="badges mb-2">

frontend/src/app/lightning/node/node-preview.component.html

@@ -1,7 +1,15 @@
 <div class="box preview-box" *ngIf="(node$ | async) as node">
+  <div class="row d-flex justify-content-between full-width-row">
+    <h1 class="title">
+      <span i18n="lightning.node">Node</span>:
+      <a [routerLink]="['/lightning/node' | relativeUrl, node.id]"> {{ node.alias }}</a>
+    </h1>
+    <div class="badges mb-2">
+      <span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
+    </div>
+  </div>
   <div class="row">
     <div class="col-md">
-      <h1 class="title">{{ node.alias }}</h1>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr>
@@ -34,6 +42,12 @@
               {{ node.country.en }} {{ node.flag }}
             </td>
           </tr>
+          <tr *ngIf="!node.city && !node.country">
+            <td i18n="location">Location</td>
+            <td>
+              <span>unknown</span>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>

frontend/src/app/lightning/node/node-preview.component.scss

@@ -1,27 +1,43 @@
 .title {
   font-size: 52px;
-  margin-bottom: 48px;
+  margin-bottom: 0;
 }
 
 .table {
+  margin-top: 48px;
   font-size: 32px;
 }
 
+.badges {
+  font-size: 28px;
+
+  ::ng-deep .badge {
+    margin-left: 0.5em;
+  }
+}
+
 .map-col {
   flex-grow: 0;
   flex-shrink: 0;
   width: 470px;
+  height: 390px;
   min-width: 470px;
+  min-height: 390px;
+  max-height: 390px;
   padding: 0;
   background: #181b2d;
-  max-height: 470px;
   overflow: hidden;
+  margin-top: 18px;
 }
 
 .row {
   margin-right: 0;
 }
 
+.full-width-row {
+  padding-left: 15px;
+}
+
 ::ng-deep .symbol {
   font-size: 24px;
 }

frontend/src/app/lightning/node/node-preview.component.ts

@@ -23,6 +23,7 @@ export class NodePreviewComponent implements OnInit {
   channelsListStatus: string;
   error: Error;
   publicKey: string;
+  socketTypes: string[];
 
   publicKeySize = 99;
 
@@ -50,6 +51,7 @@ export class NodePreviewComponent implements OnInit {
           this.seoService.setTitle(`Node: ${node.alias}`);
 
           const socketsObject = [];
+          const socketTypesMap = {};
           for (const socket of node.sockets.split(',')) {
             if (socket === '') {
               continue;
@@ -67,8 +69,10 @@ export class NodePreviewComponent implements OnInit {
               label: label,
               socket: node.public_key + '@' + socket,
             });
+            socketTypesMap[label] = true
           }
           node.socketsObject = socketsObject;
+          this.socketTypes = Object.keys(socketTypesMap);
           node.avgCapacity = node.capacity / Math.max(1, node.active_channel_count);
 
           this.openGraphService.waitOver('node-data');

unfurler/src/index.ts

@@ -174,7 +174,7 @@ class Server {
     }
 
     if (previewSupported) {
-      ogImageUrl = `${config.SERVER.HOST}${config.SERVER.HTTP_PORT ? ':' + config.SERVER.HTTP_PORT : ''}/render/${lang || 'en'}/preview${path}`;
+      ogImageUrl = `${config.SERVER.HOST}/render/${lang || 'en'}/preview${path}`;
       ogTitle = `${this.network ? capitalize(this.network) + ' ' : ''}${mode !== 'mainnet' ? capitalize(mode) + ' ' : ''}${ogTitle}`;
     } else {
       ogTitle = 'The Mempool Open Source Project™';