### Install gatsby-plugin-component-to-image with bun

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Install the plugin using bun. This is a modern package manager for integration.

```bash
bun add gatsby-plugin-component-to-image	# bun
```

--------------------------------

### Install gatsby-plugin-component-to-image with yarn

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Install the plugin using yarn. This is an alternative package manager for integrating the plugin.

```bash
yarn add gatsby-plugin-component-to-image		# yarn
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

After cloning the repository and ensuring prerequisites are met, run this command to install all necessary project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Install gatsby-plugin-component-to-image with pnpm

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Install the plugin using pnpm. This is another package manager option for integration.

```bash
pnpm add gatsby-plugin-component-to-image		# pnpm
```

--------------------------------

### Install gatsby-plugin-component-to-image with npm

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Install the plugin using npm. This is the first step to integrate the plugin into your Gatsby project.

```bash
npm install gatsby-plugin-component-to-image		# npm
```

--------------------------------

### Format Code with Biome.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

Use this command to format the code according to the project's style guide enforced by Biome.js. Ensure your code adheres to project standards before submitting changes.

```bash
pnpm biome format
```

--------------------------------

### Lint Code with Biome.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

Run this command to lint the code using Biome.js. This helps identify potential issues and maintain code quality. It's recommended to install the Biome.js editor plugin for real-time feedback.

```bash
pnpm biome lint
```

--------------------------------

### Add plugin to gatsby-config.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Add the plugin to your Gatsby configuration file. This is the basic setup required to enable the plugin.

```javascript
// gatsby-config.js

module.exports = {
	plugins: [
		'gatsby-plugin-component-to-image',
	],
}
```

--------------------------------

### Run Test Suite and Generate Coverage

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

Execute this command to run all tests in the project and generate a coverage report in the 'coverage/' directory. Ensure all tests pass and coverage does not decrease before submitting a pull request.

```bash
pnpm test
```

--------------------------------

### Build Project with TypeScript

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

Execute this command to compile the TypeScript source code located in the 'src/' directory. The output, including JavaScript files and type definitions, will be placed in the 'lib/' directory.

```bash
pnpm build
```

--------------------------------

### Clean Project Directory

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

Run this command to clean the project directory by removing the 'dist/' directory and any other generated files. This is useful for ensuring a clean build environment.

```bash
pnpm clean
```

--------------------------------

### Watch for File Changes and Recompile

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

Use this command for local development to automatically recompile the project whenever source files are saved. This streamlines the development process by eliminating the need for manual recompilation.

```bash
pnpm watch
```

--------------------------------

### Create Project Tarball for Publishing

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/CONTRIBUTING.md

For maintainers, this command creates a tarball of the project, which is a necessary step before publishing a new release. The tarball can be uploaded as an asset to a GitHub release.

```bash
pnpm pack
```

--------------------------------

### Create Image and Page in gatsby-node.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Use `createImage` to generate an image from a component and `actions.createPage` to create a Gatsby page. Pass image metadata to the page context for use in Open Graph tags.

```js
// gatsby-node.js

import { resolve, join } from 'path';
import { createImage } from 'gatsby-plugin-component-to-image';

export const createPages = async ({ actions }) => {
	// Example blog post details. You could get this data from a CMS or other source
	const blogPostDetails = {
		title: 'Blog Post 1',
		description: 'This is a blog post',
		postDate: '2022-01-01',
	};

	// Generate an Open Graph image for the blog post. Pass the blog post details to the page template so that we can use them in the image
	const imageMetadata = createImage({
		pagePath: join('/', '__generated', 'open-graph', 'blog-post-1'),
		imagePath: join('/', 'images', 'open-graph', `blog-post-1.png`),
		component: resolve('./src/templates/og-image/blog-post.tsx'),
		size: {
			width: 1200,
			height: 630,
		},
		context: blogPostDetails,
	});

	// Create a page for the blog post. Pass the image metadata to the page template so that we can use the image URL in our Open Graph meta tags
	actions.createPage({
		path: join('/', 'blog', 'blog-post-1')
		component: resolve('./src/templates/blog-post.tsx'),
		context: {
			...blogPostDetails,
			imageMetadata: imageMetadata,
		}
	});
};
```

--------------------------------

### Blog Post OG Image Component

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Create a React component that defines the structure and content for your generated image. Use `pageContext` for dynamic data and `imageMetadata` for styling based on image dimensions.

```tsx
import React from 'react';
import { graphql } from 'gatsby';

const BlogPostOGImage = ({ pageContext }) => {
	// Props passed to the createImage function with the `context` option
	const { title, description, postDate } = pageContext;
	// Props automatically added by `gatsby-plugin-component-to-image`
	const { size } = pageContext.imageMetadata;

	// Limit the size of the page to the size of the image
	return (
		<div style={{
			maxWidth: size.width,
			maxHeight: size.height,
			padding: '1rem',
			backgroundColor: 'white',
			textAlign: 'center',
		}}>
			<h1>{title}</h1>
			<p>{description}</p>
			<p>Published on {postDate}</p>
		</div>
	);
};

export default BlogPostOGImage;
```

--------------------------------

### Add plugin with default options to gatsby-config.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Configure the plugin with default options directly in gatsby-config.js. This allows setting default image types and quality.

```javascript
// gatsby-config.js

module.exports = {
	plugins: [
		{
				resolve: 'gatsby-plugin-component-to-image',
				options: {
					type: 'jpeg',
					quality: 95,
				},
			},
	],
}
```

--------------------------------

### Configure Plugin Options in gatsby-config.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Set default plugin options such as image type, quality, and context data globally within your Gatsby configuration file.

```js
// gatsby-config.js

module.exports = {
	plugins: [
		{
			resolve: 'gatsby-plugin-component-to-image',
			options: {
				type: 'webp',
				quality: 100,
				context: {
					siteName: 'My Example Site',
				},
				verbose: true,
			},
		},
	],
}
```

--------------------------------

### Set Default Options in gatsby-node.js

Source: https://github.com/caret-collective/gatsby-plugin-component-to-image/blob/main/README.md

Alternatively, set default options for the plugin programmatically within your `gatsby-node.js` file using the `setDefaultOptions` function.

```js
// gatsby-node.js

import { setDefaultOptions } from 'gatsby-plugin-component-to-image';

setDefaultOptions({
	type: 'webp',
	quality: 100,
	context: {
		siteName: 'My Example Site',
	},
	verbose: true,
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.