@abtnode/blocklet-services 1.16.15-beta-e3a24907 → 1.16.15-beta-933eb977

package/api/index.js

@@ -19,6 +19,7 @@ const eventHub =
   process.env.NODE_ENV === 'test' ? require('@arcblock/event-hub/single') : require('@arcblock/event-hub');
 const logger = require('@abtnode/logger')(require('../package.json').name);
 
+require('./libs/fetch');
 const cache = require('./cache');
 const { ensureProxyUrl } = require('./util');
 const { isProduction, isE2E } = require('./libs/env');
@@ -252,7 +253,7 @@ module.exports = function createServer(node, serverOptions = {}) {
   createFederatedRoutes.init(server, node, options);
   createUserRoutes.init(server, node, options);
   createEnvRoutes.init(server, node, options);
-  createBlockletRoutes.init(server, node);
+  createBlockletRoutes.init(server, node, eventHub);
   createConnectSessionRoutes.init(server, node, options);
   createConnectRelayRoutes.init(server, node, options, wsRouter);
   authRoutes.attachDidAuthHandlers(server);

package/api/libs/fetch.js

@@ -0,0 +1,11 @@
+// This polyfill is required for open-graph generator to work
+const fetch = require('node-fetch');
+
+const { Headers, Request, Response } = fetch;
+
+if (!global.fetch) {
+  global.fetch = fetch;
+  global.Headers = Headers;
+  global.Request = Request;
+  global.Response = Response;
+}

package/api/libs/image.js

@@ -3,11 +3,14 @@
 const fs = require('fs-extra');
 const path = require('path');
 const sharp = require('sharp');
+const joinUrl = require('url-join');
 const toLower = require('lodash/toLower');
 const { Joi } = require('@arcblock/validator');
 const stringify = require('json-stable-stringify');
 const md5 = require('@abtnode/util/lib/md5');
 const formatError = require('@abtnode/util/lib/format-error');
+const { getPassportColor } = require('@abtnode/auth/lib/util/create-passport-svg');
+const { WELLKNOWN_SERVICE_PATH_PREFIX } = require('@abtnode/constant');
 
 const logger = require('@abtnode/logger')('@abtnode/blocklet-services/image');
 
@@ -243,11 +246,69 @@ const processImage = (src, extension, dest, params) => {
   });
 };
 
+const fallbackFont = fs.readFile(path.resolve(__dirname, '../fonts/noto-sans-sc-regular.otf'));
+const generateOgImage = async (info, format = 'png', width = 1200, height = 630) => {
+  const { default: satori } = await import('satori'); // eslint-disable-line import/no-unresolved
+  const { html } = await import('satori-html'); // eslint-disable-line import/no-unresolved
+  const styles = {
+    container: 'display: flex; flex-direction: column; justify-content: center; align-items: center;',
+    font: 'color: #FFF; font-weight: 400; font-family: Arial,sans-serif; text-align: center; text-transform: capitalize; padding: 0 24px;',
+  };
+  const color = getPassportColor(info.passportColor, info.did);
+  // Do not delete following code block, it's used to debug the og image, please request with `/blocklet/og.html?nocache=1`
+  //   const markup = `<div style="width: ${width}px; height: ${height}px; background: ${color.start}; ${styles.container}">
+  //     <img
+  //       src="${joinUrl(info.appUrl, WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo')}"
+  //       width="180"
+  //       height="180"
+  //       style="width: 180px; height: 180px; border-radius: 50%"
+  //     />
+  //     <h2 style="font-size: 3rem; margin: 16px 0; ${styles.font}">${info.name}</h2>
+  //     <h3 style="font-size: 2rem; margin: 0; ${styles.font}">${info.description}</h3>
+  // </div>`;
+  //   if (format === 'html') {
+  //     return markup;
+  //   }
+
+  const svg = await satori(
+    // @ts-ignore
+    html`<div style="width: ${width}px; height: ${height}px; background: ${color.start}; ${styles.container}">
+      <img
+        src="${joinUrl(info.appUrl, WELLKNOWN_SERVICE_PATH_PREFIX, '/blocklet/logo')}"
+        width="180"
+        height="180"
+        style="width: 180px; height: 180px; border-radius: 50%"
+      />
+      <h2 style="font-size: 3rem; margin: 16px 0; ${styles.font}">${info.name}</h2>
+      <h3 style="font-size: 2rem; margin: 0; ${styles.font}">${info.description}</h3>
+    </div>`,
+    {
+      width,
+      height,
+      fonts: [
+        {
+          name: 'Noto',
+          data: await fallbackFont,
+          weight: 400,
+          style: 'normal',
+        },
+      ],
+    }
+  );
+
+  if (format === 'svg') {
+    return svg;
+  }
+
+  return sharp(Buffer.from(svg)).png().toBuffer();
+};
+
 module.exports = {
   isImageAccepted,
   isImageRequest,
   processAndRespond,
   processImage,
+  generateOgImage,
   EXTENSIONS,
   MODES,
 };

package/api/routes/blocklet.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const cloneDeep = require('lodash/cloneDeep');
 const dayjs = require('@abtnode/util/lib/dayjs');
@@ -39,10 +39,10 @@ const logger = require('@abtnode/logger')(require('../../package.json').name);
 
 const { createDownloadLogStream } = require('@abtnode/core/lib/util/log');
 
-const { BlockletStatus } = require('@blocklet/constant');
+const { BlockletStatus, BlockletInternalEvents } = require('@blocklet/constant');
 
 const { checkAdminPermission } = require('../middlewares/check-permission');
-const { isImageAccepted, isImageRequest, processAndRespond } = require('../libs/image');
+const { isImageAccepted, isImageRequest, processAndRespond, generateOgImage } = require('../libs/image');
 
 const polishBlocklet = (doc) => {
   const res = cloneDeep(doc);
@@ -53,7 +53,7 @@ const polishBlocklet = (doc) => {
 const prefix = WELLKNOWN_SERVICE_PATH_PREFIX;
 
 module.exports = {
-  init(server, node) {
+  init(server, node, events) {
     const onSendFallbackLogo = ({ res, sendOptions }) => {
       res.sendStaticFile('/images/blocklet.png', sendOptions);
     };
@@ -114,8 +114,6 @@ module.exports = {
 
     const cacheDir = path.join(node.dataDirs.cache, 'services', 'image');
     server.get(`${prefix}${USER_AVATAR_PATH_PREFIX}/:fileName`, async (req, res) => {
-      const sendOptions = { maxAge: '1y' };
-
       try {
         const blocklet = await req.getBlocklet();
         let { fileName } = req.params;
@@ -140,7 +138,7 @@ module.exports = {
             Promise.resolve([fs.createReadStream(avatarFile), path.extname(avatarFile).slice(1)])
           );
         } else {
-          res.sendFile(avatarFile, sendOptions);
+          res.sendFile(avatarFile, { maxAge: '365d', immutable: true });
         }
       } catch (err) {
         logger.error('failed to send user avatar', { fileName: req.params.fileName, error: err });
@@ -465,5 +463,49 @@ module.exports = {
         ],
       });
     });
+
+    server.get(`${prefix}/blocklet/og.(png|svg|html)`, async (req, res) => {
+      try {
+        const format = req.path.split('.').pop();
+        const info = await req.getBlockletInfo();
+        const blocklet = await req.getBlocklet();
+        const cache = req.query.nocache !== '1';
+
+        const sourceFile = path.join(blocklet.env.dataDir, `og.${format}`);
+        if (!fs.existsSync(sourceFile) || !cache) {
+          const sourceData = await generateOgImage(info, format);
+          fs.writeFileSync(sourceFile, sourceData);
+        }
+
+        if (format === 'png' && isImageAccepted(req) && isImageRequest(req)) {
+          const appDir = path.join(cacheDir, blocklet.appPid);
+          processAndRespond(req, res, appDir, () =>
+            Promise.resolve([fs.createReadStream(sourceFile), path.extname(sourceFile).slice(1)])
+          );
+        } else {
+          res.sendFile(sourceFile, cache ? { maxAge: '365d', immutable: true } : { maxAge: 0 });
+        }
+      } catch (err) {
+        logger.error('failed to send open graph', { fileName: req.params.fileName, error: err });
+        res.status(500).send(err.message);
+      }
+    });
+    // Bust cache on blocklet config change
+    if (events) {
+      events.on(BlockletInternalEvents.appConfigChanged, ({ appDid }) => {
+        ['png', 'svg', 'html'].forEach((format) => {
+          const cached = path.join(node.dataDirs.data, appDid, `og.${format}`);
+          if (fs.existsSync(cached)) {
+            logger.info('bust og cache on blocklet config change', { appDid, cached });
+            try {
+              fs.unlinkSync(cached);
+              logger.info('bust og cache on blocklet config change', { appDid, format });
+            } catch (err) {
+              logger.error('bust og cache on blocklet config change', { appDid, format, error: err });
+            }
+          }
+        });
+      });
+    }
   },
 };

package/build/asset-manifest.json

@@ -1,16 +1,16 @@
 {
   "files": {
     "main.css": "/.well-known/service/static/static/css/main.7ea79dc8.css",
-    "main.js": "/.well-known/service/static/static/js/main.1b821566.js",
+    "main.js": "/.well-known/service/static/static/js/main.4cc7f3ab.js",
     "static/js/4716.58477c5c.chunk.js": "/.well-known/service/static/static/js/4716.58477c5c.chunk.js",
     "static/js/6856.163537c7.chunk.js": "/.well-known/service/static/static/js/6856.163537c7.chunk.js",
     "static/js/1660.e2ff5a21.chunk.js": "/.well-known/service/static/static/js/1660.e2ff5a21.chunk.js",
     "static/js/9899.18509ac9.chunk.js": "/.well-known/service/static/static/js/9899.18509ac9.chunk.js",
-    "static/js/6737.5aef67e7.chunk.js": "/.well-known/service/static/static/js/6737.5aef67e7.chunk.js",
+    "static/js/6737.6432760e.chunk.js": "/.well-known/service/static/static/js/6737.6432760e.chunk.js",
     "static/js/1760.3318c7ca.chunk.js": "/.well-known/service/static/static/js/1760.3318c7ca.chunk.js",
     "static/js/9620.4b7c9e8b.chunk.js": "/.well-known/service/static/static/js/9620.4b7c9e8b.chunk.js",
     "static/js/1480.f89236fc.chunk.js": "/.well-known/service/static/static/js/1480.f89236fc.chunk.js",
-    "static/js/6186.2a5f97da.chunk.js": "/.well-known/service/static/static/js/6186.2a5f97da.chunk.js",
+    "static/js/6186.e711ab85.chunk.js": "/.well-known/service/static/static/js/6186.e711ab85.chunk.js",
     "static/js/4682.23dd054e.chunk.js": "/.well-known/service/static/static/js/4682.23dd054e.chunk.js",
     "static/js/6711.38948be4.chunk.js": "/.well-known/service/static/static/js/6711.38948be4.chunk.js",
     "static/js/8437.0d88b9db.chunk.js": "/.well-known/service/static/static/js/8437.0d88b9db.chunk.js",
@@ -98,16 +98,16 @@
     "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.1b821566.js.map": "/.well-known/service/static/static/js/main.1b821566.js.map",
+    "main.4cc7f3ab.js.map": "/.well-known/service/static/static/js/main.4cc7f3ab.js.map",
     "4716.58477c5c.chunk.js.map": "/.well-known/service/static/static/js/4716.58477c5c.chunk.js.map",
     "6856.163537c7.chunk.js.map": "/.well-known/service/static/static/js/6856.163537c7.chunk.js.map",
     "1660.e2ff5a21.chunk.js.map": "/.well-known/service/static/static/js/1660.e2ff5a21.chunk.js.map",
     "9899.18509ac9.chunk.js.map": "/.well-known/service/static/static/js/9899.18509ac9.chunk.js.map",
-    "6737.5aef67e7.chunk.js.map": "/.well-known/service/static/static/js/6737.5aef67e7.chunk.js.map",
+    "6737.6432760e.chunk.js.map": "/.well-known/service/static/static/js/6737.6432760e.chunk.js.map",
     "1760.3318c7ca.chunk.js.map": "/.well-known/service/static/static/js/1760.3318c7ca.chunk.js.map",
     "9620.4b7c9e8b.chunk.js.map": "/.well-known/service/static/static/js/9620.4b7c9e8b.chunk.js.map",
     "1480.f89236fc.chunk.js.map": "/.well-known/service/static/static/js/1480.f89236fc.chunk.js.map",
-    "6186.2a5f97da.chunk.js.map": "/.well-known/service/static/static/js/6186.2a5f97da.chunk.js.map",
+    "6186.e711ab85.chunk.js.map": "/.well-known/service/static/static/js/6186.e711ab85.chunk.js.map",
     "4682.23dd054e.chunk.js.map": "/.well-known/service/static/static/js/4682.23dd054e.chunk.js.map",
     "6711.38948be4.chunk.js.map": "/.well-known/service/static/static/js/6711.38948be4.chunk.js.map",
     "8437.0d88b9db.chunk.js.map": "/.well-known/service/static/static/js/8437.0d88b9db.chunk.js.map",
@@ -174,6 +174,6 @@
   },
   "entrypoints": [
     "static/css/main.7ea79dc8.css",
-    "static/js/main.1b821566.js"
+    "static/js/main.4cc7f3ab.js"
   ]
 }

package/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><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.1b821566.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"/><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.4cc7f3ab.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>