@azuro-org/images-generator 1.0.6 → 1.0.8

package/README.md

@@ -36,8 +36,8 @@ type PuppeteerInitialOptions = {
 }
 
 generateImage({
-  output?: string // output filepath
-  filename?: string // default "image"
+  output?: string // the folder path where the image will be generated
+  filename?: string // image name, default is "image"
   props: any
   modifyPuppeteerOptions?(options: PuppeteerInitialOptions): PuppeteerOptions
 })
@@ -47,7 +47,7 @@ generateImage({
 # Examples
 
 <details>
-<summary><h3>Bet Opengraph</h3></summary>
+<summary><b>Bet Opengraph</b></summary>
 <p>
 
 ```typescript
@@ -80,13 +80,13 @@ generateImage({
 ### Result
 
 <p>
-  <img src="./src/templates/bet-og/example.jpeg" width="600" />
+  <img src="https://github.com/Azuro-protocol/images-generator/raw/main/src/templates/bet-og/example.jpeg" width="600" />
 </p>
 </p>
 </details>
 
 <details>
-<summary><h3>Bet NFT</h3></summary>
+<summary><b>Bet NFT</b></summary>
 <p>
 
 ```typescript
@@ -119,13 +119,13 @@ generateImage({
 ### Result
 
 <p>
-  <img src="./src/templates/bet-nft/example.png" width="255" />
+  <img src="https://github.com/Azuro-protocol/images-generator/raw/main/src/templates/bet-nft/example.png" width="255" />
 </p>
 </p>
 </details>
 
 <details>
-<summary><h3>Bet Opengraph</h3></summary>
+<summary><b>Bet Opengraph</b></summary>
 <p>
 
 ```typescript
@@ -144,7 +144,7 @@ generateImage({
 ### Result
 
 <p>
-  <img src="./src/templates/freebet/example.png" width="416" />
+  <img src="https://github.com/Azuro-protocol/images-generator/raw/main/src/templates/freebet/example.png" width="416" />
 </p>
 </p>
 </details>

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import puppeteer from'puppeteer';/******************************************************************************
+import fs from'fs';import puppeteer from'puppeteer';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -79,10 +79,16 @@ function __generator(thisArg, body) {
                     return [4 /*yield*/, browser.newPage()];
                 case 3:
                     page = _d.sent();
-                    return [4 /*yield*/, page.setViewport({ width: width, height: height, deviceScaleFactor: scaleFactor })];
+                    return [4 /*yield*/, page.setViewport({
+                            width: width,
+                            height: height,
+                            deviceScaleFactor: scaleFactor,
+                        })];
                 case 4:
                     _d.sent();
-                    return [4 /*yield*/, page.setContent(html)];
+                    return [4 /*yield*/, page.goto("data:text/html;charset=UTF-8,".concat(encodeURIComponent(html)), {
+                            waitUntil: 'networkidle0',
+                        })];
                 case 5:
                     _d.sent();
                     return [4 /*yield*/, page.$('body')
@@ -97,6 +103,9 @@ function __generator(thisArg, body) {
                     _d.label = 8;
                 case 8:
                     if (!output) return [3 /*break*/, 12];
+                    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:

package/dist/templates/bet-og/index.html

@@ -4,17 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link href="//raw.githubusercontent.com/Azuro-protocol/public-assets/main/fonts/fivo-sans-modern/style.css" rel="stylesheet" />
   <style>
-    @font-face {
-      font-weight: 700;
-      font-family: 'Fivo Sans Modern';
-      font-style: normal;
-      src: url('/fonts/fivo-sans-modern/bold.woff2') format('woff2'),
-      url('/fonts/fivo-sans-modern/bold.woff') format('woff');
-      font-display: swap;
-      unicode-range: U+000-5FF; /* Latin glyphs */
-    }
-
     html {
       font-family: 'Inter', sans-serif;
       font-weight: 500;

package/dist/templates/freebet/index.d.ts

@@ -1,6 +1,6 @@
 import { type Template } from '../../utils';
 export type Props = {
-    amount: number | string;
+    amount: string;
     date: string;
 };
 declare const template: Template;

package/dist/templates/freebet/index.html

@@ -10,6 +10,7 @@
       height: 250px;
       margin: 0;
       padding: 0;
+      background-color: #2d2f34;
     }
 
     .image {
@@ -17,13 +18,12 @@
       height: 250px;
       padding-top: 75px;
       padding-left: 30px;
-      font-family: 'Fivo Sans Modern';
+      font-family: 'Fivo Sans Modern', sans-serif;
       font-weight: 700;
       background-size: cover;
       background-position: center;
       overflow: hidden;
       box-sizing: border-box;
-      border-radius: 10px;
     }
 
     .amount {
@@ -54,7 +54,7 @@
 <body>
   <div class="image" style="background-image: url({bgImage});">
     <div class="amount">
-      <div class="text-gradient">{amount} xDAI</div>
+      <div class="text-gradient">{amount}</div>
       <span>freebet!</span>
     </div>
     <div class="date">Valid until {date}</div>

package/dist/templates/freebet/index.js

@@ -1,7 +1,7 @@
 import {_ as __awaiter,a as __generator,g as getFile,b as getBase64Image}from'../../index-401c8546.js';import path from'path';import'fs';import'http';import'https';import'url';import'stream';import'assert';import'tty';import'util';import'os';import'zlib';var template = {
     width: 416,
     height: 250,
-    type: 'png',
+    type: 'jpeg',
     scaleFactor: 2,
     html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
         var amount, date, html, bgImage;
@@ -11,7 +11,7 @@ import {_ as __awaiter,a as __generator,g as getFile,b as getBase64Image}from'..
             bgImage = getBase64Image(path.resolve(__dirname, 'images/bg.png'));
             return [2 /*return*/, html
                     .replace('{bgImage}', bgImage)
-                    .replace('{amount}', String(amount))
+                    .replace('{amount}', amount)
                     .replace('{date}', date)];
         });
     }); }

package/lib/index.js

@@ -1,4 +1,4 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var puppeteer=require('puppeteer');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var puppeteer__default=/*#__PURE__*/_interopDefaultLegacy(puppeteer);/******************************************************************************
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var fs=require('fs'),puppeteer=require('puppeteer');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var fs__default=/*#__PURE__*/_interopDefaultLegacy(fs);var puppeteer__default=/*#__PURE__*/_interopDefaultLegacy(puppeteer);/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -79,10 +79,16 @@ function __generator(thisArg, body) {
                     return [4 /*yield*/, browser.newPage()];
                 case 3:
                     page = _d.sent();
-                    return [4 /*yield*/, page.setViewport({ width: width, height: height, deviceScaleFactor: scaleFactor })];
+                    return [4 /*yield*/, page.setViewport({
+                            width: width,
+                            height: height,
+                            deviceScaleFactor: scaleFactor,
+                        })];
                 case 4:
                     _d.sent();
-                    return [4 /*yield*/, page.setContent(html)];
+                    return [4 /*yield*/, page.goto("data:text/html;charset=UTF-8,".concat(encodeURIComponent(html)), {
+                            waitUntil: 'networkidle0',
+                        })];
                 case 5:
                     _d.sent();
                     return [4 /*yield*/, page.$('body')
@@ -97,6 +103,9 @@ function __generator(thisArg, body) {
                     _d.label = 8;
                 case 8:
                     if (!output) return [3 /*break*/, 12];
+                    if (!fs__default["default"].existsSync(output)) {
+                        fs__default["default"].mkdirSync(output);
+                    }
                     filePath = "".concat(output.replace(/\/$/, ''), "/").concat(filename.replace(/\..+$/, ''), ".").concat(type);
                     return [4 /*yield*/, content.screenshot({ path: filePath })];
                 case 9:

package/lib/templates/bet-og/index.html

@@ -4,17 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link href="//raw.githubusercontent.com/Azuro-protocol/public-assets/main/fonts/fivo-sans-modern/style.css" rel="stylesheet" />
   <style>
-    @font-face {
-      font-weight: 700;
-      font-family: 'Fivo Sans Modern';
-      font-style: normal;
-      src: url('/fonts/fivo-sans-modern/bold.woff2') format('woff2'),
-      url('/fonts/fivo-sans-modern/bold.woff') format('woff');
-      font-display: swap;
-      unicode-range: U+000-5FF; /* Latin glyphs */
-    }
-
     html {
       font-family: 'Inter', sans-serif;
       font-weight: 500;

package/lib/templates/freebet/index.d.ts

@@ -1,6 +1,6 @@
 import { type Template } from '../../utils';
 export type Props = {
-    amount: number | string;
+    amount: string;
     date: string;
 };
 declare const template: Template;

package/lib/templates/freebet/index.html

@@ -10,6 +10,7 @@
       height: 250px;
       margin: 0;
       padding: 0;
+      background-color: #2d2f34;
     }
 
     .image {
@@ -17,13 +18,12 @@
       height: 250px;
       padding-top: 75px;
       padding-left: 30px;
-      font-family: 'Fivo Sans Modern';
+      font-family: 'Fivo Sans Modern', sans-serif;
       font-weight: 700;
       background-size: cover;
       background-position: center;
       overflow: hidden;
       box-sizing: border-box;
-      border-radius: 10px;
     }
 
     .amount {
@@ -54,7 +54,7 @@
 <body>
   <div class="image" style="background-image: url({bgImage});">
     <div class="amount">
-      <div class="text-gradient">{amount} xDAI</div>
+      <div class="text-gradient">{amount}</div>
       <span>freebet!</span>
     </div>
     <div class="date">Valid until {date}</div>

package/lib/templates/freebet/index.js

@@ -1,7 +1,7 @@
 'use strict';var index=require('../../index-7f0cb09b.js'),path=require('path');require('fs'),require('http'),require('https'),require('url'),require('stream'),require('assert'),require('tty'),require('util'),require('os'),require('zlib');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var path__default=/*#__PURE__*/_interopDefaultLegacy(path);var template = {
     width: 416,
     height: 250,
-    type: 'png',
+    type: 'jpeg',
     scaleFactor: 2,
     html: function (props) { return index._(void 0, void 0, void 0, function () {
         var amount, date, html, bgImage;
@@ -11,7 +11,7 @@
             bgImage = index.b(path__default["default"].resolve(__dirname, 'images/bg.png'));
             return [2 /*return*/, html
                     .replace('{bgImage}', bgImage)
-                    .replace('{amount}', String(amount))
+                    .replace('{amount}', amount)
                     .replace('{date}', date)];
         });
     }); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azuro-org/images-generator",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "license": "ISC",
   "engines": {
     "node": "=16.15.1",
@@ -10,10 +10,11 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
+    "test": "rimraf ./test/images && node ./test",
     "dev": "rollup -c ./rollup.config.js -w",
     "build": "rimraf ./dist && rimraf ./lib && rollup -c ./rollup.config.js --compact",
     "build-and-test": "npm run build && npm run test",
-    "prepublish": "npm run build"
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "axios": "^0.26.1",