@stedefast/plugin-og-images

Build-time OG image generation plugin for Stedefast — generates og:image PNG files for every page at build time using a React template rendered via Satori.

Installation

pnpm add @stedefast/plugin-og-images

Usage

// theme/og-template.tsx
import type { OgTemplateProps } from "@stedefast/plugin-og-images";

export default function OgTemplate({ title, siteTitle }: OgTemplateProps) {
  return (
    <div style={{ display: "flex", width: "100%", height: "100%", background: "#6366f1", padding: 80 }}>
      <h1 style={{ color: "white", fontSize: 56 }}>{title}</h1>
    </div>
  );
}

// stedefast.config.ts
import { defineConfig } from "@stedefast/core";
import { OgImagesPlugin } from "@stedefast/plugin-og-images";
import OgTemplate from "./theme/og-template.tsx";

export default defineConfig({
  plugins: [OgImagesPlugin({ template: OgTemplate })],
});

Documentation

Full docs at stedefast.dev/docs/plugins/og-images.

License

MIT