Satori-astro NPM

`satori-astro`

This is an helper function for Astro to help you generate OpenGraph images using satori and sharp.

Usage

Installation

Install the required dependencies:

pnpm add satori-astro sharp

npm install satori-astro sharp

yarn add satori-astro sharp

`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).