satori-astro

This is an Astro integration and utilities to help you generate OpenGraph images using satori.

Usage

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add satori-astro

npm astro add satori-astro

yarn astro add satori-astro

Or install it manually:

1. Install the required dependencies

pnpm add satori-astro

npm install satori-astro

yarn add satori-astro

2. Add the integration to your astro config

+import satoriAstro from "satori-astro";

export default defineConfig({
  integrations: [
+    satoriAstro(),
  ],
});

The integration itself is not configurable.

Utilities

satori-astro exports a few utilities built on top of satori and resvg.

satoriAstroOG

satoriAstroOG can be used in 3 ways, depending on the level of abstraction you need. We recommend going with toResponse by default. For example

// src/pages/og.png.ts
import type { APIRoute } from "astro";
import { satoriAstroOG } from "satori-astro";
import { html } from "satori-html";

export const GET: APIRoute = async () => {
	const fontFile = await fetch(
		"https://og-playground.vercel.app/inter-latin-ext-700-normal.woff",
	);
	const fontData: ArrayBuffer = await fontFile.arrayBuffer();

	return await satoriAstroOG({
		template: html`<div style="display: flex; justify-items: center; align-items: center; background-color: red; font-family: Inter; height: 100%;">
                            <h1 style="color: blue;">Test toResponse</h1>
                        </div>`,
		width: 1920,
		height: 1080,
	}).toResponse({
		satori: {
			fonts: [
				{
					name: "Inter Latin",
					data: fontData,
					style: "normal",
				},
			],
		},
	});
};

• toSvg: returns a svg as string. It requires font data to be passed in. Any other satori option is optional
• toImage: returns an image as Buffer. Built on top of toSvg, it requires ìts options as the satori property. It also allows passing custom resvg options as the resvg property
• toResponse: returns a Response. Built on top of toImage, it accepts the same options as well as response, that can be used to aspects of the response (like headers).

Contributing

This package is structured as a monorepo:

• playground contains code for testing the package
• package contains the actual package

Install dependencies using pnpm:

pnpm i --frozen-lockfile

Start the playground:

pnpm playground:dev

You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.

Licensing

MIT Licensed. Made with ❤️ by Florian Lefebvre.