Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kentaro-m/catchy-image
:art: A Node.js module for dynamically generating social cards (open graph images).
https://github.com/kentaro-m/catchy-image
my-portfolio nodejs open-graph open-graph-protocol twitter-cards
Last synced: 2 months ago
JSON representation
:art: A Node.js module for dynamically generating social cards (open graph images).
- Host: GitHub
- URL: https://github.com/kentaro-m/catchy-image
- Owner: kentaro-m
- License: mit
- Created: 2020-01-11T12:54:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-13T01:40:09.000Z (almost 3 years ago)
- Last Synced: 2024-10-10T21:19:12.721Z (3 months ago)
- Topics: my-portfolio, nodejs, open-graph, open-graph-protocol, twitter-cards
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/catchy-image
- Size: 4.81 MB
- Stars: 47
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# catchy-image
[](https://github.com/kentaro-m/catchy-image/blob/master/LICENSE)
A Node.js module for dynamically generating Open Graph images.
## :art: Example
It can create an image like this by using the module.
## :arrow_forward: Usage
**Executing this module requires Node v12.**
Install a package using the npm CLI.
```bash
$ npm install --save catchy-image
```
Write codes for importing a module, setting up options for generating an image, and executing a module.
```js
const catchy = require('catchy-image')
async function run() {
const options = {
output: {
directory: '',
fileName: 'thumbnail.png',
},
image: {
width: 1200,
height: 630,
backgroundColor: '#222639',
// backgroundImage: require.resolve('./images/background.jpg'),
},
style: {
title: {
fontFamily: 'Noto Sans CJK JP',
fontColor: '#bb99ff',
fontWeight: 'bold',
fontSize: 64,
paddingTop: 100,
paddingBottom: 200,
paddingLeft: 150,
paddingRight: 150,
},
author: {
fontFamily: 'Noto Sans CJK JP',
fontColor: '#f0f5fa',
fontWeight: '400',
fontSize: 42,
},
},
meta: {
title: 'How to dynamically create an Open Graph image.',
author: 'Kentaro Matsushita',
},
fontFile: [
{
path: require.resolve('./fonts/NotoSansCJKjp-Bold.otf'),
family: 'Noto Sans CJK JP',
weight: 'bold',
},
{
path: require.resolve('./fonts/NotoSansCJKjp-Regular.otf'),
family: 'Noto Sans CJK JP',
weight: '400',
},
],
iconFile: require.resolve('./images/avatar.jpeg'),
timeout: 10000,
}
const output = await catchy.generate(options)
console.log(`Successfully generated: ${output}`)
} catch (error) {
console.error(error)
}
}
run()
```
## :gear: Options
### Output
| name | required | description |
|-------------------------|----------|-------------------------------------------------------------|
| `directory` | `true` | directory path to output an image. |
| `fileName` | `true` | file name to output an image. |
### Image
| name | required | description |
|-------------------------|----------|-------------------------------------------------------------|
| `width` | `true` | width of a generated image. |
| `height` | `true` | height of a generated image. |
| `backgroundColor` | `true` | hex value for background color. |
| `backgroundImage` | | image path using as the background (specify relative path). |
### Style
#### Title
| name | required | description |
|---------------|----------|-----------------------------------------------------------|
| `fontFamily` | `true` | font family for title text |
| `fontColor` | `true` | hex value for text color. |
| `fontWeight` | `true` | font weight for title text. |
| `fontSize` | `true` | font size for title text. |
| `paddingTop` | `true` | height of the padding area on the top of a title text. |
| `paddingBottom` | `true` | height of the padding area on the bottom of a title text. |
| `paddingLeft` | `true` | width of the padding area on the left of a title text. |
| `paddingRight` | `true` | width of the padding area on the right of a title text. |
#### Author
| name | required | description |
|------------|----------|------------------------------|
| `fontFamily` | `true` | font family for author text |
| `fontColor` | `true` | hex value for text color. |
| `fontWeight` | `true` | font weight for author text. |
| `fontSize` | `true` | font size for author text. |
### Meta
| name | required | description |
|--------|----------|----------------------------------------|
| `title` | `true` | title text to be placed on the image. |
| `author` | `true` | author text to be placed on the image. |
### Font File
| name | required | description |
|--------|----------|----------------------------------------------------------|
| `path` | `true` | file path of font data (specify relative path). |
| `family` | `true` | font family name to register custom font to this module. |
| `weight` | `true` | font weight to register custom font to this module. |
### Icon File
| name | required | description |
|----------|----------|----------------------------------------------|
| `iconFile` | `true` | file path of icon to be placed on the image. |
### Timeout
| name | required | description |
|---------|----------|----------------------------------------------------------------|
| `timeout` | `true` | the number of milliseconds to wait until complete the process. |
## :construction_worker: Development
```bash
$ npm install
# Execute an example script (src/example.js)
$ npm run build && npm run dev
```
## Tests
```
$ docker build -t snapshot-test:0.1.1 .
$ docker run -v `pwd`/test:/usr/src/app/test snapshot-test:0.1.1
```
## :memo: Licence
MIT
## :heart: Acknowledgments
Inspired by [@shuhei](https://github.com/shuhei)'s article.
[Generating Twitter Card Images from Blog Post Titles - Shuhei Kagawa](https://shuheikagawa.com/blog/2019/10/13/generating-twitter-card-images/)