← Cloudflare Pages / pages / functions / plugins

vercel/og

@vercel/og Pages Plugin - это middleware, который создает изображения для социальных сетей для веб-страниц. Он также включает API для создания произвольных изображений.

Как следует из названия, это работает на основе @vercel/og ↗. Этот плагин и лежащий в его основе Satori ↗ библиотека создана командой Vercel.

Чтобы установить @vercel/og Pages Plugin, выполните:

npm i @cloudflare/pages-plugin-vercel-og

import React from "react";
import vercelOGPagesPlugin from "@cloudflare/pages-plugin-vercel-og";

interface Props {
	ogTitle: string;
}

export const onRequest = vercelOGPagesPlugin<Props>({
	imagePathSuffix: "/social-image.png",
	component: ({ ogTitle, pathname }) => {
		return <div style={{ display: "flex" }}>{ogTitle}</div>;
	},
	extractors: {
		on: {
			'meta[property="og:title"]': (props) => ({
				element(element) {
					props.ogTitle = element.getAttribute("content");
				},
			}),
		},
	},
	autoInject: {
		openGraph: true,
	},
});

Плагин принимает объект с шестью свойствами:

• imagePathSuffix: суффикс пути, по которому будет доступно сгенерированное изображение. Например, если вы подключите этот Plugin по адресу functions/blog/_middleware.ts, задайте imagePathSuffix как /social-image.png и иметь /blog/hello-world странице изображение будет доступно по адресу /blog/hello-world/social-image.png.

• component: React-компонент, который будет использоваться для рендеринга изображения. По умолчанию этому React-компоненту передаётся pathname свойство, равное pathname исходной веб-страницы (например, /blog/hello-world), но более динамичные свойства можно указать с помощью extractors опцию.

• extractors: необязательный объект с двумя необязательными свойствами: on и onDocument. Этим свойствам можно присвоить функцию, которая принимает объект и возвращает HTMLRewriter элемент-обработчик или обработчик документа соответственно. Параметр объекта можно изменять, чтобы передать компоненту React дополнительные свойства. В примере выше вы используете обработчик элемента для извлечения og:title мета-тег со страницы и передать его в React-компонент как ogTitle свойство. Это основной механизм для создания динамических изображений, использующих значения исходной веб-страницы.

• options: необязательный объект, который передаётся непосредственно в @vercel/og библиотека ↗.

• onError: необязательная функция, которая возвращает Response или Promise, разрешающийся в Response. Эта функция вызывается при обращении к imagePathSuffix и extractors указаны, но исходная веб-страница не является корректным HTML. По умолчанию возвращается 404 ответ.

• autoInject: необязательный объект с необязательным свойством: openGraph. Если установлено значение true, плагин автоматически задаст og:image, og:image:height и og:image:width мета-теги на исходной веб-странице.

Используйте API этого плагина для генерации произвольных изображений, а не только в качестве middleware.

Например, приведённый ниже код создаёт изображение с надписью «Hello, world!», доступное по адресу /greet.

import React from "react";
import { ImageResponse } from "@cloudflare/pages-plugin-vercel-og/api";

export const onRequest: PagesFunction = async () => {
  return new ImageResponse(
    <div style={{ display: "flex" }}>Hello, world!</div>,
    {
      width: 1200,
      height: 630,
    }
  );
};

Это тот же API, который используется базовым @vercel/og библиотека ↗ предлагает.