@vercel/og 0.5.19 → 0.6.0

package/dist/index.node.types.d.ts

@@ -0,0 +1,2 @@
+import { ImageResponse } from 'src/index.node';
+export declare type NodeImageResponse = typeof ImageResponse;

package/dist/types.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="node" />
 import type { SatoriOptions } from 'satori';
 import type { EmojiType } from './emoji';
 import type { OutgoingHttpHeader } from 'http';
@@ -46,6 +48,57 @@ export declare type ImageResponseNodeOptions = ImageOptions & {
     headers?: OutgoingHttpHeader[];
 };
 export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
+export interface FigmaImageResponseProps {
+    /**
+     * Link to the Figma template frame.
+     *
+     * You can get the URL in Figma by right-clicking a frame and selecting "Copy link".
+     * @example https://www.figma.com/file/QjGNQixWnhu300e1Xzdl2y/OG-Images?type=design&node-id=11356-2443&mode=design&t=yLROd7ro8mP1PxMY-4
+     */
+    url: string;
+    /**
+     * A mapping between Figma layer name and the value you want to replace it with.
+     *
+     * @example Sets Figma text layer named "Title" to "How to create OG Images"
+     * ```js
+     *  { "Title": "How to create OG Images" }
+     * ```
+     *
+     * @example Sets multiple Figma text layers and provides custom styles
+     * ```js
+     * {
+     *   "Title": { value: "How to create OG Images", props: { color: "red", centerHorizontally: true } },
+     *   "Description": { value: "A short story", props: { centerHorizontally: true } },
+     * }
+     * ```
+     *
+     * `centerHorizontally` centers text layer horizontally.
+     */
+    template: Record<string, FigmaComplexTemplate | string>;
+    /**
+     * The font names must match the font names in Figma.
+     */
+    fonts?: FontOptions[];
+    /**
+     * The same as {@link ImageResponseOptions} except `width` and `height`. `width` and `height` are automatically set from the Figma frame's size.
+     */
+    imageResponseOptions?: Omit<ImageResponseOptions, 'width' | 'height'>;
+}
+export interface FigmaComplexTemplate {
+    value: string;
+    props?: {
+        centerHorizontally?: boolean;
+    } & React.CSSProperties;
+}
+declare type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+declare type Style = 'normal' | 'italic';
+interface FontOptions {
+    data: Buffer | ArrayBuffer;
+    name: string;
+    weight?: Weight;
+    style?: Style;
+    lang?: string;
+}
 declare module 'react' {
     interface HTMLAttributes<T> {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/og",
-  "version": "0.5.19",
+  "version": "0.6.0",
   "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser",
   "type": "module",
   "main": "./dist/index.node.js",
@@ -58,7 +58,7 @@
   ],
   "license": "MPL-2.0",
   "dependencies": {
-    "@resvg/resvg-wasm": "2.5.0",
+    "@resvg/resvg-wasm": "2.6.0",
     "satori": "0.10.9",
     "yoga-wasm-web": "0.3.3"
   },