OGPanic is a web service for generating beautiful and eye-catching og-images. As OGPanic uses headless chrome to render the images, there's basically no limits for what you can put inside the image. You can use web fonts, add beatiful gradients, and other fancy visuals effects that can be implemented by modern CSS and Javascript.

Register on https://ogpanic.com to get the API endpoint and API token.

Clone this repo and create a .env.development, or copy the example.env.example file to create one. Then fill in the API endpoint and token from OGPanic's dashboard.

OGPANIC_ENDPOINT=https://ogaas-app-1.ogpanic.com
OGPANIC_TOKEN=AabE@G-13

Run the following command to start developing your own template.

$ npm install
# npx ogaas develop --help, for more infomation
$ npm run develop

The template editor can be found at http://localhost:3000/editor to preview your og-image.

Templates are under ./src with each of them in different directories. The directory name will be used as the template's name for rendering the og-image.

e.g. The name of template under ./src/blog will be blog, and image generated by this template can be accessed via https://<endpoint>/og/blog/<id>.<jpeg|png>.

Under ./src/<template_name>, there will be 2 mandatory files: index.html, data.json. And you can add image and stylesheets and other resources if required.

OGPanic allow you the specify only the id (slug) to access the generated og-image. Only who have uploaded the meta data of that id can determine what data to be shown in the image. data.json is the file to hold your mockup meta data when designing the template.

id will be used as the slug for the image and in data, you can put whatever you need for generating the final image.

{"id": "first-blog", "data": {"name": "A great blog"}}

In a production environment, it is recommended to upload the meta data when the page is created or updated. You can use the API or the command line tool for uploading data to OGPanic.

This is the template html that is used to generate your og-image. With the example meta data above and the following template.

<h1>{{name}}</h1>

You will get the following. Use CSS to adjust the typo and position to make it look great!

<h1>A great blog</h1>

When developing the templates with npm run develop, any changes to mockup data in data.json will automatically uploaded.

Use the following code to upload the data in production environment. You can either define OGPANIC_ENDPOINT, OGPANIC_TOKEN as environment variables or put then in the .env file.

import { uploadMeta } from 'ogaas-cli'

await uploadMeta([
    {id: "my-first-blog", data: {"name": "A awesome blog title"}}
])

You can also using the following command to upload.

# npx ogaas upload --help, for more infomation
$ npx ogaas upload <data.json>

You can deploy the templates by hitting DEPLOY TEMPLATES button on editor UI or by command line.

Build the templates.

# npx ogaas build --help, for more infomation
$ npm run build

Upload the built templates. Run npm run build before using this command.

note: Make sure you have the .env.production and correct API endpoint/token setup.

# npx ogaas deploy --help, for more infomation
$ npm run deploy