Vitepress-plugin-og-image NPM

vitepress-plugin-og-image

Overview

A VitePress plugin to generate OGP images.

Installation

You can install this library using npm:

npm install vitepress-plugin-og-image

Usage

Import into VitePress config.ts file for use.
Set the path of the OG image in the metadata with the transformHead hook
Generate OG image entities with the buildEnd hook.

Params

key	type	required	description
`destDir`	`string`	✔	OG image placement directory specified by relative path from outDir
`author`	`object`	❌	Used to include the author's name or image in the OG image
`author.name`	`string`	❌	Specify the author's name to be displayed
`author.imageURL`	`string`	❌	Specify the author's avatar image url to be displayed

`config.ts`

const ogImagePlugin = new OgImagePlugin({
  destDir: "/og",
  author: { name: "Author Name", imageURL: "{Author Avatar URL}" },
});

// https://vitepress.dev/reference/site-config
export default defineConfig({
  transformHead(context) {
    return [
      ["meta", { property: "og:title", content: context.pageData.title }],
      ...ogImagePlugin.transformHead(context),
    ];
  },
  buildEnd(siteConfig) {
    ogImagePlugin.buildEnd(siteConfig);
  },
});

Link

VitePress

License

This project is licensed under the MIT License - see the LICENSE file for details.

vitepress vitepress-plugin markdown open-graph-protocol opengraph open-graph ogp

satori sharp

0.1.1

1 year ago

0.1.0

1 year ago