@azuro-org/images-generator 0.0.5 → 1.0.1

package/README.md

@@ -4,25 +4,10 @@
 
 ```typescript
 import { generateImage } from '@azuro-org/images-generator';
-import template, { type Props } from '@azuro-org/images-generator/dist/templates/bet-nft';
+import template, { type Props } from '@azuro-org/images-generator/lib/templates/bet-nft';
 
 const props: Props = {
-  type: 'match',
-  sport: 'soccer',
-  league: 'Leinster Senior League Senior Division',
-  team1: {
-    img: 'https://content.bookieratings.net/images/fq/tx/fqtxnf_20181001112329_100x100.png',
-    name: 'Nizhny Novgorod'
-  },
-  team2: {
-    img: 'https://content.bookieratings.net/images/fq/tx/fqtxnf_20181001112329_100x100.png',
-    name: 'Lokomotiv Moscow'
-  },
-  date: '21.03.2022 8:00 UTC',
-  betAmount: '100 USDC',
-  outcome: 'Total Under(2.5)',
-  betOdds: '2.88',
-  currentOdds: '1.88'
+  // ...
 }
 
 // get image buffer
@@ -41,7 +26,7 @@ generateImage({
 
 ## Options
 
-```
+```typescript
 type PuppeteerOptions = Parameters<typeof puppeteer.launch>[0]
 
 type PuppeteerInitialOptions = {
@@ -59,6 +44,112 @@ generateImage({
 ```
 
 
+# Examples
+
+<details>
+<summary><h3>Bet Opengraph</h3></summary>
+<p>
+
+```typescript
+import { generateImage } from '@azuro-org/images-generator';
+import template from '@azuro-org/images-generator/lib/templates/bet-og';
+
+generateImage({
+  template,
+  props: {
+    title: 'Decentralized betting is awesome!',
+    game: {
+      country: 'International Tournaments',
+      league: 'ESL Challenger League North America',
+      participants: [
+        {
+          name: 'WINDINGO',
+          image: 'https://content.bookmaker.xyz/avatars/provider-3/4757.png',
+        },
+        {
+          name: 'Los Grandes Academy',
+          image: 'https://content.bookmaker.xyz/avatars/provider-3/4739.png',
+        },
+      ],
+      startsAt: Date.now(),
+    }
+  },
+})
+```
+
+### Result
+
+<p>
+  <img src="./src/templates/bet-og/example.jpeg" width="600" />
+</p>
+</p>
+</details>
+
+<details>
+<summary><h3>Bet NFT</h3></summary>
+<p>
+
+```typescript
+import { generateImage } from '@azuro-org/images-generator';
+import template from '@azuro-org/images-generator/lib/templates/bet-nft';
+
+generateImage({
+  template,
+  props: {
+    type: 'match',
+    sport: 'Football',
+    league: 'International Tournaments · FIFA - World Cup',
+    team1: {
+      img: 'https://content.bookmaker.xyz/avatars/provider-3/4757.png',
+      name: 'Ecuador',
+    },
+    team2: {
+      img: 'https://content.bookmaker.xyz/avatars/provider-3/4739.png',
+      name: 'Senegal',
+    },
+    date: 'Dec 24, 2020',
+    betAmount: '100 xDAI',
+    outcome: 'Senegal',
+    betOdds: '1.7',
+    currentOdds: '1.2',
+  },
+})
+```
+
+### Result
+
+<p>
+  <img src="./src/templates/bet-nft/example.png" width="255" />
+</p>
+</p>
+</details>
+
+<details>
+<summary><h3>Bet Opengraph</h3></summary>
+<p>
+
+```typescript
+import { generateImage } from '@azuro-org/images-generator';
+import template from '@azuro-org/images-generator/lib/templates/freebet';
+
+generateImage({
+  template,
+  props: {
+    amount: 5,
+    date: '12.01.2022',
+  },
+})
+```
+
+### Result
+
+<p>
+  <img src="./src/templates/freebet/example.png" width="416" />
+</p>
+</p>
+</details>
+
+
 # Contributing
 
 ## Add new template
@@ -73,6 +164,8 @@ generateImage({
 Edit `{your_template_name}/index.ts` file:
 
 ```typescript
+import path from 'path'
+
 import { type Template, getFile, downloadImage, createGenerator } from '../../utils'
 
 export type Props = {
@@ -88,14 +181,12 @@ const template = {
   html: async (props: Props) => {
     const { team1ImageSrc, team2ImageSrc, date } = props
 
-    let html = getFile('./index.html')
-    let css = getFile('./index.css')
+    const html = getFile(path.join(__dirname, 'index.html'))
 
     const team1Img = await downloadImage(team1ImageSrc)
     const team2Img = await downloadImage(team2ImageSrc)
 
     return html
-      .replace('.style{}', css)
       .replace('{image1}', team1Img)
       .replace('{image2}', team2Img)
       .replace('{date}', date)
@@ -105,14 +196,6 @@ const template = {
 export default template
 ```
 
-
-## `createGenerator` options
-
-`type: 'png' | 'jpeg'`<br /><br />
-`headless: Boolean` - use true to see compiled html in browser<br /><br />
-`scaleFactor: 1 | 2` - use 2 if you need to generate x2 sized image
-
-
 ## Publish
 
 Publish npm package with `npm run publish`. For access to `@azuro-org` scope ask Pavel Ivanov or Stas Onatskiy.

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

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

package/dist/templates/freebet/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="//raw.githubusercontent.com/Azuro-protocol/public-assets/main/fonts/fivo-sans-modern/style.css" rel="stylesheet" />
+  <style>
+    html, body {
+      width: 416px;
+      height: 250px;
+      margin: 0;
+      padding: 0;
+    }
+
+    .image {
+      width: 416px;
+      height: 250px;
+      padding-top: 75px;
+      padding-left: 30px;
+      font-family: 'Fivo Sans Modern';
+      font-weight: 700;
+      background-size: cover;
+      background-position: center;
+      overflow: hidden;
+      border-radius: 10px;
+    }
+
+    .amount {
+      font-size: 48px;
+      line-height: 50px;
+    }
+
+    .text-gradient {
+      background: linear-gradient(271.45deg, #FCBD89 -22.37%, #B78EFF 34.63%, #82FCF4 117.18%), #FFFFFF;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-fill-color: transparent;
+    }
+
+    .amount span {
+      color: #fff;
+    }
+
+    .date {
+      margin-top: 8px;
+      font-size: 16px;
+      line-height: 110%;
+      color: #6EE0A3;
+    }
+  </style>
+</head>
+<body>
+  <div class="image" style="background-image: url({bgImage});">
+    <div class="amount">
+      <div class="text-gradient">{amount} xDAI</div>
+      <span>freebet!</span>
+    </div>
+    <div class="date">Valid until {date}</div>
+  </div>
+</body>
+</html>

package/dist/templates/freebet/index.js

@@ -0,0 +1,18 @@
+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',
+    scaleFactor: 2,
+    html: function (props) { return __awaiter(void 0, void 0, void 0, function () {
+        var amount, date, html, bgImage;
+        return __generator(this, function (_a) {
+            amount = props.amount, date = props.date;
+            html = getFile(path.resolve(__dirname, 'index.html'));
+            bgImage = getBase64Image(path.resolve(__dirname, 'images/bg.png'));
+            return [2 /*return*/, html
+                    .replace('{bgImage}', bgImage)
+                    .replace('{amount}', String(amount))
+                    .replace('{date}', date)];
+        });
+    }); }
+};export{template as default};

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

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

package/lib/templates/freebet/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="//raw.githubusercontent.com/Azuro-protocol/public-assets/main/fonts/fivo-sans-modern/style.css" rel="stylesheet" />
+  <style>
+    html, body {
+      width: 416px;
+      height: 250px;
+      margin: 0;
+      padding: 0;
+    }
+
+    .image {
+      width: 416px;
+      height: 250px;
+      padding-top: 75px;
+      padding-left: 30px;
+      font-family: 'Fivo Sans Modern';
+      font-weight: 700;
+      background-size: cover;
+      background-position: center;
+      overflow: hidden;
+      border-radius: 10px;
+    }
+
+    .amount {
+      font-size: 48px;
+      line-height: 50px;
+    }
+
+    .text-gradient {
+      background: linear-gradient(271.45deg, #FCBD89 -22.37%, #B78EFF 34.63%, #82FCF4 117.18%), #FFFFFF;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-fill-color: transparent;
+    }
+
+    .amount span {
+      color: #fff;
+    }
+
+    .date {
+      margin-top: 8px;
+      font-size: 16px;
+      line-height: 110%;
+      color: #6EE0A3;
+    }
+  </style>
+</head>
+<body>
+  <div class="image" style="background-image: url({bgImage});">
+    <div class="amount">
+      <div class="text-gradient">{amount} xDAI</div>
+      <span>freebet!</span>
+    </div>
+    <div class="date">Valid until {date}</div>
+  </div>
+</body>
+</html>

package/lib/templates/freebet/index.js

@@ -0,0 +1,18 @@
+'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',
+    scaleFactor: 2,
+    html: function (props) { return index._(void 0, void 0, void 0, function () {
+        var amount, date, html, bgImage;
+        return index.a(this, function (_a) {
+            amount = props.amount, date = props.date;
+            html = index.g(path__default["default"].resolve(__dirname, 'index.html'));
+            bgImage = index.b(path__default["default"].resolve(__dirname, 'images/bg.png'));
+            return [2 /*return*/, html
+                    .replace('{bgImage}', bgImage)
+                    .replace('{amount}', String(amount))
+                    .replace('{date}', date)];
+        });
+    }); }
+};module.exports=template;

package/package.json

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