Skip to content

Latest commit

 

History

History
67 lines (48 loc) · 2.23 KB

README.md

File metadata and controls

67 lines (48 loc) · 2.23 KB

vitepress-plugin-og-image

npm version build codecov License

Overview

A VitePress plugin to generate OGP images.

Sample

Sample

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

License

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