Merge pull request #5 from dev-warner/beta

Beta

Author: dev-warner

.github/ISSUE_TEMPLATE.md .github/ISSUE_TEMPLATE/bug_report.md.github/ISSUE_TEMPLATE.md renamed to .github/ISSUE_TEMPLATE/bug_report.md

@@ -1,3 +1,11 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+---
+
 ### Description
 
 <!-- Example: Could not subscribe to updates when...  -->
@@ -33,7 +41,7 @@ Example:
 
 ### Versions
 
-- @dev-warner/post-card: vX.X.X
+- @post-cards/core: vX.X.X
 
 ### Other information
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/greetings.yml

@@ -12,5 +12,5 @@ jobs:
       - uses: actions/first-interaction@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          issue-message: 'Welcome to `@dev-warner/post-card` community! Thanks so much for creating your first issue ✔️'
-          pr-message: 'Thanks so much for creating your first PR, the `@dev-warner/post-card` community thanks you 🎉'
+          issue-message: 'Welcome to `@post-cards/core` community! Thanks so much for creating your first issue ✔️'
+          pr-message: 'Thanks so much for creating your first PR, the `@post-cards/core` community thanks you 🎉'

.github/workflows/release.yml

@@ -3,9 +3,7 @@ on:
   push:
     branches:
       - main
-      - next
       - beta
-      - alpha
 jobs:
   release:
     name: Release

CONTRIBUTING.md

@@ -0,0 +1,18 @@
+We're really glad you're reading this, because we need volunteer developers to help this project come to fruition. 👏
+
+## Instructions
+
+These steps will guide you through contributing to this project:
+
+- Fork the repo
+- Clone it and install dependencies
+
+      git clone https://github.com/YOUR-USERNAME/post-card
+      npm install
+      npm test
+
+Please make sure git commit messages conform to the [conventionalcommits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
+
+Make and commit your changes. Make sure the commands npm run build and npm run test are working and coverage remains high.
+
+Finally send a [GitHub Pull Request](https://github.com/dev-warner/post-card/compare?expand=1) with a clear list of what you've done (read more [about pull requests](https://help.github.com/articles/about-pull-requests/)). Make sure all of your commits are atomic (one feature per commit).

README.md

@@ -1,12 +1,12 @@
-# post-card
+# post-cards 📬
 
-[![test](https://github.com/dev-warner/post-card/actions/workflows/test.yml/badge.svg)](https://github.com/dev-warner/post-card/actions/workflows/test.yml)
+[![Coverage Status](https://coveralls.io/repos/github/dev-warner/post-card/badge.svg?branch=main)](https://coveralls.io/github/dev-warner/post-card?branch=main)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)
 
-`PostCard` is a small node library for generating OpenGraph images for social media sharing.
+`@post-cards/core` is a small node library for generating OpenGraph images for social media sharing. 📬
 
-- [Templates]()
-- [Documentation]()
+- [Templates](https://github.com/dev-warner/post-card-templates)
+- [Documentation](https://dev-warner.github.io/post-card/)
 
 <br>
 
@@ -18,76 +18,38 @@
 
 Simply as [opengraph.xyz](https://www.opengraph.xyz/) describes:
 
-> Social networks and messaging apps use theOpen Graph meta tags to display your website.
+> Social networks and messaging apps use the Open Graph meta tags to display your website.
 
 - [Open Graph documentation](https://ogp.me/)
 - [Open Graph card validator](https://www.opengraph.xyz/)
 
 ## Getting Started
 
 ```bash
-npm i @dev-warner/post-card -D
+npm i @post-cards/core -D
 ```
 
 ```typescript
-import { PostCard } from '@dev-warner/post-card'
-
-class Template {
-  options = {
-    styles: [
-      `
-       h1 {
-        color: red;
-       }
-      `,
-    ],
-  }
-  render(item) {
-    return `<h1>${item.data.title}</h1>`
-  }
-}
-
-await PostCard.create<{ title: string }>(new Template(), {
-  output: 'media/home-page.png',
-  data: {
-    title: 'My great HomePage',
-  },
-})
-```
-
-## Create
-
-Good for single use creation of a `Card`
-
-> **WARNING: Would suggest against using this method if you're creating a lot of cards as it spins up a headless browser and closes for each call**
-
-```typescript
-await PostCard.create<{ title: string }>(
-  Template,
-  {
-    output: 'media/home-page.png',
-    data: {
-      title: 'My great HomePage',
-    },
-  },
-  {
-    ...options,
-  }
-)
-```
-
-## Batch
-
-Perfect for SSG usage as at build time you can create Open graph images for each Post/Page
-
-```typescript
-await PostCard.batch<{ title: string }>(
-  Template,
+import generate from '@post-cards/core'
+import BasicTemplate from '@post-cards/basic-template'
+
+await generate(
+  new BasicTemplate({
+    text: '#fff',
+    background: '#000',
+    accent: 'orange',
+  }),
   [
     {
       output: 'media/home-page.png',
       data: {
-        title: 'My great HomePage',
+        title: 'My great Home Page',
+      },
+    },
+    {
+      output: 'media/about-page.png',
+      data: {
+        title: 'My great About Page',
       },
     },
   ],
@@ -98,13 +60,26 @@ await PostCard.batch<{ title: string }>(
 )
 ```
 
-## Configuration
-
 ### Template override
 
+Sometimes you might not want the same template for each item but still want to batch them together.
+
+```typescript
+await generate(Template, [
+  { output: 'media/first-image.jpg', data: {} },
+  {
+    output: 'media/second-image.jpg',
+    data: {},
+    options: { templateOveride: FancyTemplate },
+  },
+])
+```
+
 ## Creating Templates
 
-### Basic
+Creating template is an easy process, if you've ever worked with html canvas, creating templates should be a breeze, and we provide some utils to smooth out the process.
+
+For more information: [Templates](https://github.com/dev-warner/post-card-templates)
 
 ## Contributting Guide
 

benchmark/index.js

@@ -2,13 +2,40 @@ import fs from 'fs-extra'
 import path from 'path';
 import faker from 'faker';
 
-import { PostCard } from '../dist/ost-card.es.js';
+import canvasNode from 'canvas';
+import generate from '../dist/post-card.es.js';
 
 const BASE_PATH = './benchmark/tmp'
 
 class Template {
     render(item) {
-        return `<h1>${item.data.name}</h1>`
+        const width = 1200
+        const height = 630
+
+        const canvas = canvasNode.createCanvas(width, height)
+        const context = canvas.getContext('2d')
+
+        context.fillStyle = '#000'
+        context.fillRect(0, 0, width, height)
+
+        context.font = 'bold 70pt Menlo'
+        context.textAlign = 'center'
+        context.textBaseline = 'top'
+        context.fillStyle = '#3574d4'
+
+        const text = item.data.name
+
+        const textWidth = context.measureText(text).width
+
+        context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
+        context.fillStyle = '#fff'
+        context.fillText(text, 600, 170)
+
+        context.fillStyle = '#fff'
+        context.font = 'bold 30pt Menlo'
+        context.fillText('dev-warner.io', 600, 530)
+
+        return canvas.toBuffer()
     }
 }
 
@@ -22,7 +49,9 @@ async function benchmark(name, length) {
 
     console.log(`Starting test: ${name} items: ${length}`)
     console.time(name);
-    await PostCard.batch(new Template(), LOTS_OF_NAMES)
+
+    await generate(new Template(), LOTS_OF_NAMES, { concurrency: 100, verbose: true })
+
     console.timeEnd(name)
 
     fs.removeSync(path.join(process.cwd(), BASE_PATH))
@@ -32,6 +61,10 @@ process.on('exit', () => {
     fs.removeSync(path.join(process.cwd(), BASE_PATH))
 })
 
+process.on('beforeExit', () => {
+    fs.removeSync(path.join(process.cwd(), BASE_PATH))
+})
+
 await benchmark('x-small', 1);
 await benchmark('small', 10);
 await benchmark('medium', 100);

lib/batch.ts

@@ -0,0 +1,65 @@
+import PromisePool from '@supercharge/promise-pool'
+
+import { create } from './create.js'
+
+import type { ICardModel } from './card.js'
+import type { Template } from './template.js'
+
+const DEFAULT_OPTIONS = Object.freeze<BatchOptions>({
+  verbose: false,
+  concurrency: 50,
+})
+
+export type BatchOptions = {
+  /** maximum amount of items created at once */
+  concurrency: number
+  /** logging of information */
+  verbose: boolean
+}
+
+/**
+ * create many images using the specified template
+ *
+ * ```typescript
+ * import generate from '@post-cards/core'
+ *
+ * await generate<{ title: string }>(Template, [
+ *    {
+ *      output: 'media/home-page.png',
+ *      data: {
+ *        title: 'Home Page Fun'
+ *     }
+ *   },
+ *   {
+ *      output: 'media/about-page.png',
+ *     data: {
+ *        title: 'About me'
+ *      }
+ *   }
+ *  ],
+ *  {
+ *    ... options
+ *  }
+ * )
+ * ```
+ */
+export async function batch<DataModel = Record<string, any>>(
+  template: Template,
+  items: Array<ICardModel<DataModel>> = [],
+  options: Partial<BatchOptions> = {}
+) {
+  const config = Object.assign<{}, BatchOptions, Partial<BatchOptions>>(
+    {},
+    DEFAULT_OPTIONS,
+    { ...options }
+  )
+
+  const { results } = await PromisePool.for(items)
+    .withConcurrency(config.concurrency)
+    .handleError((err) => {
+      throw err
+    })
+    .process((item) => create<DataModel>(template, item, config))
+
+  return results
+}

lib/card.ts

@@ -0,0 +1,18 @@
+import type { Template } from './template.js'
+
+export interface CardOptions {}
+
+/**
+ * Item Model for creating cards
+ *
+ * @param output - [Requried]: needed for a location to save your image.
+ * @param data - [Required]: the data needed for your template, check the template you're using for information needed here
+ * @param options - [Optional]: Options for configuring caputre settings,
+ * @param templateOveride - [Optional]: Can be used to swap out a template for an item
+ */
+export interface ICardModel<DataModel = Record<string, any>> {
+  output: string
+  options?: CardOptions
+  templateOveride?: Template
+  data: DataModel
+}