@abtnode/blocklet-services 1.16.15-beta-d464647a → 1.16.15-beta-a635f48d

package/api/index.js

@@ -1,4 +1,5 @@
 const http = require('http');
+const path = require('path');
 const get = require('lodash/get');
 const morgan = require('morgan');
 const express = require('express');
@@ -243,7 +244,16 @@ module.exports = function createServer(node, serverOptions = {}) {
   }
 
   // Static assets
-  StaticService.attachStaticResources({ app: server, proxy });
+  StaticService.attachStaticResources({
+    app: server,
+    proxy,
+    extraResources: [
+      {
+        prefix: '/open-graph',
+        dir: path.join(node.dataDirs.tmp, 'services', 'open-graph'),
+      },
+    ],
+  });
 
   // Studio service
   StudioService.init({ app: server });

package/api/libs/image.js

@@ -98,8 +98,7 @@ const schema = Joi.object({
   .options({ stripUnknown: true, allowUnknown: true, noDefaults: false });
 
 const isImageAccepted = (req) => {
-  const extension = toLower(path.extname(req.path).slice(1));
-  return FORMATS.includes(EXTENSIONS[extension]) && FORMATS.some((x) => req.accepts(`image/${x}`));
+  return FORMATS.some((x) => req.accepts(`image/${x}`));
 };
 
 const isImageRequest = (req) => {
@@ -134,7 +133,7 @@ const processAndRespond = (req, res, cacheDir, getSrc, ext, sendOptions = { maxA
     if (params.f === 'webp') {
       params.f = undefined;
     }
-    if (extension === 'webp' && !params.f) {
+    if ((!extension || extension === 'webp') && !params.f) {
       params.f = 'png';
     }
   }
@@ -245,21 +244,21 @@ const processImage = (src, extension, dest, params) => {
       resolve(dest);
     });
 
-    out.on('error', (error) => {
-      reject(error);
+    out.on('error', (err) => {
+      reject(err);
     });
 
     pipeline[format || EXTENSIONS[extension]]({ quality, progressive: !!progressive, force: true });
 
-    pipeline.on('error', (error) => {
-      reject(error);
+    pipeline.on('error', (err) => {
+      reject(err);
     });
 
     // run the pipeline
     src.pipe(pipeline).pipe(out);
-  }).catch((error) => {
+  }).catch((err) => {
     rmSync(dest, { force: true });
-    throw error;
+    throw err;
   });
 };
 

package/api/libs/open-graph/index.js

@@ -1,6 +1,7 @@
 // A simple open graph service based on satori and sharp
 const fs = require('fs-extra');
 const path = require('path');
+const https = require('https');
 const sharp = require('sharp');
 const joinUrl = require('url-join');
 const { Joi } = require('@arcblock/validator');
@@ -25,6 +26,7 @@ const schema = Joi.object({
 
   title: Joi.string()
     .max(128)
+    .trim()
     .when('template', {
       is: 'default',
       then: Joi.optional().default(''),
@@ -33,6 +35,7 @@ const schema = Joi.object({
 
   description: Joi.string()
     .max(512)
+    .trim()
     .when('template', {
       is: 'section',
       then: Joi.required(),
@@ -47,6 +50,7 @@ const schema = Joi.object({
       otherwise: Joi.optional().default(''),
     }),
 
+  // customize cover
   cover: Joi.string()
     .uri({ scheme: ['https'] })
     .when('template', {
@@ -54,23 +58,28 @@ const schema = Joi.object({
       then: Joi.required(),
       otherwise: Joi.optional().default(''),
     }),
+
+  // customize logo
+  logo: Joi.string()
+    .uri({ scheme: ['https'] })
+    .optional(),
 }).options({ stripUnknown: true, allowUnknown: true, noDefaults: false });
 
-const tasks = {};
-const getOgImage = (input, info, dataDir, format) => {
-  if (fs.existsSync(dataDir) === false) {
-    fs.mkdirSync(dataDir, { recursive: true });
-  }
+const generateTasks = {};
+const getOgImage = ({ input, info, dataDir, format, tmpDir }) => {
+  fs.ensureDirSync(dataDir);
+  fs.ensureDirSync(tmpDir);
 
   const color = getPassportColor(info.passportColor, info.did);
-  const logoUrl = joinUrl(info.appUrl, WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo');
   const { value, error } = schema.validate(input);
   if (error) {
     throw new Error(`open graph service params invalid: ${formatError(error)}`);
   }
   if (value.template === 'cover') {
-    value.description = value.description || value.title;
-    value.title = info.name;
+    if (value.title && !value.description) {
+      value.description = value.title;
+      value.title = info.name;
+    }
   }
   if (!value.title) {
     value.title = info.name;
@@ -78,8 +87,11 @@ const getOgImage = (input, info, dataDir, format) => {
   if (!value.description) {
     value.description = info.description;
   }
+  if (!value.logo) {
+    value.logo = joinUrl(info.appUrl, WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo?imageFilter=resize&w=120');
+  }
 
-  const params = { ...value, width: 1200, height: 630, color, logoUrl, format };
+  const params = { ...value, width: 1200, height: 630, color, format };
   const cacheKey = md5(stringify(params));
   const nocache = input.nocache === '1';
   const destPath = path.join(dataDir, `${cacheKey}.${format}`);
@@ -87,14 +99,14 @@ const getOgImage = (input, info, dataDir, format) => {
     return destPath;
   }
 
-  tasks[cacheKey] ??= generateOgImage(params).finally(() => {
+  generateTasks[cacheKey] ??= generateOgImage(params, tmpDir).finally(() => {
     setTimeout(() => {
-      delete tasks[cacheKey];
+      delete generateTasks[cacheKey];
     }, 1000);
   });
 
   return new Promise((resolve, reject) => {
-    tasks[cacheKey]
+    generateTasks[cacheKey]
       .then((buffer) => {
         logger.info('open graph generate succeed', { params, destPath });
         fs.writeFileSync(destPath, buffer);
@@ -107,9 +119,95 @@ const getOgImage = (input, info, dataDir, format) => {
   });
 };
 
+const convertExternalImage = (url, dest) => {
+  return new Promise((resolve, reject) => {
+    const tmp = new URL(url);
+    https
+      .request(
+        {
+          hostname: tmp.hostname,
+          port: tmp.port,
+          path: tmp.pathname + tmp.search,
+          method: 'GET',
+          headers: { Accept: 'image/*' },
+        },
+        (res) => {
+          const [type] = (res.headers['content-type'] || '').split('/');
+          if (type !== 'image') {
+            reject(new Error('external image is not an image'));
+            return;
+          }
+
+          const pipeline = sharp({ animated: false }).timeout({ seconds: 30 });
+          pipeline.png({ force: true });
+
+          const out = fs.createWriteStream(dest);
+          out.on('close', () => {
+            resolve(dest);
+          });
+
+          out.on('error', (error) => {
+            reject(error);
+          });
+
+          res.pipe(pipeline).pipe(out);
+        }
+      )
+      .on('error', reject)
+      .end();
+  });
+};
+
+const getCachedExternalImage = (cacheKey, port = process.env.ABT_NODE_SERVICE_PORT) => {
+  return `http://127.0.0.1:${port}/open-graph/${cacheKey}.png`;
+};
+
+const cacheTasks = {};
+const ensureExternalImage = (params, key, tmpDir) => {
+  if (params[key]) {
+    const cacheKey = md5(params[key]);
+    const destPath = path.join(tmpDir, `${cacheKey}.png`);
+    if (fs.existsSync(destPath)) {
+      return getCachedExternalImage(cacheKey);
+    }
+
+    cacheTasks[cacheKey] ??= convertExternalImage(params[key], destPath).finally(() => {
+      setTimeout(() => {
+        delete cacheTasks[cacheKey];
+      }, 1000);
+    });
+
+    return new Promise((resolve, reject) => {
+      cacheTasks[cacheKey]
+        .then(() => {
+          logger.info('external image convert succeed', { params, destPath });
+          resolve(getCachedExternalImage(cacheKey));
+        })
+        .catch((err) => {
+          logger.error('external image convert failed', { error: err, params });
+          reject(err);
+        });
+    });
+  }
+
+  return params[key];
+};
+
+// ensure external images are processed
+const ensureExternalImages = async (params, tmpDir) => {
+  await Promise.all(
+    ['cover', 'logo'].map(async (x) => {
+      params[x] = await ensureExternalImage(params, x, tmpDir);
+    })
+  );
+};
+
 const fallbackFont = fs.readFile(path.resolve(__dirname, '../../fonts/noto-sans-sc-regular.otf'));
-const generateOgImage = async (params) => {
+const generateOgImage = async (params, tmpDir) => {
   const { default: satori } = await import('satori');
+
+  await ensureExternalImages(params, tmpDir);
+
   const raw = await getTemplate(params);
   if (params.format === 'html') {
     return raw;

package/api/libs/open-graph/template.js

@@ -32,7 +32,7 @@ const getLogoSvg = (color) => {
 </svg>`;
 };
 
-const getDefaultTemplate = ({ width, height, logoUrl, format, color, title, description }, fn) => {
+const getDefaultTemplate = ({ width, height, logo, format, color, title, description }, fn) => {
   return fn`<div
     style="
     width: ${width}px;
@@ -46,7 +46,7 @@ const getDefaultTemplate = ({ width, height, logoUrl, format, color, title, desc
   "
   >
     <img
-      src="${logoUrl}"
+      src="${logo}"
       height="120"
       width="120"
       style="margin-left: 96px; height: 120px; width: 120px; margin-bottom: 64px"
@@ -82,7 +82,7 @@ const getDefaultTemplate = ({ width, height, logoUrl, format, color, title, desc
   </div>`;
 };
 
-const getSectionTemplate = ({ width, height, logoUrl, color, format, title, description, section }, fn) => {
+const getSectionTemplate = ({ width, height, logo, color, format, title, description, section }, fn) => {
   return fn` <div
     style="
     width: ${width};
@@ -96,7 +96,7 @@ const getSectionTemplate = ({ width, height, logoUrl, color, format, title, desc
   "
   >
     <img
-      src="${logoUrl}"
+      src="${logo}"
       height="90"
       width="90"
       style="margin-left: 96px; height: 90px; width: 90px; margin-bottom: 64px"
@@ -148,7 +148,7 @@ const getSectionTemplate = ({ width, height, logoUrl, color, format, title, desc
   </div>`;
 };
 
-const getCoverTemplate = ({ width, height, logoUrl, color, title, description, cover }, fn) => {
+const getCoverTemplate = ({ width, height, logo, color, title, description, cover }, fn) => {
   const textColor = getTextColor(color.start);
   return fn`<div style="width: ${width}px; height: ${height}px; display: flex; background: ${color.start};">
     <div style="display: flex; height: ${height}px; background: ${color.start}; width: 45%">
@@ -166,7 +166,7 @@ const getCoverTemplate = ({ width, height, logoUrl, color, title, description, c
           ${description}
         </h2>
         <div style="display: flex; justify-content: flex-start; align-items: center">
-          <img src="${logoUrl}" height="60" width="60" style="height: 60px; width: 60px" />
+          <img src="${logo}" height="60" width="60" style="height: 60px; width: 60px" />
           <h3
             style="
             font-size: 2rem;

package/api/routes/blocklet.js

@@ -433,6 +433,18 @@ module.exports = {
         );
 
         stream.pipe(res);
+
+        node
+          .createAuditLog(
+            {
+              action: 'downloadLog',
+              args: { teamDid: did, days },
+              context: formatContext(req),
+              result: {},
+            },
+            node
+          )
+          .catch(console.error);
       } catch (error) {
         res.status(500).send(error.message);
       }
@@ -491,6 +503,7 @@ module.exports = {
       });
     });
 
+    const tmpDir = path.join(node.dataDirs.tmp, 'services', 'open-graph');
     server.get(`${prefix}/blocklet/og.(png|html)`, async (req, res) => {
       try {
         const format = req.path.split('.').pop();
@@ -499,7 +512,7 @@ module.exports = {
         const cache = req.query.nocache !== '1';
 
         const dataDir = path.join(blocklet.env.dataDir, OPEN_GRAPH_DIR);
-        const sourceFile = await getOgImage(req.query, info, dataDir, format);
+        const sourceFile = await getOgImage({ input: req.query, info, dataDir, format, tmpDir });
         if (format === 'png' && isImageAccepted(req) && isImageRequest(req)) {
           const appDir = path.join(cacheDir, blocklet.appPid);
           processAndRespond(req, res, appDir, () =>

package/api/services/static.js

@@ -1,3 +1,4 @@
+const fs = require('fs-extra');
 const path = require('path');
 const serveStatic = require('serve-static');
 
@@ -31,7 +32,12 @@ const attachUtils = ({ req, res, proxy }) => {
   };
 };
 
-const attachStaticResources = ({ app, proxy }) => {
+const attachStaticResources = ({ app, proxy, extraResources = [] }) => {
+  extraResources.forEach((x) => {
+    fs.ensureDirSync(x.dir);
+    app.use(x.prefix, serveStatic(x.dir, { index: false, maxAge: 0 }));
+  });
+
   if (isFeDevelopment) {
     app.use('/static', (req, res) => {
       proxy.safeWeb(req, res, {

package/build/asset-manifest.json

@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "/.well-known/service/static/static/css/main.7ea79dc8.css",
-    "main.js": "/.well-known/service/static/static/js/main.ad0241d5.js",
+    "main.js": "/.well-known/service/static/static/js/main.d5146fdd.js",
     "static/js/4716.60c7a9b1.chunk.js": "/.well-known/service/static/static/js/4716.60c7a9b1.chunk.js",
     "static/js/6856.01a0c9a2.chunk.js": "/.well-known/service/static/static/js/6856.01a0c9a2.chunk.js",
     "static/js/1660.c490fcee.chunk.js": "/.well-known/service/static/static/js/1660.c490fcee.chunk.js",
@@ -28,12 +28,12 @@
     "static/js/3593.98d9341a.chunk.js": "/.well-known/service/static/static/js/3593.98d9341a.chunk.js",
     "static/css/5355.c4fb5c4a.chunk.css": "/.well-known/service/static/static/css/5355.c4fb5c4a.chunk.css",
     "static/js/5355.cc6d4f2b.chunk.js": "/.well-known/service/static/static/js/5355.cc6d4f2b.chunk.js",
-    "static/js/6771.6efce01a.chunk.js": "/.well-known/service/static/static/js/6771.6efce01a.chunk.js",
+    "static/js/6771.dfad334c.chunk.js": "/.well-known/service/static/static/js/6771.dfad334c.chunk.js",
     "static/css/5982.ac464505.chunk.css": "/.well-known/service/static/static/css/5982.ac464505.chunk.css",
-    "static/js/5982.19c5663f.chunk.js": "/.well-known/service/static/static/js/5982.19c5663f.chunk.js",
+    "static/js/5982.e80abbc4.chunk.js": "/.well-known/service/static/static/js/5982.e80abbc4.chunk.js",
     "static/js/4023.cb71646d.chunk.js": "/.well-known/service/static/static/js/4023.cb71646d.chunk.js",
     "static/js/6452.853cf474.chunk.js": "/.well-known/service/static/static/js/6452.853cf474.chunk.js",
-    "static/js/1565.3e18f09a.chunk.js": "/.well-known/service/static/static/js/1565.3e18f09a.chunk.js",
+    "static/js/1565.77a767e9.chunk.js": "/.well-known/service/static/static/js/1565.77a767e9.chunk.js",
     "static/js/2393.9c045444.chunk.js": "/.well-known/service/static/static/js/2393.9c045444.chunk.js",
     "static/js/5683.7e2e9b58.chunk.js": "/.well-known/service/static/static/js/5683.7e2e9b58.chunk.js",
     "static/js/2100.1e7f0c60.chunk.js": "/.well-known/service/static/static/js/2100.1e7f0c60.chunk.js",
@@ -97,7 +97,7 @@
     "index.html": "/.well-known/service/static/index.html",
     "static/media/space-connected.svg": "/.well-known/service/static/static/media/space-connected.9a4e18fd2bc7d065191b0d241a131c28.svg",
     "main.7ea79dc8.css.map": "/.well-known/service/static/static/css/main.7ea79dc8.css.map",
-    "main.ad0241d5.js.map": "/.well-known/service/static/static/js/main.ad0241d5.js.map",
+    "main.d5146fdd.js.map": "/.well-known/service/static/static/js/main.d5146fdd.js.map",
     "4716.60c7a9b1.chunk.js.map": "/.well-known/service/static/static/js/4716.60c7a9b1.chunk.js.map",
     "6856.01a0c9a2.chunk.js.map": "/.well-known/service/static/static/js/6856.01a0c9a2.chunk.js.map",
     "1660.c490fcee.chunk.js.map": "/.well-known/service/static/static/js/1660.c490fcee.chunk.js.map",
@@ -124,12 +124,12 @@
     "3593.98d9341a.chunk.js.map": "/.well-known/service/static/static/js/3593.98d9341a.chunk.js.map",
     "5355.c4fb5c4a.chunk.css.map": "/.well-known/service/static/static/css/5355.c4fb5c4a.chunk.css.map",
     "5355.cc6d4f2b.chunk.js.map": "/.well-known/service/static/static/js/5355.cc6d4f2b.chunk.js.map",
-    "6771.6efce01a.chunk.js.map": "/.well-known/service/static/static/js/6771.6efce01a.chunk.js.map",
+    "6771.dfad334c.chunk.js.map": "/.well-known/service/static/static/js/6771.dfad334c.chunk.js.map",
     "5982.ac464505.chunk.css.map": "/.well-known/service/static/static/css/5982.ac464505.chunk.css.map",
-    "5982.19c5663f.chunk.js.map": "/.well-known/service/static/static/js/5982.19c5663f.chunk.js.map",
+    "5982.e80abbc4.chunk.js.map": "/.well-known/service/static/static/js/5982.e80abbc4.chunk.js.map",
     "4023.cb71646d.chunk.js.map": "/.well-known/service/static/static/js/4023.cb71646d.chunk.js.map",
     "6452.853cf474.chunk.js.map": "/.well-known/service/static/static/js/6452.853cf474.chunk.js.map",
-    "1565.3e18f09a.chunk.js.map": "/.well-known/service/static/static/js/1565.3e18f09a.chunk.js.map",
+    "1565.77a767e9.chunk.js.map": "/.well-known/service/static/static/js/1565.77a767e9.chunk.js.map",
     "2393.9c045444.chunk.js.map": "/.well-known/service/static/static/js/2393.9c045444.chunk.js.map",
     "5683.7e2e9b58.chunk.js.map": "/.well-known/service/static/static/js/5683.7e2e9b58.chunk.js.map",
     "2100.1e7f0c60.chunk.js.map": "/.well-known/service/static/static/js/2100.1e7f0c60.chunk.js.map",
@@ -172,6 +172,6 @@
   },
   "entrypoints": [
     "static/css/main.7ea79dc8.css",
-    "static/js/main.ad0241d5.js"
+    "static/js/main.d5146fdd.js"
   ]
 }

package/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico?imageFilter=resize&w=32"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#000000"/><title>Blocklet Service</title><link rel="manifest" href="/.well-known/service/manifest.json"/><script src="/.well-known/service/api/env"></script><script src="/__blocklet__.js"></script><script defer="defer" src="/.well-known/service/static/static/js/main.ad0241d5.js"></script><link href="/.well-known/service/static/static/css/main.7ea79dc8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico?imageFilter=resize&w=32"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/><meta name="theme-color" content="#000000"/><title>Blocklet Service</title><link rel="manifest" href="/.well-known/service/manifest.json"/><script src="/.well-known/service/api/env"></script><script src="/__blocklet__.js"></script><script defer="defer" src="/.well-known/service/static/static/js/main.d5146fdd.js"></script><link href="/.well-known/service/static/static/css/main.7ea79dc8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>