{title}
{tags.map((tag, i) => (
{tag}
))}
okaryo
Gatsby plugin that can dynamically generate OG images using JSX syntax for site and markdowns. This plugin uses vercel/satori internally.
 ### Installation ```sh npm install gatsby-plugin-satorare ``` ### Usage #### 1. Setup gatsby-config ```js // In your gatsby-config.js plugins: [ { resolve: `gatsby-plugin-satorare`, options: { path: `${__dirname}/src/components/OgImage.tsx`, width: 1200, height: 630, fonts: [ { name: `FavoriteFont`, path: `${__dirname}/src/assets/favorite_font.otf`, }, ], graphemeImages: { '🤯': 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f92f.svg', }, target_nodes: ['Site', 'MarkdownRemark'] } }, ] ``` |option|type|description|default| |:-----|:---|:----------|:------| |`path`|string|Path to JSX/TSX file fot OG image. This option is **required**.|| |`width`|number|Width of og image. Default value|1200| |`height`|number|Height of og image.|630| |`fonts`|{name: string, path: string, weight?: number, style?: string, lang?: string}[]|Path to font used in OG image.|[`Noto Sans Japanese(Regular400)`](https://fonts.google.com/noto/specimen/Noto+Sans+JP)| |`graphemeImages`|{[key: string]: string}|Image sources for specific graphemes. See details [here](https://github.com/vercel/satori#emojis).|{}| |`target_nodes`|string[]|Node type for the source of OG image.|['Site', 'MarkdownRemark']| #### 2. Create OG file with JSX/TSX The following frontmatter is assumed. ```md --- title: "Hello World" tags: ["Gatsby", "og:image"] --- ``` Export a default function that returns an ReactElement as follows. You can get node of the type specified in `target_nodes` in config options from argument. [vercel's Playground](https://og-playground.vercel.app) is useful to create OG images while previewing the generated image. ```tsx // ./src/components/OgImage.tsx import { Node } from 'gatsby' type Frontmatter = { title: string tags: string[] } export default function(node: Node) { if (node.internal.type === 'MarkdownRemark') { const frontmatter = node.frontmatter as Frontmatter const title = frontmatter.title const tags = frontmatter.tags return (
okaryo