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.