Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucjosin/satori-og
Utility library for generating custom Open Graph images using Satori, build for SSGs like Astro with dynamic ReactNode/JSX renders.
https://github.com/lucjosin/satori-og
open-graph satori satori-og
Last synced: 3 months ago
JSON representation
Utility library for generating custom Open Graph images using Satori, build for SSGs like Astro with dynamic ReactNode/JSX renders.
- Host: GitHub
- URL: https://github.com/lucjosin/satori-og
- Owner: LucJosin
- License: bsd-3-clause
- Created: 2024-08-18T15:18:35.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T17:09:14.000Z (5 months ago)
- Last Synced: 2024-10-09T04:42:58.804Z (4 months ago)
- Topics: open-graph, satori, satori-og
- Language: TypeScript
- Homepage: https://npmjs.com/package/satori-og
- Size: 1.46 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://npmjs.com/package/satori-og)
[](https://lucjosin.github.io/satori-og/)
## Getting Started
- [Introduction](#introduction)
- [Use Case](#use-case)
- [Installation](#installation)
- [Usage](#usage)
- [Init](#init-client)
- [Error handling](#error-handling)
## Introduction
The **satori-og** is a utility library for generating custom **Open Graph** images using [Satori](https://github.com/vercel/satori). It’s perfect for developers wanting to enhance their websites or blogs with automated images.
With **satori-og**, you can create a "client" with default settings (e.g., dimensions, fonts, renders) and generate images easily by calling the `generateImage` function. The "client" requires a render parameter, allowing you to build dynamic images with **ReactNode/JSX**. You can define multiple **renders** and select the appropriate one when generating images.
Use the [Satori Playground](https://satori-playground.vercel.app/) to experiment with designs and integrate them into your project. Check out examples in [example/ts-node](./examples/ts-node/src/).
## Use case
The **satori-og** library is designed to integrate with **SSG** _(Static Site Generation)_ frameworks like [astro.build](https://astro.build). It lets you **pre-define** renders for different page types (e.g., default, blog, project), offering more flexibility than standard **Open Graph** generators. You can customize images by choosing a render and passing any parameters to `generateImage`.
## Installation
- Npm
```
npm install satori-og
```
- Yarn
```
yarn add satori-og
```
## Usage
- [See examples](./examples/)
### Init client
```js
import { createSatoriOg } from '';
// Use 'createSatoriOgInstance' to avoid creating a new SatoriOg on every call
const client = createSatoriOg({ ...options });
console.log('SatoriOG: ', client);
```
### Error handling
#### Then/Catch
```js
const path = await generateImage(
'default', // render name, defined in options
option, // render params/options
'default-render', // output file name (without extension)
)
.then((data) => data)
.catch((err) => console.error(err));
if (result) {
console.log(`Image (${option.render}) generated at '${path}'`);
}
```
#### Try/Catch
```js
try {
const path = await generateImage(
'default', // render name, defined in options
render.options, // render params/options
'default-render', // output file name (without extension)
);
console.log(`Image (${option.render}) generated at '${path}'`);
} catch (err) {
console.error(err);
}
```
## Repository template
This repository uses [typescript-library-boilerplate](https://github.com/VitorLuizC/typescript-library-boilerplate) as template.