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

package/api/libs/image.js

@@ -3,14 +3,11 @@
 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');
 
@@ -246,69 +243,11 @@ 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/libs/open-graph/index.js

@@ -0,0 +1,155 @@
+// A simple open graph service based on satori and sharp
+const fs = require('fs-extra');
+const path = require('path');
+const sharp = require('sharp');
+const joinUrl = require('url-join');
+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/og');
+
+const { getTemplate, getLogoSvg } = require('./template');
+
+const TEMPLATES = ['default', 'section', 'cover'];
+
+const schema = Joi.object({
+  template: Joi.string()
+    .lowercase()
+    .valid(...TEMPLATES)
+    .optional()
+    .default('default'),
+
+  title: Joi.string()
+    .max(128)
+    .when('template', {
+      is: 'default',
+      then: Joi.optional().default(''),
+      otherwise: Joi.required(),
+    }),
+
+  description: Joi.string()
+    .max(512)
+    .when('template', {
+      is: 'section',
+      then: Joi.required(),
+      otherwise: Joi.optional().default(''),
+    }),
+
+  section: Joi.string()
+    .max(64)
+    .when('template', {
+      is: 'section',
+      then: Joi.required(),
+      otherwise: Joi.optional().default(''),
+    }),
+
+  cover: Joi.string()
+    .uri({ scheme: ['https'] })
+    .when('template', {
+      is: 'cover',
+      then: Joi.required(),
+      otherwise: Joi.optional().default(''),
+    }),
+}).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 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.title) {
+    value.title = info.name;
+  }
+  if (!value.description) {
+    value.description = info.description;
+  }
+  if (value.template === 'cover') {
+    value.description = value.title;
+    value.title = info.name;
+  }
+
+  const params = { ...value, width: 1200, height: 630, color, logoUrl, format };
+  const cacheKey = md5(stringify(params));
+  const nocache = input.nocache === '1';
+  const destPath = path.join(dataDir, `${cacheKey}.${format}`);
+  if (!nocache && fs.existsSync(destPath)) {
+    return destPath;
+  }
+
+  tasks[cacheKey] ??= generateOgImage(params).finally(() => {
+    setTimeout(() => {
+      delete tasks[cacheKey];
+    }, 1000);
+  });
+
+  return new Promise((resolve, reject) => {
+    tasks[cacheKey]
+      .then((buffer) => {
+        logger.info('open graph generate succeed', { params, destPath });
+        fs.writeFileSync(destPath, buffer);
+        resolve(destPath);
+      })
+      .catch((err) => {
+        logger.error('open graph generate failed', { error: err, params });
+        reject(err);
+      });
+  });
+};
+
+const fallbackFont = fs.readFile(path.resolve(__dirname, '../../fonts/noto-sans-sc-regular.otf'));
+const generateOgImage = async (params) => {
+  const { default: satori } = await import('satori');
+  const raw = await getTemplate(params);
+  if (params.format === 'html') {
+    return raw;
+  }
+
+  const svg = await satori(raw, {
+    width: params.width,
+    height: params.height,
+    // debug: true,
+    fonts: [
+      {
+        name: 'Noto',
+        data: await fallbackFont,
+        weight: 400,
+        style: 'normal',
+      },
+    ],
+  });
+
+  if (params.format === 'svg') {
+    return svg;
+  }
+
+  if (['default', 'section'].includes(params.template)) {
+    return sharp(Buffer.from(getLogoSvg(params.color.start)))
+      .png()
+      .toBuffer()
+      .then((buffer) => {
+        return sharp(Buffer.from(svg))
+          .composite([{ input: buffer, top: 190, left: 816 }])
+          .png()
+          .toBuffer();
+      });
+  }
+
+  return sharp(Buffer.from(svg)).png().toBuffer();
+};
+
+module.exports = {
+  getOgImage,
+  generateOgImage,
+  TEMPLATES,
+};

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

@@ -0,0 +1,212 @@
+// Join the raw strings and values to reconstruct the original string
+const join = (strings, ...values) => {
+  const original = strings.raw.reduce((result, str, i) => {
+    return result + str + (values[i] !== undefined ? values[i] : '');
+  }, '');
+
+  return original;
+};
+
+const getLogoSvg = (color) => {
+  return `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  style="position: absolute; right: 24px; bottom: 24px; opacity: 0.1"
+  width="360"
+  height="416"
+  viewBox="0 0 45 52"
+>
+  <g fill="none" fill-rule="evenodd" stroke="${color}">
+    <path
+      d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
+    ></path>
+    <path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path>
+  </g>
+</svg>`;
+};
+
+const getDefaultTemplate = ({ width, height, logoUrl, format, color, title, description }, fn) => {
+  return fn`<div
+    style="
+    width: ${width}px;
+    height: ${height}px;
+    background: linear-gradient(to bottom right, #000000 40%, ${color.start});
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    position: relative;
+  "
+  >
+    <img
+      src="${logoUrl}"
+      height="120"
+      width="120"
+      style="margin-left: 96px; height: 120px; width: 120px; margin-bottom: 64px"
+    />
+    <h2
+      style="
+      font-size: 4.8rem;
+      letter-spacing: -2px;
+      margin: 32px 0;
+      color: #ddd;
+      font-weight: 400;
+      font-family: Arial, sans-serif;
+      text-align: left;
+      text-transform: capitalize;
+      padding: 0 96px;
+    "
+    >
+      ${title}
+    </h2>
+    <h3
+      style="
+      font-size: 2.4rem;
+      margin: 0;
+      color: #aaa;
+      font-weight: 400;
+      font-family: Arial, sans-serif;
+      text-align: left;
+      padding: 0 96px;
+    "
+    >
+      ${description}
+    </h3>
+    ${format !== 'png' ? getLogoSvg(color.start) : ''}
+  </div>`;
+};
+
+const getSectionTemplate = ({ width, height, logoUrl, color, format, title, description, section }, fn) => {
+  return fn` <div
+    style="
+    width: ${width};
+    height: ${height}px;
+    background: radial-gradient(circle at 83% 63%, ${color.start}, #000000 50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    position: relative;
+  "
+  >
+    <img
+      src="${logoUrl}"
+      height="90"
+      width="90"
+      style="margin-left: 96px; height: 90px; width: 90px; margin-bottom: 96px"
+    />
+    <p
+      style="
+      font-size: 1.8rem;
+      margin: 0;
+      color: ${color.start};
+      font-weight: 400;
+      font-family: Arial, sans-serif;
+      text-align: left;
+      padding: 0 96px;
+    "
+    >
+      ${section}
+    </p>
+    <h2
+      style="
+      font-size: 4.8rem;
+      margin: 32px 0;
+      color: #eee;
+      letter-spacing: -2px;
+      font-weight: 400;
+      font-family: Arial, sans-serif;
+      text-align: center;
+      text-transform: capitalize;
+      padding: 0 96px;
+    "
+    >
+      ${title}
+    </h2>
+    <h3
+      style="
+      font-size: 2.4rem;
+      margin: 0;
+      color: #bbb;
+      font-weight: 400;
+      font-family: Arial, sans-serif;
+      text-align: left;
+      padding: 0 96px;
+    "
+    >
+      ${description}
+    </h3>
+    ${format !== 'png' ? getLogoSvg(color.start) : ''}
+  </div>`;
+};
+
+const getCoverTemplate = ({ width, height, logoUrl, color, title, description, cover }, fn) => {
+  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%">
+      <div style="margin-left: 32px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around;">
+        <h2
+          style="
+          font-size: 3.6rem;
+          color: #ddd;
+          font-weight: 400;
+          font-family: Arial, sans-serif;
+          margin: 32px 0 0;
+          text-align: left;
+        "
+        >
+          ${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" />
+          <h3
+            style="
+            font-size: 2rem;
+            margin: 0 0 0 16px;
+            color: #ddd;
+            font-weight: 400;
+            font-family: Arial, sans-serif;
+            text-align: left;
+            text-transform: capitalize;
+          "
+          >
+            ${title}
+          </h3>
+        </div>
+      </div>
+    </div>
+    <div style="display: flex; height: 630px; width: 55%; background-color: ${color.start}">
+      <img src="${cover}" height="630" width="100%" style="height: 630px; width: 100%; object-fit: cover" />
+      <div style="
+        display: flex;
+        background: ${color.start};
+        height: ${height * 2}px;
+        width: 125px;
+        position: absolute;
+        transform: rotate(10deg);
+        left: -120px;
+        top: -25px;"></div>
+    </div>
+  </div>`;
+};
+
+const getTemplate = async (params) => {
+  // eslint-disable-next-line import/no-unresolved
+  const { html } = await import('satori-html');
+  const fn = params.format === 'html' ? join : html;
+
+  if (params.template === 'default') {
+    return getDefaultTemplate(params, fn);
+  }
+  if (params.template === 'section') {
+    return getSectionTemplate(params, fn);
+  }
+  if (params.template === 'cover') {
+    return getCoverTemplate(params, fn);
+  }
+
+  throw new Error('Invalid open graph template');
+};
+
+module.exports = {
+  getTemplate,
+  getLogoSvg,
+};

package/api/routes/blocklet.js

@@ -34,6 +34,7 @@ const {
   USER_AVATAR_PATH_PREFIX,
   ROLES,
   USER_AVATAR_URL_PREFIX,
+  OPEN_GRAPH_DIR,
 } = require('@abtnode/constant');
 const logger = require('@abtnode/logger')(require('../../package.json').name);
 
@@ -42,7 +43,8 @@ const { createDownloadLogStream } = require('@abtnode/core/lib/util/log');
 const { BlockletStatus, BlockletInternalEvents } = require('@blocklet/constant');
 
 const { checkAdminPermission } = require('../middlewares/check-permission');
-const { isImageAccepted, isImageRequest, processAndRespond, generateOgImage } = require('../libs/image');
+const { isImageAccepted, isImageRequest, processAndRespond } = require('../libs/image');
+const { getOgImage } = require('../libs/open-graph');
 
 const polishBlocklet = (doc) => {
   const res = cloneDeep(doc);
@@ -464,19 +466,15 @@ module.exports = {
       });
     });
 
-    server.get(`${prefix}/blocklet/og.(png|svg|html)`, async (req, res) => {
+    server.get(`${prefix}/blocklet/og.(png|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);
-        }
-
+        const dataDir = path.join(blocklet.env.dataDir, OPEN_GRAPH_DIR);
+        const sourceFile = await getOgImage(req.query, info, dataDir, format);
         if (format === 'png' && isImageAccepted(req) && isImageRequest(req)) {
           const appDir = path.join(cacheDir, blocklet.appPid);
           processAndRespond(req, res, appDir, () =>
@@ -493,7 +491,7 @@ module.exports = {
     // Bust cache on blocklet config change
     if (events) {
       events.on(BlockletInternalEvents.appConfigChanged, ({ appDid }) => {
-        ['png', 'svg', 'html'].forEach((format) => {
+        ['png', '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 });

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.4cc7f3ab.js",
+    "main.js": "/.well-known/service/static/static/js/main.e29a7133.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",
@@ -27,7 +27,7 @@
     "static/js/2653.58a5430b.chunk.js": "/.well-known/service/static/static/js/2653.58a5430b.chunk.js",
     "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.4b07ad55.chunk.js": "/.well-known/service/static/static/js/5355.4b07ad55.chunk.js",
+    "static/js/5355.2eaad302.chunk.js": "/.well-known/service/static/static/js/5355.2eaad302.chunk.js",
     "static/js/6771.583c16c9.chunk.js": "/.well-known/service/static/static/js/6771.583c16c9.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",
@@ -73,7 +73,7 @@
     "static/js/9107.967c2ac1.chunk.js": "/.well-known/service/static/static/js/9107.967c2ac1.chunk.js",
     "static/css/3154.e954fcda.chunk.css": "/.well-known/service/static/static/css/3154.e954fcda.chunk.css",
     "static/js/9657.e974d577.chunk.js": "/.well-known/service/static/static/js/9657.e974d577.chunk.js",
-    "static/js/5541.1d065ac6.chunk.js": "/.well-known/service/static/static/js/5541.1d065ac6.chunk.js",
+    "static/js/5541.581f1db7.chunk.js": "/.well-known/service/static/static/js/5541.581f1db7.chunk.js",
     "static/media/ubuntu-mono-all-400-normal.woff": "/.well-known/service/static/static/media/ubuntu-mono-all-400-normal.c879328bc62e9c68268f.woff",
     "service-worker.js": "/.well-known/service/static/service-worker.js",
     "static/media/lato-all-400-normal.woff": "/.well-known/service/static/static/media/lato-all-400-normal.3dc1eff492ab1f598560.woff",
@@ -98,7 +98,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.4cc7f3ab.js.map": "/.well-known/service/static/static/js/main.4cc7f3ab.js.map",
+    "main.e29a7133.js.map": "/.well-known/service/static/static/js/main.e29a7133.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",
@@ -124,7 +124,7 @@
     "2653.58a5430b.chunk.js.map": "/.well-known/service/static/static/js/2653.58a5430b.chunk.js.map",
     "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.4b07ad55.chunk.js.map": "/.well-known/service/static/static/js/5355.4b07ad55.chunk.js.map",
+    "5355.2eaad302.chunk.js.map": "/.well-known/service/static/static/js/5355.2eaad302.chunk.js.map",
     "6771.583c16c9.chunk.js.map": "/.well-known/service/static/static/js/6771.583c16c9.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",
@@ -170,10 +170,10 @@
     "9107.967c2ac1.chunk.js.map": "/.well-known/service/static/static/js/9107.967c2ac1.chunk.js.map",
     "3154.e954fcda.chunk.css.map": "/.well-known/service/static/static/css/3154.e954fcda.chunk.css.map",
     "9657.e974d577.chunk.js.map": "/.well-known/service/static/static/js/9657.e974d577.chunk.js.map",
-    "5541.1d065ac6.chunk.js.map": "/.well-known/service/static/static/js/5541.1d065ac6.chunk.js.map"
+    "5541.581f1db7.chunk.js.map": "/.well-known/service/static/static/js/5541.581f1db7.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.7ea79dc8.css",
-    "static/js/main.4cc7f3ab.js"
+    "static/js/main.e29a7133.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.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>
+<!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.e29a7133.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>