@azuro-org/images-generator 0.0.1

package/.nvmrc

@@ -0,0 +1 @@
+16.15.1

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 16.15.1

package/README.md

@@ -0,0 +1,126 @@
+> This readme is for Developers only.
+
+## Current packages
+
+[@azuro-protocol/nft-image-generator](https://www.npmjs.com/package/@azuro-protocol/nft-image-generator)<br />
+[@azuro-protocol/bet-og-image-generator](https://www.npmjs.com/package/@azuro-protocol/bet-og-image-generator)
+
+
+## Usage
+
+### Types Declaration
+
+```typescript
+import { generateImage } from '@azuro-org/image-generator';
+import template, { type Props } from '@azuro-org/image-generator/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
+const buffer = generateImage({
+  template,
+  props,
+})
+
+// create image file
+generateImage({
+  template,
+  props,
+  output: './dist',
+})
+```
+
+## Options
+
+```
+type PuppeteerOptions = Parameters<typeof puppeteer.launch>[0]
+
+type PuppeteerInitialOptions = {
+  headless: boolean
+  devtools: boolean
+  args: string[]
+}
+
+generateImage({
+  output?: string // output filepath
+  filename?: string // default "image"
+  props: any
+  modifyPuppeteerOptions?(options: PuppeteerInitialOptions): PuppeteerOptions
+})
+```
+
+
+# Contributing
+
+## Add new template
+
+1. Copy `templates/_template` to `templates/{your_template_name}`.
+3. Use `index.html` for HTML. Write CSS in `index.html` file.
+4. Create `templates/{your_template_name}/images` folder for images if required.
+
+
+## Setup generator
+
+Edit `{your_template_name}/index.ts` file:
+
+```typescript
+import { type Template, getFile, downloadImage, createGenerator } from '../../utils'
+
+export type Props = {
+  team1ImageSrc: string
+  team2ImageSrc: string
+  date: string
+}
+
+const template = {
+  width: 800,
+  height: 400,
+  type: 'jpeg',
+  html: async (props: Props) => {
+    const { team1ImageSrc, team2ImageSrc, date } = props
+
+    let html = getFile('./index.html')
+    let css = getFile('./index.css')
+
+    const team1Img = await downloadImage(team1ImageSrc)
+    const team2Img = await downloadImage(team2ImageSrc)
+
+    return html
+      .replace('.style{}', css)
+      .replace('{image1}', team1Img)
+      .replace('{image2}', team2Img)
+      .replace('{date}', date)
+  },
+}
+
+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/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@azuro-org/images-generator",
+  "version": "0.0.1",
+  "license": "ISC",
+  "engines": {
+    "node": "=16.15.1",
+    "npm": "=8.11.0"
+  },
+  "typings": "./index.d.ts",
+  "scripts": {
+    "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"
+  },
+  "dependencies": {
+    "axios": "^0.26.1",
+    "builtin-modules": "^3.2.0",
+    "dayjs": "^1.11.7",
+    "puppeteer": "^19.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+    "@babel/plugin-transform-destructuring": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@types/node": "^17.0.21",
+    "glob": "^8.1.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.67.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.6.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,107 @@
+import glob from 'glob'
+import path from 'node:path'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import builtins from 'builtin-modules/static'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from 'rollup-plugin-typescript2'
+import babel from 'rollup-plugin-babel'
+import json from '@rollup/plugin-json'
+import copy from 'rollup-plugin-copy'
+
+
+const templateFolders = (
+  glob.sync('src/templates/*')
+    .filter((folder) => !folder.includes('_template'))
+    .map((folder) => path.relative('src', folder))
+)
+
+const TARGETS_TO_COPY = [
+  'index.html',
+  'images',
+]
+
+const main = {
+  input: './src/index.ts',
+  output: [
+    {
+      file: './lib/index.js',
+      format: 'cjs',
+      exports: 'named',
+    },
+    {
+      file: './dist/index.es.js',
+      format: 'es',
+      exports: 'named',
+    },
+  ],
+  external: [
+    ...builtins,
+    'puppeteer',
+  ],
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    json(),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    typescript({
+      tsconfigOverride: {
+        include: [
+          'src/index.ts',
+        ],
+      },
+      clean: true,
+    }),
+    copy({
+      targets: templateFolders.map((folder) => (
+        TARGETS_TO_COPY.map((fileName) => (
+          [ 'dist', 'lib' ].map((dest) => ({
+            src: path.join('src', folder, fileName),
+            dest: path.join(dest, folder),
+          })).flat()
+        )).flat()
+      )).flat(),
+    })
+  ],
+}
+
+const templates = {
+  input: Object.fromEntries(
+    templateFolders.map((file) => [
+      path.join(file, 'index'),
+      path.resolve(`src/${file}/index.ts`),
+    ])
+  ),
+  output: [
+    {
+      dir: 'lib',
+      format: 'cjs',
+      exports: 'named',
+    },
+    {
+      dir: 'dist',
+      format: 'es',
+      exports: 'named',
+    },
+  ],
+  external: [
+    ...builtins,
+  ],
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    json(),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    typescript({
+      clean: true,
+    }),
+  ],
+}
+
+export default [
+  main,
+  templates,
+]

package/src/index.ts

@@ -0,0 +1 @@
+export { default as generateImage } from './utils/generateImage'

package/src/templates/_template/index.css

@@ -0,0 +1,13 @@
+html {
+
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: fit-content;
+}
+
+* {
+  box-sizing: border-box;
+}

package/src/templates/_template/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Document</title>
+  <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" />
+  <style>.style{}</style>
+</head>
+<body>
+  <!-- Write your HTML here -->
+</body>
+</html>

package/src/templates/_template/index.ts

@@ -0,0 +1,22 @@
+import { type Template, getFile, getBase64Image, downloadImage } from '../../utils'
+
+
+export type Props = {
+
+}
+
+const template: Template = {
+  width: 1000,
+  height: 1000,
+  type: 'png',
+  html: (props: Props) => {
+    const {  } = props
+
+    let html = getFile('./index.html')
+    let css = getFile('./index.css')
+
+    return html.replace('.style{}', css)
+  }
+}
+
+export default template

package/src/templates/bet-nft/index.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <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" />
+  <style>
+    html {
+      font-family: 'Inter', sans-serif;
+      font-weight: 500;
+    }
+
+    html, body {
+      margin: 0;
+      width: fit-content;
+    }
+
+    * {
+      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;
+    }
+
+    .text-600 {
+      font-weight: 600;
+    }
+
+    .text-400 {
+      font-weight: 400;
+    }
+
+    .card {
+      width: 510px;
+      position: relative;
+      padding: 24px 16px 16px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 16px;
+      background: #FFFFFF;
+    }
+
+    .logo {
+      position: relative;
+      z-index: 1;
+      margin-bottom: 40px;
+    }
+
+    .shadow {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      top: 0;
+    }
+
+    .sport {
+      margin-bottom: 8px;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .league {
+      font-size: 18px;
+      line-height: 27px
+    }
+
+    .sport::before, .sport::after {
+      content: '';
+      display: block;
+      border-radius: 50%;
+      width: 4px;
+      height: 4px;
+      margin: 0 8px;
+      background: #000000;
+    }
+
+    .teams {
+      margin: 24px 0 16px;
+    }
+
+    .team {
+      width: 100%;
+      background: #FAFAFA;
+      border-radius: 12px;
+      padding: 16px;
+    }
+
+    .team img {
+      display: block;
+      width: 72px;
+      height: 72px;
+      margin: 0 auto;
+    }
+
+    .date {
+      opacity: 0.6;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .game {
+      font-size: 24px;
+      line-height: 36px;
+    }
+
+    .table {
+      border: 1px solid transparent;
+      border-radius: 12px;
+      overflow: hidden;
+      margin-top: 16px;
+      background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #FAFAFA 100%);
+    }
+
+    .table__head {
+      font-size: 14px;
+      line-height: 21px;
+      padding: 8px;
+      text-transform: capitalize;
+    }
+
+    .table__content {
+      padding: 24px
+    }
+
+    .table__item {
+      font-size: 20px;
+      line-height: 30px;
+      margin-top: 4px;
+    }
+
+    .table__item:first-child {
+      margin-top: 0;
+    }
+
+    .table_match {
+      border-color: #007FFF;
+    }
+
+    .table_match .table__head {
+      color: #007FFF;
+      background: #E0EEFE;
+    }
+
+    .table_claim {
+      border-color: #FFA000;
+    }
+
+    .table_claim .table__head {
+      color: #FFA000;
+      background: #FFF8E1;
+    }
+
+    .table_claimed {
+      border-color: #4CAF50;
+    }
+
+    .table_claimed .table__head {
+      color: #4CAF50;
+      background: #E8F5E9;
+    }
+
+    .table_lose {
+      border-color: #A3A3A3;
+    }
+
+    .table_lose .table__head {
+      color: #A3A3A3;
+      background: rgba(163, 163, 163, 0.12);
+    }
+
+    .table_canceled {
+      border-color: #FF1717;
+    }
+
+    .table_canceled .table__head {
+      color: #FF1717;
+      background: rgba(255, 23, 23, 0.12);
+    }
+  </style>
+</head>
+<body>
+  <div class="card" id="card">
+    <img src="{shadow}" alt="" class="shadow">
+    <div class="logo text-center">
+      <img src="{logo}" alt="">
+    </div>
+    <div id="sport" class="sport flex items-center justify-center text-upper text-600">{sport}</div>
+    <div id="league" class="league text-400 text-center">{league}</div>
+    <div class="teams flex">
+      <div class="team text-center">
+        <img id="team1-img" src="{image1}" alt="">
+      </div>
+      <img src="{separator}" alt="">
+      <div class="team text-center">
+        <img id="team2-img" src="{image2}" alt="">
+      </div>
+    </div>
+    <div id="date" class="date text-center text-400">
+      {date}
+    </div>
+    <div id="teams" class="game text-center text-600">
+      {game}
+    </div>
+    <div id="table" class="table table_{tableType}">
+      <div class="table__head text-center">{tableHead}</div>
+      <div class="table__content">
+        <div class="table__item flex items-center justify-between">
+          <div class="table__item__name text-400">Bet Amount:</div>
+          <div class="table__item__value text-600">{betAmount}</div>
+        </div>
+        <div class="table__item flex items-center justify-between">
+          <div class="table__item__name text-400">Outcome:</div>
+          <div class="table__item__value text-600">{outcome}</div>
+        </div>
+        <div class="table__item flex items-center justify-between">
+          <div class="table__item__name text-400">Bet odds:</div>
+          <div class="table__item__value text-600">{betOdds}</div>
+        </div>
+        <div class="table__item flex items-center justify-between">
+          <div class="table__item__name text-400">Current odds:</div>
+          <div class="table__item__value text-600">{currentOdds}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/src/templates/bet-nft/index.ts

@@ -0,0 +1,69 @@
+import { type Template, getFile, getBase64Image, downloadImage } from '../../utils'
+
+
+const matchType = {
+  'match': 'Waiting for match',
+  'claim': 'Waiting for claim',
+  'claimed': 'Claimed',
+  'lose': 'Lose',
+  'canceled': 'Canceled match'
+} as const
+
+type MatchType = keyof typeof matchType
+
+type Team = {
+  img: string
+  name: string
+}
+
+export type Props = {
+  type: MatchType
+  sport: string
+  league: string
+  team1: Team
+  team2: Team
+  date: string
+  betAmount: string
+  outcome: string
+  betOdds: string
+  currentOdds: string
+}
+
+const template: Template = {
+  width: 510,
+  height: 510,
+  type: 'png',
+  html: async (props: Props) => {
+    const { type, sport, league, team1, team2, date, betAmount, outcome, betOdds, currentOdds } = props
+
+    let html = getFile('./index.html')
+    let css = getFile('./index.css')
+
+    const shadow = getBase64Image('./images/shadow.png')
+    const logo = getBase64Image('./images/logo.png')
+    const separator = getBase64Image('./images/separator.png')
+
+    const team1Img = await downloadImage(team1.img)
+    const team2Img = await downloadImage(team2.img)
+
+    return html
+      .replace('.style{}', css)
+      .replace('{sport}', sport)
+      .replace('{league}', league)
+      .replace('{image1}', team1Img)
+      .replace('{image2}', team2Img)
+      .replace('{date}', date)
+      .replace('{game}', `${team1.name} - ${team2.name}`)
+      .replace('{tableType}', type)
+      .replace('{tableHead}', matchType[type])
+      .replace('{betAmount}', betAmount)
+      .replace('{outcome}', outcome)
+      .replace('{betOdds}', betOdds)
+      .replace('{currentOdds}', currentOdds)
+      .replace('{separator}', separator)
+      .replace('{shadow}', shadow)
+      .replace('{logo}', logo)
+  },
+}
+
+export default template

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

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <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" />
+  <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;
+    }
+
+    html, body {
+      width: 600px;
+      height: 315px;
+      margin: 0;
+      padding: 0;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .opengraph {
+      width: 600px;
+      height: 315px;
+      padding: 30px 16px 0 23px;
+      background-size: cover;
+      overflow: hidden;
+    }
+
+    .logo {
+      display: block;
+      height: 24px;
+      margin-bottom: 36px;
+    }
+
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .title {
+      padding-right: 40px;
+      color: #fff;
+      font-size: 30px;
+      line-height: 32px;
+      font-weight: 700;
+      font-family: 'Fivo Sans Modern', sans-serif;
+    }
+
+    .card {
+      flex: none;
+      width: 280px;
+      padding: 12px 4px 8px;
+      font-weight: 500;
+      background: #1F1F24;
+      border: 1px solid #333338;
+      box-shadow: 0 4px 22px rgba(0, 0, 0, 0.2);
+      border-radius: 9px;
+    }
+
+    .cardTitle {
+      padding: 0 10px;
+      margin-bottom: 11px;
+      color: #8A8A98;
+      text-align: center;
+      font-size: 13px;
+      line-height: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .teams {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .teamImage {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 68px;
+      height: 68px;
+      background: #27272B;
+      border-radius: 50%;
+    }
+
+    .teamImage img {
+      display: block;
+      width: 40px;
+    }
+
+    .dates {
+      padding: 0 24px;
+      text-align: center;
+    }
+
+    .date {
+      color: #8A8A98;
+      font-size: 13px;
+      line-height: 16px;
+    }
+
+    .time {
+      margin-top: 2px;
+      color: #fff;
+      font-size: 13px;
+      line-height: 16px;
+    }
+
+    .teamNames {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 44px;
+    }
+
+    .teamName {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 32px;
+      margin-top: 4px;
+      padding: 0 6px;
+      color: #fff;
+      text-align: center;
+      font-size: 13px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="opengraph" style="background-image: url({bgImage});">
+    <img class="logo" src="{logoImage}" alt="" />
+    <div class="content">
+      <div class="title">{title}</div>
+      <div class="card">
+        <div class="cardTitle">{country}&nbsp;&middot;&nbsp;{league}</div>
+        <div class="teams">
+          <div class="teamImage">
+            <img src="{team1Image}" alt="" />
+          </div>
+          <div class="dates">
+            <div class="date">{date}</div>
+            <div class="time">{time}</div>
+          </div>
+          <div class="teamImage">
+            <img src="{team2Image}" alt="" />
+          </div>
+        </div>
+        <div class="teamNames">
+          <div class="teamName">
+            <span>{team1Name}</span>
+          </div>
+          <div class="teamName">
+            <span>{team2Name}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

package/src/templates/bet-og/index.ts

@@ -0,0 +1,57 @@
+import dayjs from 'dayjs'
+
+import { type Template, getFile, getBase64Image } from '../../utils'
+
+
+export type Props = {
+  title: string
+  game: {
+    country: string
+    league: string
+    participants: {
+      name: string
+      image: string
+    }[]
+    startsAt: number
+  }
+}
+
+const template: Template = {
+  width: 600,
+  height: 315,
+  type: 'jpeg',
+  scaleFactor: 2,
+  html: async (props: Props) => {
+    const { title, game } = props
+    const { country, league, participants, startsAt } = game
+
+    const bgImage = getBase64Image('./images/bg.jpg')
+    const logoImage = getBase64Image('./images/logo.png')
+
+    const team1Image = participants[0].image
+    const team1Name = participants[0].name
+    const team2Image = participants[1].image
+    const team2Name = participants[1].name
+
+    const dateTime = dayjs(startsAt)
+    const date = dateTime.format('DD MMM')
+    const time = dateTime.format('HH:mm')
+
+    let html = getFile('./index.html')
+
+    return html
+      .replace('{bgImage}', bgImage)
+      .replace('{logoImage}', logoImage)
+      .replace('{title}', title)
+      .replace('{country}', country)
+      .replace('{league}', league)
+      .replace('{team1Image}', team1Image)
+      .replace('{team1Name}', team1Name)
+      .replace('{team2Image}', team2Image)
+      .replace('{team2Name}', team2Name)
+      .replace('{date}', date)
+      .replace('{time}', time)
+  }
+}
+
+export default template

package/src/utils/generateImage.ts

@@ -0,0 +1,89 @@
+import puppeteer from 'puppeteer'
+
+import { type Template } from './types'
+
+
+type PuppeteerOptions = Parameters<typeof puppeteer.launch>[0]
+
+type PuppeteerInitialOptions = {
+  headless: boolean
+  devtools: boolean
+  args: string[]
+}
+
+type GenerateImageResult<T> = T extends { output: string } ? void : (string | Buffer)
+
+type GenerateImageProps = {
+  template: Template
+  output?: string // output filepath
+  filename?: string
+  props: any
+  modifyPuppeteerOptions?(options: PuppeteerInitialOptions): PuppeteerOptions
+}
+
+export default async function generateImage<T extends GenerateImageProps>(props: T): Promise<GenerateImageResult<T> | undefined> {
+  const {
+    output,
+    filename = 'image',
+    template,
+    props: htmlProps,
+    modifyPuppeteerOptions,
+  } = props
+
+  const {
+    headless = true,
+    width,
+    height,
+    type,
+    scaleFactor = 1,
+    html: getHtml,
+  } = template
+
+  const html = await getHtml(htmlProps)
+
+  let launchOptions: PuppeteerOptions = {
+    headless,
+    devtools: false,
+    args: [
+      '--no-sandbox',
+      '--disable-gpu',
+      '--disable-accelerated-video-decode',
+      // '--allow-file-access-from-files',
+    ],
+  }
+
+  if (typeof modifyPuppeteerOptions === 'function') {
+    launchOptions = modifyPuppeteerOptions(launchOptions as PuppeteerInitialOptions)
+  }
+
+  const browser = await puppeteer.launch(launchOptions)
+
+  const page = await browser.newPage()
+
+  await page.setViewport({ width, height, deviceScaleFactor: scaleFactor })
+  await page.setContent(html)
+
+  const content = await page.$('body')
+
+  // dont' change this condition!
+  if (headless === false) {
+    await new Promise(() => {})
+  }
+
+  if (output) {
+    const filePath = `${output.replace(/\/$/, '')}/${filename.replace(/\..+$/, '')}.${type}`
+
+    await content!.screenshot({ path: filePath })
+    await page.close()
+    await browser.close()
+  }
+  else {
+    const imageBuffer = await content!.screenshot({ omitBackground: true, type })
+
+    await page.close()
+    await browser.close()
+
+    // @ts-ignore
+    return imageBuffer
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,37 @@
+import fs from 'fs'
+import path from 'path'
+import axios from 'axios'
+
+
+export const getPath = (filePath: string) => {
+  return path.join(__dirname, filePath)
+}
+
+export const getFile = (filePath: string) => {
+  return fs.readFileSync(getPath(filePath), 'utf8')
+}
+
+export const getBase64Image = (filePath: string) => {
+  return `data:image/png;base64,${fs.readFileSync(getPath(filePath)).toString('base64')}`
+}
+
+export const downloadImage = async (url: string) => {
+  // empty pixel
+  let base64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='
+
+  try {
+    const response = await axios.get(url,  { responseType: 'arraybuffer' })
+    const buffer = Buffer.from(response.data, 'utf-8')
+
+    base64 = buffer.toString('base64')
+  }
+  catch (err) {
+    console.error(err)
+    // empty pixel
+
+  }
+
+  return `data:image/png;base64,${base64}`
+}
+
+export { type Template } from './types'

package/src/utils/types.ts

@@ -0,0 +1,8 @@
+export type Template = {
+  headless?: boolean
+  width: number
+  height: number
+  type: 'png' | 'jpeg'
+  scaleFactor?: 1 | 2
+  html: (props: any) => string | Promise<string>
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "target": "es5",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "lib": [ "es2017", "es7", "es6", "dom" ],
+    "strict": true,
+    "declaration": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "lib"
+  ]
+}