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

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.