@azuro-org/images-generator 1.3.9 → 1.3.11

package/dist/index.es.js

@@ -88,46 +88,53 @@ function __generator(thisArg, body) {
                         })];
                 case 4:
                     _d.sent();
-                    return [4 /*yield*/, page.setContent(html, { waitUntil: 'domcontentloaded' })];
+                    return [4 /*yield*/, page.setContent(html, { waitUntil: 'networkidle0' })
+                        // Wait for fonts to load
+                    ];
                 case 5:
+                    _d.sent();
+                    // Wait for fonts to load
+                    return [4 /*yield*/, page.evaluate(function () { return document.fonts.ready; })];
+                case 6:
+                    // Wait for fonts to load
                     _d.sent();
                     return [4 /*yield*/, page.$('body')
                         // dont' change this condition!
                     ];
-                case 6:
+                case 7:
                     content = _d.sent();
-                    if (!(headless === false)) return [3 /*break*/, 8];
+                    if (!(headless === false)) return [3 /*break*/, 9];
                     return [4 /*yield*/, new Promise(function () { })];
-                case 7:
-                    _d.sent();
-                    _d.label = 8;
                 case 8:
-                    if (!output) return [3 /*break*/, 12];
+                    _d.sent();
+                    _d.label = 9;
+                case 9:
+                    if (!output) return [3 /*break*/, 13];
                     if (!fs.existsSync(output)) {
                         fs.mkdirSync(output);
                     }
                     filePath = "".concat(output.replace(/\/$/, ''), "/").concat(filename.replace(/\..+$/, ''), ".").concat(type);
-                    return [4 /*yield*/, content.screenshot({ path: filePath })];
-                case 9:
+                    return [4 /*yield*/, content.screenshot({ path: filePath, type: type })];
+                case 10:
                     _d.sent();
                     return [4 /*yield*/, page.close()];
-                case 10:
+                case 11:
                     _d.sent();
                     return [4 /*yield*/, browser.close()];
-                case 11:
+                case 12:
                     _d.sent();
-                    return [3 /*break*/, 16];
-                case 12: return [4 /*yield*/, content.screenshot({ omitBackground: true, type: type })];
-                case 13:
+                    return [3 /*break*/, 17];
+                case 13: return [4 /*yield*/, content.screenshot({ omitBackground: true, type: type })];
+                case 14:
                     imageBuffer = _d.sent();
                     return [4 /*yield*/, page.close()];
-                case 14:
+                case 15:
                     _d.sent();
                     return [4 /*yield*/, browser.close()];
-                case 15:
+                case 16:
                     _d.sent();
                     return [2 /*return*/, imageBuffer];
-                case 16: return [2 /*return*/];
+                case 17: return [2 /*return*/];
             }
         });
     });

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

@@ -0,0 +1,50 @@
+import { type Template } from '../../utils';
+declare const textByType: {
+    readonly pnlPercent: "PnL%";
+    readonly pnl: "PnL$";
+    readonly consistencyScore: "consistency score";
+};
+type LeaderboardType = keyof typeof textByType;
+declare const cardTypes: {
+    readonly black: {
+        readonly bgImg: "images/black.png";
+        readonly wideImg: "images/black-wide.png";
+        readonly title: "0.1%";
+        readonly subtitle: "Top of Trendle traders <br> by ";
+        readonly color: "black";
+        readonly additionalClassName: "black";
+    };
+    readonly gold: {
+        readonly bgImg: "images/gold.png";
+        readonly wideImg: "images/gold-wide.png";
+        readonly title: "Top 1%";
+        readonly subtitle: "of Trendle traders <br> by ";
+        readonly color: "#00000099";
+        readonly additionalClassName: "";
+    };
+    readonly silver: {
+        readonly bgImg: "images/silver.png";
+        readonly wideImg: "images/silver-wide.png";
+        readonly title: "Top 3%";
+        readonly subtitle: "of Trendle traders <br> by ";
+        readonly color: "#00000099";
+        readonly additionalClassName: "";
+    };
+    readonly bronze: {
+        readonly bgImg: "images/bronze.png";
+        readonly wideImg: "images/bronze-wide.png";
+        readonly title: "Top 10%";
+        readonly subtitle: "of Trendle traders <br> by ";
+        readonly color: "#00000099";
+        readonly additionalClassName: "";
+    };
+};
+export type Props = {
+    type: keyof typeof cardTypes;
+    leaderboardType: LeaderboardType;
+    avatarUrl: string | 'mock';
+    username: string;
+    isWide?: boolean;
+};
+declare const template: Template<Props>;
+export default template;

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

@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+<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=Geist+Mono:wght@100..900&display=swap&family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&display=swap" rel="stylesheet">
+  <style>
+    html {
+      font-family: 'Inter', sans-serif;
+      font-weight: 500;
+    }
+
+    html, body {
+      margin: 0;
+      width: fit-content;
+    }
+
+    .geist-mono {
+      font-family: "Geist Mono", sans-serif;
+      font-optical-sizing: auto;
+      font-weight: 400;
+      font-style: normal;
+    }
+
+    .mona-sans {
+      font-family: "Mona Sans", sans-serif;
+      font-optical-sizing: auto;
+      font-style: normal;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .flex {
+      display: flex;
+    }
+
+    .flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .flex-1 {
+      flex: 1 1 0;
+    }
+
+    .flex-auto {
+      flex: 1 1 auto;
+    }
+
+    .flex-none {
+      flex: none;
+    }
+
+    .items-center {
+      align-items: center;
+    }
+
+    .items-start {
+      align-items: flex-start;
+    }
+
+    .items-end {
+      align-items: flex-end;
+    }
+
+    .items-baseline {
+      align-items: baseline;
+    }
+
+    .items-stretch {
+      align-items: stretch;
+    }
+
+    .self-auto {
+      align-self: auto;
+    }
+
+    .self-start {
+      align-self: flex-start;
+    }
+
+    .self-end {
+      align-self: flex-end;
+    }
+
+    .self-center {
+      align-self: center;
+    }
+
+    .self-stretch {
+      align-self: stretch;
+    }
+
+    .justify-around {
+      justify-content: space-around;
+    }
+
+    .justify-between {
+      justify-content: space-between;
+    }
+
+    .justify-center {
+      justify-content: center;
+    }
+
+    .justify-start {
+      justify-content: flex-start;
+    }
+
+    .justify-end {
+      justify-content: flex-end;
+    }
+
+    .flex-row {
+      flex-direction: row;
+    }
+
+    .flex-col {
+      flex-direction: column;
+    }
+
+    .flex-col-reverse {
+      flex-direction: column-reverse;
+    }
+
+    .text-upper {
+      text-transform: uppercase;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+
+    .card {
+      width: 850px;
+      height: 1060px;
+      padding-bottom: 32px;
+      position: relative;
+      z-index: 1;
+      /* color: --color; */
+    }
+
+    .wrapper {
+      width: --wrapper-width;
+      position: relative;
+      background: #393939;
+    }
+
+    .wrapper__img {
+      position: absolute;
+      display: block;
+      top: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 100%;
+      mix-blend-mode: multiply;
+    }
+
+    .w-full {
+      width: 100%;
+    }
+
+    .bg {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    .text-shadow {
+      color: black;
+      opacity: 0.6;
+      text-shadow:
+        0px -1px 1px rgba(255, 255, 255, 0.29),
+        -1px  -1px 1px rgba(255, 255, 255, 0.5),
+        0px  3px 6px rgba(0, 0, 0),
+        -1px  1px 1px rgba(255, 255, 255, 0.5);
+    }
+
+    .title {
+      font-weight: 800;
+      font-size: 109.91px;
+      line-height: 80%;
+      letter-spacing: -2%;
+    }
+
+    .text {
+      font-weight: 600;
+      font-size: 24px;
+      line-height: 140%;
+      letter-spacing: 2%;
+      width: 300px;
+    }
+
+    .black .text {
+      font-weight: 900;
+    }
+
+    .subtitle {
+      font-weight: 700;
+      font-size: 36.41px;
+      line-height: 100%;
+      letter-spacing: -2%;
+    }
+
+    .box {
+      padding: 0px 30px;
+    }
+
+    .box2 {
+      margin-top: 30px;
+      padding-left: 27px;
+      padding-right: 30px;
+    }
+
+    .content {
+      z-index: 2;
+    }
+
+    .avatar {
+      position: absolute;
+      top: 209px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 370px;
+      height: 370px;
+      border-radius: 100%;
+      overflow: hidden;
+      z-index: 10;
+    }
+
+    .avatar > img {
+      width: 100%;
+    }
+
+    .username {
+      position: absolute;
+      top: 555px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #000;
+      color: #fff;
+      padding: 7px 40px 11px;
+      width: fit-content;
+      font-size: 32px;
+      line-height: 100%;
+      font-weight: 500;
+      border-radius: 66px;
+      z-index: 10;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrapper flex justify-center {additionalClassName}">
+    <img src="{wrapperImg}" alt="" class="wrapper__img">
+    <div class="card flex items-end">
+      <img src="{bgImg}" alt="" class="bg">
+      <div class="avatar flex items-center justify-center">
+        <img src="{avatar}" alt="">
+      </div>
+      <div class="username geist-mono">{username}</div>
+      <div class="content w-full">
+        <div class="box flex items-center justify-between w-full">
+          <div class="title text-shadow text-upper mona-sans">{title}</div>
+          <div class="text text-shadow geist-mono text-upper">
+            Attention<br> Prediction Market<br> Leaderboard
+          </div>
+        </div>
+        <div class="box2 flex items-end justify-between w-full">
+          <div class="subtitle text-shadow mona-sans">
+            {subtitle}
+          </div>
+          <div class="text text-shadow geist-mono text-upper">
+            Trendle.fi
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,76 @@
+import {_ as __awaiter,a as __generator,d as downloadImage,g as getFile,b as getBase64Image}from'../../index-82868da9.js';import path from'path';import'fs';import'util';import'stream';import'http';import'https';import'url';import'crypto';import'assert';import'tty';import'zlib';import'events';var textByType = {
+    pnlPercent: 'PnL%',
+    pnl: 'PnL$',
+    consistencyScore: 'consistency score'
+};
+var cardTypes = {
+    'black': {
+        bgImg: 'images/black.png',
+        wideImg: 'images/black-wide.png',
+        title: '0.1%',
+        subtitle: 'Top of Trendle traders <br> by ',
+        color: 'black',
+        additionalClassName: 'black'
+    },
+    'gold': {
+        bgImg: 'images/gold.png',
+        wideImg: 'images/gold-wide.png',
+        title: 'Top 1%',
+        subtitle: 'of Trendle traders <br> by ',
+        color: '#00000099',
+        additionalClassName: ''
+    },
+    'silver': {
+        bgImg: 'images/silver.png',
+        wideImg: 'images/silver-wide.png',
+        title: 'Top 3%',
+        subtitle: 'of Trendle traders <br> by ',
+        color: '#00000099',
+        additionalClassName: ''
+    },
+    'bronze': {
+        bgImg: 'images/bronze.png',
+        wideImg: 'images/bronze-wide.png',
+        title: 'Top 10%',
+        subtitle: 'of Trendle traders <br> by ',
+        color: '#00000099',
+        additionalClassName: ''
+    },
+};
+// 2020
+var template = {
+    width: 850,
+    height: 1060,
+    type: 'jpeg',
+    html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
+        var type, leaderboardType, avatarUrl, username, _a, isWide, _b, bgImg, wideImg, title, subtitle, color, additionalClassName, html, bgImage, wideImage, avatarImage;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    type = props.type, leaderboardType = props.leaderboardType, avatarUrl = props.avatarUrl, username = props.username, _a = props.isWide, isWide = _a === void 0 ? true : _a;
+                    _b = cardTypes[type], bgImg = _b.bgImg, wideImg = _b.wideImg, title = _b.title, subtitle = _b.subtitle, color = _b.color, additionalClassName = _b.additionalClassName;
+                    html = getFile(path.join(__dirname, 'index.html'));
+                    bgImage = getBase64Image(path.resolve(__dirname, bgImg));
+                    wideImage = getBase64Image(path.resolve(__dirname, wideImg));
+                    avatarImage = '';
+                    if (!(avatarUrl === 'mock')) return [3 /*break*/, 1];
+                    avatarImage = getBase64Image(path.resolve(__dirname, 'images/avatar.png'));
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, downloadImage(avatarUrl)];
+                case 2:
+                    avatarImage = _c.sent();
+                    _c.label = 3;
+                case 3: return [2 /*return*/, html
+                        .replace('--wrapper-width', "".concat(isWide ? 2020 : 850, "px"))
+                        .replace('{wrapperImg}', wideImage)
+                        .replace('--color', color)
+                        .replace('{additionalClassName}', additionalClassName)
+                        .replace('{bgImg}', bgImage)
+                        .replace('{avatar}', avatarImage)
+                        .replace('{username}', username)
+                        .replace('{title}', title)
+                        .replace('{subtitle}', subtitle + textByType[leaderboardType])];
+            }
+        });
+    }); }
+};export{template as default};

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

@@ -3,22 +3,50 @@ 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 = {

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

@@ -203,10 +203,19 @@
       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="wrapper flex justify-center">
+  <div class="wrapper flex justify-center {additionalClassName}">
     <img src="{wrapperImg}" alt="" class="wrapper__img">
     <div class="card">
       <img src="{bgImg}" alt="" class="bg">

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

@@ -2,22 +2,50 @@ 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
@@ -26,21 +54,25 @@ var template = {
     height: 1060,
     type: 'jpeg',
     html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
-        var type, avatarUrl, username, _a, isWide, _b, bottomImg, bgImg, html, stampImage, bottomImage, bgImage, avatarImage;
+        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 = props.isWide, isWide = _a === void 0 ? true : _a;
-                    _b = cardTypes[type], bottomImg = _b.bottomImg, bgImg = _b.bgImg;
+                    _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 = _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)