@azuro-org/images-generator 1.3.8 → 1.3.10

package/dist/index.es.js

@@ -107,7 +107,7 @@ function __generator(thisArg, body) {
                         fs.mkdirSync(output);
                     }
                     filePath = "".concat(output.replace(/\/$/, ''), "/").concat(filename.replace(/\..+$/, ''), ".").concat(type);
-                    return [4 /*yield*/, content.screenshot({ path: filePath })];
+                    return [4 /*yield*/, content.screenshot({ path: filePath, type: type })];
                 case 9:
                     _d.sent();
                     return [4 /*yield*/, page.close()];

package/dist/templates/trendle-social/index.d.ts

@@ -3,28 +3,57 @@ declare const cardTypes: {
     readonly business: {
         readonly bottomImg: "images/business.png";
         readonly bgImg: "images/bg-business.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly culture: {
         readonly bottomImg: "images/culture.png";
         readonly bgImg: "images/bg-culture.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly crypto: {
         readonly bottomImg: "images/crypto.png";
         readonly bgImg: "images/bg-crypto.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly politics: {
         readonly bottomImg: "images/politics.png";
         readonly bgImg: "images/bg-politics.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly fomo: {
         readonly bottomImg: "images/fomo.png";
         readonly bgImg: "images/bg-fomo.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
+    };
+    readonly 'monad-1': {
+        readonly bottomImg: "images/monad-1.png";
+        readonly bgImg: "images/bg-monad-1.png";
+        readonly stampImg: "images/stamp-monad.png";
+        readonly additionalClassName: "monad";
+    };
+    readonly 'monad-2': {
+        readonly bottomImg: "images/monad-2.png";
+        readonly bgImg: "images/bg-monad-2.png";
+        readonly stampImg: "images/stamp-monad.png";
+        readonly additionalClassName: "monad";
+    };
+    readonly 'monad-3': {
+        readonly bottomImg: "images/monad-3.png";
+        readonly bgImg: "images/bg-monad-3.png";
+        readonly stampImg: "images/stamp-monad.png";
+        readonly additionalClassName: "monad";
     };
 };
 export type Props = {
     type: keyof typeof cardTypes;
     avatarUrl: string;
     username: string;
+    isWide?: boolean;
 };
 declare const template: Template<Props>;
 export default template;

package/dist/templates/trendle-social/index.html

@@ -127,17 +127,18 @@
     }
 
     .card {
-      width: 600px;
-      height: 749px;
-      padding-top: 183px;
+      width: 850px;
+      height: 1060px;
+      padding-top: 260px;
       position: relative;
+      z-index: 1;
     }
 
     .bg {
       position: absolute;
       mix-blend-mode: difference;
-      top: 0;
-      left: 0;
+      top: 0px;
+      left: 0px;
       width: 100%;
       height: 100%;
     }
@@ -145,18 +146,18 @@
     .bottom-img {
       position: absolute;
       mix-blend-mode: multiply;
-      bottom: 0;
-      left: 0;
+      bottom: 0px;
+      left: 0px;
       width: 100%;
     }
 
     .avatar {
-      width: 212px;
-      height: 212px;
+      width: 300px;
+      height: 300px;
       border-radius: 100%;
-      border: 2.47px solid white;
+      border: 3.5px solid white;
       overflow: hidden;
-      margin: 28px auto 0;
+      margin: 40px auto 0;
       position: relative;
       z-index: 10;
     }
@@ -168,36 +169,64 @@
     .username {
       background-color: #111;
       color: #fff;
-      padding: 5.6px 14px 9.2px;
-      margin: -9.9px auto 0;
+      padding: 8px 20px 13px;
+      margin: -14px auto 0;
       width: fit-content;
       position: relative;
       z-index: 10;
-      font-size: 25.4px;
+      font-size: 36px;
       line-height: 100%;
       font-weight: 400;
     }
 
     .stamp-img {
-      width: 169px;
-      height: 169px;
+      width: 240px;
+      height: 240px;
       position: absolute;
-      top: 191px;
-      right: 99px;
+      top: 270px;
+      right: 140px;
       z-index: 20;
     }
+
+    .wrapper {
+      width: --wrapper-width;
+      position: relative;
+      background: #393939;
+    }
+
+    .wrapper__img {
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 100%;
+      mix-blend-mode: multiply;
+    }
+
+    .monad .bottom-img {
+      mix-blend-mode: unset;
+    }
+
+    .monad .username {
+      box-shadow: 0px -4px 23px 0px rgba(136, 0, 255, 1) inset;
+      border-radius: 40px;
+    }
   </style>
 </head>
 <body>
-  <div class="card">
-    <img src="{bgImg}" alt="" class="bg">
-    <img src="{bottomImg}" alt="" class="bottom-img">
-    <img src="{titleImg}" alt="" class="title-img">
-    <div class="avatar flex items-center justify-center">
-      <img src="{avatar}" alt="">
+  <div class="wrapper flex justify-center {additionalClassName}">
+    <img src="{wrapperImg}" alt="" class="wrapper__img">
+    <div class="card">
+      <img src="{bgImg}" alt="" class="bg">
+      <img src="{bottomImg}" alt="" class="bottom-img">
+      <img src="{titleImg}" alt="" class="title-img">
+      <div class="avatar flex items-center justify-center">
+        <img src="{avatar}" alt="">
+      </div>
+      <img src="{stampImg}" alt="" class="stamp-img">
+      <div class="username geist-mono">{username}</div>
     </div>
-    <img src="{stampImg}" alt="" class="stamp-img">
-    <div class="username geist-mono">{username}</div>
   </div>
 </body>
 </html>

package/dist/templates/trendle-social/index.js

@@ -2,44 +2,79 @@ import {_ as __awaiter,a as __generator,g as getFile,b as getBase64Image,d as do
     'business': {
         bottomImg: 'images/business.png',
         bgImg: 'images/bg-business.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'culture': {
         bottomImg: 'images/culture.png',
         bgImg: 'images/bg-culture.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'crypto': {
         bottomImg: 'images/crypto.png',
         bgImg: 'images/bg-crypto.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'politics': {
         bottomImg: 'images/politics.png',
         bgImg: 'images/bg-politics.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'fomo': {
         bottomImg: 'images/fomo.png',
         bgImg: 'images/bg-fomo.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
+    },
+    'monad-1': {
+        bottomImg: 'images/monad-1.png',
+        bgImg: 'images/bg-monad-1.png',
+        stampImg: 'images/stamp-monad.png',
+        additionalClassName: 'monad'
+    },
+    'monad-2': {
+        bottomImg: 'images/monad-2.png',
+        bgImg: 'images/bg-monad-2.png',
+        stampImg: 'images/stamp-monad.png',
+        additionalClassName: 'monad'
+    },
+    'monad-3': {
+        bottomImg: 'images/monad-3.png',
+        bgImg: 'images/bg-monad-3.png',
+        stampImg: 'images/stamp-monad.png',
+        additionalClassName: 'monad'
     },
 };
+// 2020
 var template = {
     width: 850,
     height: 1060,
     type: 'jpeg',
     html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
-        var type, avatarUrl, username, _a, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var type, avatarUrl, username, _a, isWide, _b, bottomImg, bgImg, stampImg, additionalClassName, html, bottomImage, stampImage, bgImage, avatarImage;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    type = props.type, avatarUrl = props.avatarUrl, username = props.username;
-                    _a = cardTypes[type], bottomImg = _a.bottomImg, bgImg = _a.bgImg;
+                    type = props.type, avatarUrl = props.avatarUrl, username = props.username, _a = props.isWide, isWide = _a === void 0 ? true : _a;
+                    _b = cardTypes[type], bottomImg = _b.bottomImg, bgImg = _b.bgImg, stampImg = _b.stampImg, additionalClassName = _b.additionalClassName;
                     html = getFile(path.join(__dirname, 'index.html'));
-                    stampImage = getBase64Image(path.resolve(__dirname, 'images/stamp.png'));
-                    bottomImage = getBase64Image(path.resolve(__dirname, bottomImg));
+                    bottomImage = '';
+                    stampImage = getBase64Image(path.resolve(__dirname, stampImg));
                     bgImage = getBase64Image(path.resolve(__dirname, bgImg));
+                    if (bottomImg) {
+                        bottomImage = getBase64Image(path.resolve(__dirname, bottomImg));
+                    }
                     return [4 /*yield*/, downloadImage(avatarUrl)];
                 case 1:
-                    avatarImage = _b.sent();
+                    avatarImage = _c.sent();
                     return [2 /*return*/, html
+                            .replace('--wrapper-width', "".concat(isWide ? 2020 : 850, "px"))
+                            .replace('{additionalClassName}', additionalClassName)
                             .replace('{bgImg}', bgImage)
+                            .replace('{wrapperImg}', bottomImage)
                             .replace('{bottomImg}', bottomImage)
                             .replace('{stampImg}', stampImage)
                             .replace('{avatar}', avatarImage)

package/lib/index.js

@@ -107,7 +107,7 @@ function __generator(thisArg, body) {
                         fs__default["default"].mkdirSync(output);
                     }
                     filePath = "".concat(output.replace(/\/$/, ''), "/").concat(filename.replace(/\..+$/, ''), ".").concat(type);
-                    return [4 /*yield*/, content.screenshot({ path: filePath })];
+                    return [4 /*yield*/, content.screenshot({ path: filePath, type: type })];
                 case 9:
                     _d.sent();
                     return [4 /*yield*/, page.close()];

package/lib/templates/trendle-social/index.d.ts

@@ -3,28 +3,57 @@ declare const cardTypes: {
     readonly business: {
         readonly bottomImg: "images/business.png";
         readonly bgImg: "images/bg-business.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly culture: {
         readonly bottomImg: "images/culture.png";
         readonly bgImg: "images/bg-culture.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly crypto: {
         readonly bottomImg: "images/crypto.png";
         readonly bgImg: "images/bg-crypto.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly politics: {
         readonly bottomImg: "images/politics.png";
         readonly bgImg: "images/bg-politics.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
     };
     readonly fomo: {
         readonly bottomImg: "images/fomo.png";
         readonly bgImg: "images/bg-fomo.png";
+        readonly stampImg: "images/stamp.png";
+        readonly additionalClassName: "";
+    };
+    readonly 'monad-1': {
+        readonly bottomImg: "images/monad-1.png";
+        readonly bgImg: "images/bg-monad-1.png";
+        readonly stampImg: "images/stamp-monad.png";
+        readonly additionalClassName: "monad";
+    };
+    readonly 'monad-2': {
+        readonly bottomImg: "images/monad-2.png";
+        readonly bgImg: "images/bg-monad-2.png";
+        readonly stampImg: "images/stamp-monad.png";
+        readonly additionalClassName: "monad";
+    };
+    readonly 'monad-3': {
+        readonly bottomImg: "images/monad-3.png";
+        readonly bgImg: "images/bg-monad-3.png";
+        readonly stampImg: "images/stamp-monad.png";
+        readonly additionalClassName: "monad";
     };
 };
 export type Props = {
     type: keyof typeof cardTypes;
     avatarUrl: string;
     username: string;
+    isWide?: boolean;
 };
 declare const template: Template<Props>;
 export default template;

package/lib/templates/trendle-social/index.html

@@ -127,17 +127,18 @@
     }
 
     .card {
-      width: 600px;
-      height: 749px;
-      padding-top: 183px;
+      width: 850px;
+      height: 1060px;
+      padding-top: 260px;
       position: relative;
+      z-index: 1;
     }
 
     .bg {
       position: absolute;
       mix-blend-mode: difference;
-      top: 0;
-      left: 0;
+      top: 0px;
+      left: 0px;
       width: 100%;
       height: 100%;
     }
@@ -145,18 +146,18 @@
     .bottom-img {
       position: absolute;
       mix-blend-mode: multiply;
-      bottom: 0;
-      left: 0;
+      bottom: 0px;
+      left: 0px;
       width: 100%;
     }
 
     .avatar {
-      width: 212px;
-      height: 212px;
+      width: 300px;
+      height: 300px;
       border-radius: 100%;
-      border: 2.47px solid white;
+      border: 3.5px solid white;
       overflow: hidden;
-      margin: 28px auto 0;
+      margin: 40px auto 0;
       position: relative;
       z-index: 10;
     }
@@ -168,36 +169,64 @@
     .username {
       background-color: #111;
       color: #fff;
-      padding: 5.6px 14px 9.2px;
-      margin: -9.9px auto 0;
+      padding: 8px 20px 13px;
+      margin: -14px auto 0;
       width: fit-content;
       position: relative;
       z-index: 10;
-      font-size: 25.4px;
+      font-size: 36px;
       line-height: 100%;
       font-weight: 400;
     }
 
     .stamp-img {
-      width: 169px;
-      height: 169px;
+      width: 240px;
+      height: 240px;
       position: absolute;
-      top: 191px;
-      right: 99px;
+      top: 270px;
+      right: 140px;
       z-index: 20;
     }
+
+    .wrapper {
+      width: --wrapper-width;
+      position: relative;
+      background: #393939;
+    }
+
+    .wrapper__img {
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 100%;
+      mix-blend-mode: multiply;
+    }
+
+    .monad .bottom-img {
+      mix-blend-mode: unset;
+    }
+
+    .monad .username {
+      box-shadow: 0px -4px 23px 0px rgba(136, 0, 255, 1) inset;
+      border-radius: 40px;
+    }
   </style>
 </head>
 <body>
-  <div class="card">
-    <img src="{bgImg}" alt="" class="bg">
-    <img src="{bottomImg}" alt="" class="bottom-img">
-    <img src="{titleImg}" alt="" class="title-img">
-    <div class="avatar flex items-center justify-center">
-      <img src="{avatar}" alt="">
+  <div class="wrapper flex justify-center {additionalClassName}">
+    <img src="{wrapperImg}" alt="" class="wrapper__img">
+    <div class="card">
+      <img src="{bgImg}" alt="" class="bg">
+      <img src="{bottomImg}" alt="" class="bottom-img">
+      <img src="{titleImg}" alt="" class="title-img">
+      <div class="avatar flex items-center justify-center">
+        <img src="{avatar}" alt="">
+      </div>
+      <img src="{stampImg}" alt="" class="stamp-img">
+      <div class="username geist-mono">{username}</div>
     </div>
-    <img src="{stampImg}" alt="" class="stamp-img">
-    <div class="username geist-mono">{username}</div>
   </div>
 </body>
 </html>

package/lib/templates/trendle-social/index.js

@@ -2,44 +2,79 @@
     'business': {
         bottomImg: 'images/business.png',
         bgImg: 'images/bg-business.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'culture': {
         bottomImg: 'images/culture.png',
         bgImg: 'images/bg-culture.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'crypto': {
         bottomImg: 'images/crypto.png',
         bgImg: 'images/bg-crypto.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'politics': {
         bottomImg: 'images/politics.png',
         bgImg: 'images/bg-politics.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
     },
     'fomo': {
         bottomImg: 'images/fomo.png',
         bgImg: 'images/bg-fomo.png',
+        stampImg: 'images/stamp.png',
+        additionalClassName: ''
+    },
+    'monad-1': {
+        bottomImg: 'images/monad-1.png',
+        bgImg: 'images/bg-monad-1.png',
+        stampImg: 'images/stamp-monad.png',
+        additionalClassName: 'monad'
+    },
+    'monad-2': {
+        bottomImg: 'images/monad-2.png',
+        bgImg: 'images/bg-monad-2.png',
+        stampImg: 'images/stamp-monad.png',
+        additionalClassName: 'monad'
+    },
+    'monad-3': {
+        bottomImg: 'images/monad-3.png',
+        bgImg: 'images/bg-monad-3.png',
+        stampImg: 'images/stamp-monad.png',
+        additionalClassName: 'monad'
     },
 };
+// 2020
 var template = {
     width: 850,
     height: 1060,
     type: 'jpeg',
     html: function (props) { return index._(void 0, void 0, void 0, function () {
-        var type, avatarUrl, username, _a, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
-        return index.a(this, function (_b) {
-            switch (_b.label) {
+        var type, avatarUrl, username, _a, isWide, _b, bottomImg, bgImg, stampImg, additionalClassName, html, bottomImage, stampImage, bgImage, avatarImage;
+        return index.a(this, function (_c) {
+            switch (_c.label) {
                 case 0:
-                    type = props.type, avatarUrl = props.avatarUrl, username = props.username;
-                    _a = cardTypes[type], bottomImg = _a.bottomImg, bgImg = _a.bgImg;
+                    type = props.type, avatarUrl = props.avatarUrl, username = props.username, _a = props.isWide, isWide = _a === void 0 ? true : _a;
+                    _b = cardTypes[type], bottomImg = _b.bottomImg, bgImg = _b.bgImg, stampImg = _b.stampImg, additionalClassName = _b.additionalClassName;
                     html = index.g(path__default["default"].join(__dirname, 'index.html'));
-                    stampImage = index.b(path__default["default"].resolve(__dirname, 'images/stamp.png'));
-                    bottomImage = index.b(path__default["default"].resolve(__dirname, bottomImg));
+                    bottomImage = '';
+                    stampImage = index.b(path__default["default"].resolve(__dirname, stampImg));
                     bgImage = index.b(path__default["default"].resolve(__dirname, bgImg));
+                    if (bottomImg) {
+                        bottomImage = index.b(path__default["default"].resolve(__dirname, bottomImg));
+                    }
                     return [4 /*yield*/, index.d(avatarUrl)];
                 case 1:
-                    avatarImage = _b.sent();
+                    avatarImage = _c.sent();
                     return [2 /*return*/, html
+                            .replace('--wrapper-width', "".concat(isWide ? 2020 : 850, "px"))
+                            .replace('{additionalClassName}', additionalClassName)
                             .replace('{bgImg}', bgImage)
+                            .replace('{wrapperImg}', bottomImage)
                             .replace('{bottomImg}', bottomImage)
                             .replace('{stampImg}', stampImage)
                             .replace('{avatar}', avatarImage)

package/package.json

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