social-image-gen

We got inspired by the social image from dev.to so we decided to create the own one for our blog 12bit.vn. However, you can use it to generate images for your site as well.

Installation

npm i -g social-image-gen
# or
yarn global add social-image-gen

Usage

social-image-gen [args]

Available arguments

Argument	Required	Default	Description
--path	optional		The path to the markdown file. Eg: --path=./posts/post-slug/index.md
--output	optional		The path that stores the generated image. Eg: --output=./public/post-slug
--width	optional	800	The image width.
--height	optional	400	The image height.
--name	optional	"thumbnail"	The name of image.
--type	optional	png	The type of image. It's must be 'png' or 'jpeg'
--title	optional	"untitled"	The title in the image. Eg: --title="Hello World"
--date	optional		The date in the image. Eg: --date="20 Mar 2019"
--author	optional	"unauthored"	The author in the image. Eg: --author="12bit.vn"
--template	optional	templates/default.html	The mockup template is used to generate image. You can check ./templates/default.html to see how to create a template.

Examples

1. Generate a 1200x630px social image from posts/hello-world/index.md

Suppose that index.md has the front matter looks like this:

---
title: Lấy dữ liệu web với Node.js và Puppeteer
author: Thien Nguyen
date: "2019-03-04T10:33:00+07:00"
---

social-image-gen --path=./posts/hello-world/index.md --output=./public/hello-world/ --width=1200 --height=630

2. Generate a 800x400px social image without markdown file.

social-image-gen --output=./public/hello-world/ --title="Hello World" --date="20 Mar, 2019" --author="12bit.vn"