npm - @azuro-org/images-generator - Versions diffs - 2.0.3 → 2.0.4 - Mend

@azuro-org/images-generator 2.0.3 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/dist/generator.d.ts CHANGED Viewed

@@ -4,12 +4,27 @@ interface GeneratorOptions {
     timeout?: number;
     args?: string[];
 }
+/**
+ * Options for a single image generation.
+ */
 interface GenerateOptions {
+    /** JPEG quality 1–100 (ignored for PNG). Default 85. */
     quality?: number;
+    /** Screenshot the full scrollable page instead of just the viewport. Default false. */
     fullPage?: boolean;
+    /** Wait for document.fonts.ready before taking the screenshot so webfonts are applied. Default true. */
     waitForFonts?: boolean;
+    /** Max ms to wait for content/font loading. Default 2000. */
     waitTimeout?: number;
+    /**
+     * When to consider the page content "loaded" before screenshot.
+     * - `domcontentloaded` – DOM ready, resources (images, fonts) may still load. Fastest. Default.
+     * - `load` – load event fired (images, stylesheets, etc. loaded).
+     * - `networkidle0` – no network requests for 500ms.
+     * - `networkidle2` – at most 2 network requests for 500ms.
+     */
     waitUntil?: 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
+    /** If true, do not add an extra delay for CSS animations. Default true. */
     skipAnimations?: boolean;
 }
 type GenerateProps<P> = {

package/dist/index.es.js CHANGED Viewed

@@ -180,7 +180,7 @@ function __generator(thisArg, body) {
                             throw new Error('Invalid template: missing required properties');
                         }
                         width = template.width, height = template.height, type = template.type, getHtml = template.html;
-                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'domcontentloaded' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
+                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'load' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
                         _l.label = 7;
                     case 7:
                         _l.trys.push([7, 20, , 21]);

package/dist/templates/trendle-trading/images/arrow-down.png CHANGED Viewed

Binary file

package/dist/templates/trendle-trading/images/arrow-up.png CHANGED Viewed

Binary file

package/dist/templates/trendle-trading/images/default.png ADDED Viewed

Binary file

package/dist/templates/trendle-trading/index.d.ts CHANGED Viewed

@@ -1,16 +1,15 @@
 import { type Template } from '../../utils';
-type Person = 'obama' | 'drake' | 'crash' | 'sydney' | 'tramp' | 'elon' | 'lewis' | 'mark' | 'powell' | 'macron' | 'arnold' | 'person-1' | 'tramp-2' | 'elon-2' | 'person-2' | 'taylor';
 export type Props = {
-    type: Person;
+    accountAddress: string;
     trend: {
-        image: string;
+        image: string | undefined;
         title: string;
     };
     position: {
         leverage: number;
         isLong: boolean;
-        openLevel: number;
-        exitLevel: number | undefined;
+        openLevel: string;
+        exitLevel: string | undefined;
     };
     pnl: number;
 };

package/dist/templates/trendle-trading/index.html CHANGED Viewed

@@ -4,8 +4,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
-    href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Mona+Sans:wdth,wght@75..125,700&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;700&family=Inter:wght@500;600&family=Mona+Sans:wdth,wght@125,700&display=swap"
     rel="stylesheet">
   <style>
     html {
@@ -26,6 +28,13 @@
       font-style: normal;
     }
+    .geist-mono {
+      font-family: "Geist Mono", monospace;
+      font-optical-sizing: auto;
+      font-weight: 400;
+      font-style: normal;
+    }
     * {
       box-sizing: border-box;
     }
@@ -130,60 +139,40 @@
       text-transform: uppercase;
     }
+    .text-underline {
+      text-decoration: underline;
+    }
     .text-center {
       text-align: center;
     }
+    .text-bold {
+      font-weight: 700;
+    }
     .card {
       background: --card-bg-color;
       width: 1200px;
-      height: 630px;
-      padding: 48px;
+      height: 675px;
+      padding: 40px 36px 30px;
       position: relative;
+      color: white;
     }
     .logo {
-      height: 38px;
-      width: 266px;
+      height: 24px;
+      width: 156px;
       display: block;
-    }
-    .trend {
-      /* margin-top: 108px; */
-    }
-    .trend__img {
-      margin-right: 20px;
-      width: 80px;
-      height: 80px;
-      border-radius: 100%;
-      overflow: hidden;
-    }
-    .trend__img>img {
-      width: 100%;
-    }
-    .trend__title {
-      font-size: 32px;
-      line-height: 100%;
-    }
-    .trend__badge {
-      background-color: rgba(0, 0, 0, 0.2);
-      padding: 6px 12px 8px 8px;
-      border-radius: 5px;
-      font-size: 24px;
-      line-height: 100%;
-      margin-top: 10px;
-      width: fit-content;
+      margin-right: 45px;
     }
     .pnl {
-      margin-top: 22px;
-      font-size: 120px;
-      line-height: 100%;
+      font-size: 72px;
+      line-height: 90%;
       font-weight: 700;
+      font-stretch: 125%;
+      color: --card-bg-color;
     }
     .right-img {
@@ -196,8 +185,10 @@
     .arrow {
       width: 24px;
       height: 24px;
-      margin-top: 3px;
-      margin-bottom: -3px;
+      margin-top: -4px;
+      margin-bottom: -4px;
+      margin-right: -4px;
+      margin-left: -6px;
     }
     .person-img {
@@ -208,67 +199,120 @@
       mix-blend-mode: multiply;
     }
-    .bg-img {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
+    .box {
+      background: #0F0F0F;
+      border-radius: 33px;
+      height: 100%;
+      width: fit-content;
+      padding: 30px 30px 55px;
+      min-width: 550px;
+      position: relative;
     }
-    .level-wrapper {
+    .box-bottom {
       margin-top: 30px;
     }
-    .level-title {
-      opacity: 50%;
-      color: #000000CC;
+    .wrapper {
+      width: 100%;
+      padding-top: 24px;
+      border-top: 1px solid #494949;
+    }
+    .wrapper+.wrapper {
+      margin-left: 24px;
+    }
+    .text {
       font-size: 24px;
       line-height: 100%;
     }
-    .level-content {
-      margin-top: 6px;
-      font-size: 28px;
-      line-height: 37.86px;
+    .text-gray {
+      color: #707070;
     }
-    .level-box {
-      margin-left: 125px;
+    .mt-45 {
+      margin-top: 45px;
+    }
+    .mt-12 {
+      margin-top: 12px;
+    }
+    .text-black {
+      color: #0F0F0F;
+    }
+    .account {
+      font-size: 30px;
+      line-height: 80%;
+    }
+    .avatar {
+      border: 1px solid #2A2A2A;
+      border-radius: 100%;
+      width: 64px;
+      height: 64px;
+      margin-right: 16px;
+    }
+    .avatar img {
+      width: 50%;
+    }
+    .text-semibold {
+      font-weight: 600;
+    }
+    .text-nowrap {
+      white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <div class="card flex flex-col justify-between">
-    <img class="bg-img" src={bgImg} alt="">
-    <img class="right-img" src={rightImg} alt="">
-    <img class="person-img" src={personImg} alt="">
-    <img src="{logo}" class="logo" alt="">
-    <div>
-      <div class="trend flex items-center">
-        <div class="trend__img flex items-center justify-center">
-          <img src="{trendImage}" alt="">
-        </div>
-        <div>
-          <div class="trend__title">{trendTitle}</div>
-          <div class="trend__badge">
-            <img class="arrow" src="{arrowImage}" alt="">
-            <span>{positionInfo}</span>
-          </div>
+    <img class="person-img" src={trendImage} alt="">
+    <div class="box flex flex-col justify-between">
+      <div class="flex items-center">
+        <div class="avatar flex items-center justify-center">
+          <img src="{avatar}" alt="">
         </div>
+        <div class="account">{account}</div>
       </div>
-      <div class="pnl">{pnl}%</div>
-      <div class="level-wrapper flex items-center">
-        <div>
-          <div class="level-title">Entry level:</div>
-          <div class="level-content">{openLevel}</div>
+      <div>
+        <div class="wrapper flex justify-between">
+          <div class="pnl mona-sans">{pnl}%</div>
+          <div class="text text-gray">PnL</div>
         </div>
-        <div class="level-box {exitLevelClass}">
-          <div class="level-title">Exit level:</div>
-          <div class="level-content">{exitLevel}</div>
+        <div class="flex mt-45 text">
+          <div class="wrapper">
+            <div class="text-semibold text-nowrap">{trendTitle}</div>
+            <div class="mt-12">
+              <img class="arrow" src="{arrowImage}" alt="">
+              <span class="text-gray">{positionInfo}</span>
+            </div>
+          </div>
+          <div class="wrapper">
+            <div class="flex justify-between">
+              <div class="text-gray">Entry:</div>
+              <div class="text-semibold">{openLevel}</div>
+            </div>
+            <div class="flex justify-between mt-12 {exitLevelClass}">
+              <div class="text-gray">Exit:</div>
+              <div class="text-semibold">{exitLevel}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <div class="box-bottom flex items-end">
+      <img src="{logo}" class="logo" alt="">
+      <div class="text-upper geist-mono text-black">trade attention on <span
+          class="text-underline text-bold">Trendle.fi</span>
+      </div>
+    </div>
   </div>
 </body>

package/dist/templates/trendle-trading/index.js CHANGED Viewed

@@ -1,10 +1,31 @@
-import {_ as __awaiter,a as __generator,g as getFile,b as getBase64Image,d as downloadImage}from'../../index-6ec143bc.js';import path from'path';import'fs';import'util';import'stream';import'http';import'https';import'url';import'crypto';import'http2';import'assert';import'tty';import'zlib';import'events';var cardTypes = {
+import {_ as __awaiter,a as __generator,b as getBase64Image,g as getFile,d as downloadImage}from'../../index-6ec143bc.js';import path from'path';import'fs';import'util';import'stream';import'http';import'https';import'url';import'crypto';import'http2';import'assert';import'tty';import'zlib';import'events';var hashCode = function (str) {
+    return Array.from(str).reduce(function (hash, c) { return (hash << 5) - hash + c.charCodeAt(0); }, 0);
+};
+var generateShapeAvatar = function (address, size, scale) {
+    if (size === void 0) { size = 6; }
+    if (scale === void 0) { scale = 10; }
+    var hash = Math.abs(hashCode(address.toLowerCase()));
+    var color = "hsl(".concat(hash % 360, ", 60%, 55%)");
+    var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='".concat(size * scale, "' height='").concat(size * scale, "'>");
+    for (var y = 0; y < size; y++) {
+        for (var x = 0; x < Math.ceil(size / 2); x++) {
+            if (((hash >> (x + y * size)) & 1) === 1) {
+                var rx = x * scale;
+                var ry = y * scale;
+                var symX = (size - x - 1) * scale;
+                svg += "<rect x='".concat(rx, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+                svg += "<rect x='".concat(symX, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+            }
+        }
+    }
+    svg += '</svg>';
+    var avatar = "data:image/svg+xml;utf8,".concat(encodeURIComponent(svg));
+    return avatar;
+};var cardTypes = {
     'profit': {
-        rightImg: 'images/profit.png',
         bgColor: '#72FF4B',
     },
     'loss': {
-        rightImg: 'images/loss.png',
         bgColor: '#FF604B',
     }
 };
@@ -13,30 +34,35 @@ var template = {
     height: 630,
     type: 'jpeg',
     html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
-        var type, trend, pnl, position, isProfit, _a, rightImg, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, bgImage, rightImage, personImage, arrowImage, trendImage, positionInfo;
+        var accountAddress, trend, pnl, position, isProfit, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, arrowImage, trendImage, _a, positionInfo, avatar;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    type = props.type, trend = props.trend, pnl = props.pnl, position = props.position;
+                    accountAddress = props.accountAddress, trend = props.trend, pnl = props.pnl, position = props.position;
                     isProfit = pnl > 0;
-                    _a = isProfit ? cardTypes.profit : cardTypes.loss, rightImg = _a.rightImg, bgColor = _a.bgColor;
+                    bgColor = (isProfit ? cardTypes.profit : cardTypes.loss).bgColor;
                     leverage = position.leverage, isLong = position.isLong, openLevel = position.openLevel, exitLevel = position.exitLevel;
                     html = getFile(path.join(__dirname, 'index.html'));
                     logo = getBase64Image(path.resolve(__dirname, 'images/logo.png'));
-                    bgImage = getBase64Image(path.resolve(__dirname, 'images/bg.png'));
-                    rightImage = getBase64Image(path.resolve(__dirname, rightImg));
-                    personImage = getBase64Image(path.resolve(__dirname, "images/".concat(type, ".png")));
                     arrowImage = getBase64Image(path.resolve(__dirname, isLong ? 'images/arrow-up.png' : 'images/arrow-down.png'));
+                    if (!trend.image) return [3 /*break*/, 2];
                     return [4 /*yield*/, downloadImage(trend.image)];
                 case 1:
-                    trendImage = _b.sent();
-                    positionInfo = "".concat(isLong ? ' Up' : ' Down', ", Boost x").concat(leverage);
+                    _a = _b.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = getBase64Image(path.resolve(__dirname, 'images/default.png'));
+                    _b.label = 3;
+                case 3:
+                    trendImage = _a;
+                    positionInfo = "".concat(isLong ? 'Up' : 'Down', ", X").concat(leverage, " Boost");
+                    avatar = generateShapeAvatar(accountAddress);
                     return [2 /*return*/, html
                             .replace('{logo}', logo)
-                            .replace('--card-bg-color', bgColor)
-                            .replace('{bgImg}', bgImage)
-                            .replace('{rightImg}', rightImage)
-                            .replace('{personImg}', personImage)
+                            .replace('{account}', "".concat(accountAddress.substr(0, 6), "...").concat(accountAddress.substr(-1 * 6)))
+                            .replace('{avatar}', avatar)
+                            .replaceAll('--card-bg-color', bgColor)
+                            .replace('{personImg}', trendImage)
                             .replace('{trendImage}', trendImage)
                             .replace('{trendTitle}', trend.title)
                             .replace('{positionInfo}', positionInfo)

package/dist/templates/trendle-trading/utils/generateShapeAvatar.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const generateShapeAvatar: (address: string, size?: number, scale?: number) => string;
2	+ export default generateShapeAvatar;

package/lib/generator.d.ts CHANGED Viewed

@@ -4,12 +4,27 @@ interface GeneratorOptions {
     timeout?: number;
     args?: string[];
 }
+/**
+ * Options for a single image generation.
+ */
 interface GenerateOptions {
+    /** JPEG quality 1–100 (ignored for PNG). Default 85. */
     quality?: number;
+    /** Screenshot the full scrollable page instead of just the viewport. Default false. */
     fullPage?: boolean;
+    /** Wait for document.fonts.ready before taking the screenshot so webfonts are applied. Default true. */
     waitForFonts?: boolean;
+    /** Max ms to wait for content/font loading. Default 2000. */
     waitTimeout?: number;
+    /**
+     * When to consider the page content "loaded" before screenshot.
+     * - `domcontentloaded` – DOM ready, resources (images, fonts) may still load. Fastest. Default.
+     * - `load` – load event fired (images, stylesheets, etc. loaded).
+     * - `networkidle0` – no network requests for 500ms.
+     * - `networkidle2` – at most 2 network requests for 500ms.
+     */
     waitUntil?: 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2';
+    /** If true, do not add an extra delay for CSS animations. Default true. */
     skipAnimations?: boolean;
 }
 type GenerateProps<P> = {

package/lib/index.js CHANGED Viewed

@@ -180,7 +180,7 @@ function __generator(thisArg, body) {
                             throw new Error('Invalid template: missing required properties');
                         }
                         width = template.width, height = template.height, type = template.type, getHtml = template.html;
-                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'domcontentloaded' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
+                        _d = options.quality, quality = _d === void 0 ? type === 'jpeg' ? 85 : undefined : _d, _e = options.fullPage, fullPage = _e === void 0 ? false : _e, _f = options.waitForFonts, waitForFonts = _f === void 0 ? true : _f, _g = options.waitTimeout, waitTimeout = _g === void 0 ? 2000 : _g, _h = options.waitUntil, waitUntil = _h === void 0 ? 'load' : _h, _j = options.skipAnimations, skipAnimations = _j === void 0 ? true : _j;
                         _l.label = 7;
                     case 7:
                         _l.trys.push([7, 20, , 21]);

package/lib/templates/trendle-trading/images/arrow-down.png CHANGED Viewed

Binary file

package/lib/templates/trendle-trading/images/arrow-up.png CHANGED Viewed

Binary file

package/lib/templates/trendle-trading/images/default.png ADDED Viewed

Binary file

package/lib/templates/trendle-trading/index.d.ts CHANGED Viewed

@@ -1,16 +1,15 @@
 import { type Template } from '../../utils';
-type Person = 'obama' | 'drake' | 'crash' | 'sydney' | 'tramp' | 'elon' | 'lewis' | 'mark' | 'powell' | 'macron' | 'arnold' | 'person-1' | 'tramp-2' | 'elon-2' | 'person-2' | 'taylor';
 export type Props = {
-    type: Person;
+    accountAddress: string;
     trend: {
-        image: string;
+        image: string | undefined;
         title: string;
     };
     position: {
         leverage: number;
         isLong: boolean;
-        openLevel: number;
-        exitLevel: number | undefined;
+        openLevel: string;
+        exitLevel: string | undefined;
     };
     pnl: number;
 };

package/lib/templates/trendle-trading/index.html CHANGED Viewed

@@ -4,8 +4,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
-    href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Mona+Sans:wdth,wght@75..125,700&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;700&family=Inter:wght@500;600&family=Mona+Sans:wdth,wght@125,700&display=swap"
     rel="stylesheet">
   <style>
     html {
@@ -26,6 +28,13 @@
       font-style: normal;
     }
+    .geist-mono {
+      font-family: "Geist Mono", monospace;
+      font-optical-sizing: auto;
+      font-weight: 400;
+      font-style: normal;
+    }
     * {
       box-sizing: border-box;
     }
@@ -130,60 +139,40 @@
       text-transform: uppercase;
     }
+    .text-underline {
+      text-decoration: underline;
+    }
     .text-center {
       text-align: center;
     }
+    .text-bold {
+      font-weight: 700;
+    }
     .card {
       background: --card-bg-color;
       width: 1200px;
-      height: 630px;
-      padding: 48px;
+      height: 675px;
+      padding: 40px 36px 30px;
       position: relative;
+      color: white;
     }
     .logo {
-      height: 38px;
-      width: 266px;
+      height: 24px;
+      width: 156px;
       display: block;
-    }
-    .trend {
-      /* margin-top: 108px; */
-    }
-    .trend__img {
-      margin-right: 20px;
-      width: 80px;
-      height: 80px;
-      border-radius: 100%;
-      overflow: hidden;
-    }
-    .trend__img>img {
-      width: 100%;
-    }
-    .trend__title {
-      font-size: 32px;
-      line-height: 100%;
-    }
-    .trend__badge {
-      background-color: rgba(0, 0, 0, 0.2);
-      padding: 6px 12px 8px 8px;
-      border-radius: 5px;
-      font-size: 24px;
-      line-height: 100%;
-      margin-top: 10px;
-      width: fit-content;
+      margin-right: 45px;
     }
     .pnl {
-      margin-top: 22px;
-      font-size: 120px;
-      line-height: 100%;
+      font-size: 72px;
+      line-height: 90%;
       font-weight: 700;
+      font-stretch: 125%;
+      color: --card-bg-color;
     }
     .right-img {
@@ -196,8 +185,10 @@
     .arrow {
       width: 24px;
       height: 24px;
-      margin-top: 3px;
-      margin-bottom: -3px;
+      margin-top: -4px;
+      margin-bottom: -4px;
+      margin-right: -4px;
+      margin-left: -6px;
     }
     .person-img {
@@ -208,67 +199,120 @@
       mix-blend-mode: multiply;
     }
-    .bg-img {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
+    .box {
+      background: #0F0F0F;
+      border-radius: 33px;
+      height: 100%;
+      width: fit-content;
+      padding: 30px 30px 55px;
+      min-width: 550px;
+      position: relative;
     }
-    .level-wrapper {
+    .box-bottom {
       margin-top: 30px;
     }
-    .level-title {
-      opacity: 50%;
-      color: #000000CC;
+    .wrapper {
+      width: 100%;
+      padding-top: 24px;
+      border-top: 1px solid #494949;
+    }
+    .wrapper+.wrapper {
+      margin-left: 24px;
+    }
+    .text {
       font-size: 24px;
       line-height: 100%;
     }
-    .level-content {
-      margin-top: 6px;
-      font-size: 28px;
-      line-height: 37.86px;
+    .text-gray {
+      color: #707070;
     }
-    .level-box {
-      margin-left: 125px;
+    .mt-45 {
+      margin-top: 45px;
+    }
+    .mt-12 {
+      margin-top: 12px;
+    }
+    .text-black {
+      color: #0F0F0F;
+    }
+    .account {
+      font-size: 30px;
+      line-height: 80%;
+    }
+    .avatar {
+      border: 1px solid #2A2A2A;
+      border-radius: 100%;
+      width: 64px;
+      height: 64px;
+      margin-right: 16px;
+    }
+    .avatar img {
+      width: 50%;
+    }
+    .text-semibold {
+      font-weight: 600;
+    }
+    .text-nowrap {
+      white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <div class="card flex flex-col justify-between">
-    <img class="bg-img" src={bgImg} alt="">
-    <img class="right-img" src={rightImg} alt="">
-    <img class="person-img" src={personImg} alt="">
-    <img src="{logo}" class="logo" alt="">
-    <div>
-      <div class="trend flex items-center">
-        <div class="trend__img flex items-center justify-center">
-          <img src="{trendImage}" alt="">
-        </div>
-        <div>
-          <div class="trend__title">{trendTitle}</div>
-          <div class="trend__badge">
-            <img class="arrow" src="{arrowImage}" alt="">
-            <span>{positionInfo}</span>
-          </div>
+    <img class="person-img" src={trendImage} alt="">
+    <div class="box flex flex-col justify-between">
+      <div class="flex items-center">
+        <div class="avatar flex items-center justify-center">
+          <img src="{avatar}" alt="">
         </div>
+        <div class="account">{account}</div>
       </div>
-      <div class="pnl">{pnl}%</div>
-      <div class="level-wrapper flex items-center">
-        <div>
-          <div class="level-title">Entry level:</div>
-          <div class="level-content">{openLevel}</div>
+      <div>
+        <div class="wrapper flex justify-between">
+          <div class="pnl mona-sans">{pnl}%</div>
+          <div class="text text-gray">PnL</div>
         </div>
-        <div class="level-box {exitLevelClass}">
-          <div class="level-title">Exit level:</div>
-          <div class="level-content">{exitLevel}</div>
+        <div class="flex mt-45 text">
+          <div class="wrapper">
+            <div class="text-semibold text-nowrap">{trendTitle}</div>
+            <div class="mt-12">
+              <img class="arrow" src="{arrowImage}" alt="">
+              <span class="text-gray">{positionInfo}</span>
+            </div>
+          </div>
+          <div class="wrapper">
+            <div class="flex justify-between">
+              <div class="text-gray">Entry:</div>
+              <div class="text-semibold">{openLevel}</div>
+            </div>
+            <div class="flex justify-between mt-12 {exitLevelClass}">
+              <div class="text-gray">Exit:</div>
+              <div class="text-semibold">{exitLevel}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <div class="box-bottom flex items-end">
+      <img src="{logo}" class="logo" alt="">
+      <div class="text-upper geist-mono text-black">trade attention on <span
+          class="text-underline text-bold">Trendle.fi</span>
+      </div>
+    </div>
   </div>
 </body>

package/lib/templates/trendle-trading/index.js CHANGED Viewed

@@ -1,10 +1,31 @@
-'use strict';var index=require('../../index-efa024cc.js'),path=require('path');require('fs'),require('util'),require('stream'),require('http'),require('https'),require('url'),require('crypto'),require('http2'),require('assert'),require('tty'),require('zlib'),require('events');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var path__default=/*#__PURE__*/_interopDefaultLegacy(path);var cardTypes = {
+'use strict';var index=require('../../index-efa024cc.js'),path=require('path');require('fs'),require('util'),require('stream'),require('http'),require('https'),require('url'),require('crypto'),require('http2'),require('assert'),require('tty'),require('zlib'),require('events');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var path__default=/*#__PURE__*/_interopDefaultLegacy(path);var hashCode = function (str) {
+    return Array.from(str).reduce(function (hash, c) { return (hash << 5) - hash + c.charCodeAt(0); }, 0);
+};
+var generateShapeAvatar = function (address, size, scale) {
+    if (size === void 0) { size = 6; }
+    if (scale === void 0) { scale = 10; }
+    var hash = Math.abs(hashCode(address.toLowerCase()));
+    var color = "hsl(".concat(hash % 360, ", 60%, 55%)");
+    var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='".concat(size * scale, "' height='").concat(size * scale, "'>");
+    for (var y = 0; y < size; y++) {
+        for (var x = 0; x < Math.ceil(size / 2); x++) {
+            if (((hash >> (x + y * size)) & 1) === 1) {
+                var rx = x * scale;
+                var ry = y * scale;
+                var symX = (size - x - 1) * scale;
+                svg += "<rect x='".concat(rx, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+                svg += "<rect x='".concat(symX, "' y='").concat(ry, "' width='").concat(scale, "' height='").concat(scale, "' fill='").concat(color, "'/>");
+            }
+        }
+    }
+    svg += '</svg>';
+    var avatar = "data:image/svg+xml;utf8,".concat(encodeURIComponent(svg));
+    return avatar;
+};var cardTypes = {
     'profit': {
-        rightImg: 'images/profit.png',
         bgColor: '#72FF4B',
     },
     'loss': {
-        rightImg: 'images/loss.png',
         bgColor: '#FF604B',
     }
 };
@@ -13,30 +34,35 @@ var template = {
     height: 630,
     type: 'jpeg',
     html: function (props) { return index._(void 0, void 0, void 0, function () {
-        var type, trend, pnl, position, isProfit, _a, rightImg, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, bgImage, rightImage, personImage, arrowImage, trendImage, positionInfo;
+        var accountAddress, trend, pnl, position, isProfit, bgColor, leverage, isLong, openLevel, exitLevel, html, logo, arrowImage, trendImage, _a, positionInfo, avatar;
         return index.a(this, function (_b) {
             switch (_b.label) {
                 case 0:
-                    type = props.type, trend = props.trend, pnl = props.pnl, position = props.position;
+                    accountAddress = props.accountAddress, trend = props.trend, pnl = props.pnl, position = props.position;
                     isProfit = pnl > 0;
-                    _a = isProfit ? cardTypes.profit : cardTypes.loss, rightImg = _a.rightImg, bgColor = _a.bgColor;
+                    bgColor = (isProfit ? cardTypes.profit : cardTypes.loss).bgColor;
                     leverage = position.leverage, isLong = position.isLong, openLevel = position.openLevel, exitLevel = position.exitLevel;
                     html = index.g(path__default["default"].join(__dirname, 'index.html'));
                     logo = index.b(path__default["default"].resolve(__dirname, 'images/logo.png'));
-                    bgImage = index.b(path__default["default"].resolve(__dirname, 'images/bg.png'));
-                    rightImage = index.b(path__default["default"].resolve(__dirname, rightImg));
-                    personImage = index.b(path__default["default"].resolve(__dirname, "images/".concat(type, ".png")));
                     arrowImage = index.b(path__default["default"].resolve(__dirname, isLong ? 'images/arrow-up.png' : 'images/arrow-down.png'));
+                    if (!trend.image) return [3 /*break*/, 2];
                     return [4 /*yield*/, index.d(trend.image)];
                 case 1:
-                    trendImage = _b.sent();
-                    positionInfo = "".concat(isLong ? ' Up' : ' Down', ", Boost x").concat(leverage);
+                    _a = _b.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = index.b(path__default["default"].resolve(__dirname, 'images/default.png'));
+                    _b.label = 3;
+                case 3:
+                    trendImage = _a;
+                    positionInfo = "".concat(isLong ? 'Up' : 'Down', ", X").concat(leverage, " Boost");
+                    avatar = generateShapeAvatar(accountAddress);
                     return [2 /*return*/, html
                             .replace('{logo}', logo)
-                            .replace('--card-bg-color', bgColor)
-                            .replace('{bgImg}', bgImage)
-                            .replace('{rightImg}', rightImage)
-                            .replace('{personImg}', personImage)
+                            .replace('{account}', "".concat(accountAddress.substr(0, 6), "...").concat(accountAddress.substr(-1 * 6)))
+                            .replace('{avatar}', avatar)
+                            .replaceAll('--card-bg-color', bgColor)
+                            .replace('{personImg}', trendImage)
                             .replace('{trendImage}', trendImage)
                             .replace('{trendTitle}', trend.title)
                             .replace('{positionInfo}', positionInfo)

package/lib/templates/trendle-trading/utils/generateShapeAvatar.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const generateShapeAvatar: (address: string, size?: number, scale?: number) => string;
2	+ export default generateShapeAvatar;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@azuro-org/images-generator",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "license": "ISC",
   "engines": {
     "node": ">=16.15.1",

package/tsconfig.json CHANGED Viewed

@@ -4,7 +4,12 @@
     "target": "es5",
     "module": "esnext",
     "moduleResolution": "node",
-    "lib": [ "es2017", "es7", "es6", "dom" ],
+    "lib": [
+      "es2021",
+      "es7",
+      "es6",
+      "dom"
+    ],
     "strict": true,
     "declaration": true,
     "esModuleInterop": true