Astro utilities to help you generate OpenGraph images using satori.
npm install satori-astrosatori-astroThis is an helper function for Astro to help you generate OpenGraph images using satori and sharp.
Install the required dependencies:
``bash`
pnpm add satori-astro sharp
`bash`
npm install satori-astro sharp
`bash`
yarn add satori-astro sharp
satoriAstroOG can be used in 3 ways, depending on the level of abstraction you need. We recommend going with toResponse by default. For example
`ts
// 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
,
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 packageInstall dependencies using pnpm:
`bash
pnpm i --frozen-lockfile
`Start the playground:
`bash
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.MIT Licensed. Made with ❤️ by Florian Lefebvre.