### Install astro-satori

Source: https://github.com/cijiugechu/astro-satori/blob/main/packages/core/README.md

Instructions for adding the astro-satori integration to your Astro project using NPM, Yarn, or PNPM.

```shell
# Using NPM
npx astro add astro-satori
# Using Yarn
yarn astro add astro-satori
# Using PNPM
pnpx astro add astro-satori
```

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

### Install astro-satori

Source: https://github.com/cijiugechu/astro-satori/blob/main/README.md

Instructions for adding the astro-satori integration to your Astro project using NPM, Yarn, or PNPM.

```shell
npx astro add astro-satori
yarn astro add astro-satori
pnpx astro add astro-satori
```

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

### React Component in Astro

Source: https://github.com/cijiugechu/astro-satori/blob/main/packages/playground/src/pages/index.md

An example of a React component using useState and useEffect hooks, intended to be used within an Astro project. It imports the 'next/router' module.

```jsx
import Router from 'next/router'

function MyComponent() {
	const [show, setShow] = useState(false)

	useEffect(() => {
    console.log(2)
	}, [])

	return <>...</>
```

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

### Basic Configuration

Source: https://github.com/cijiugechu/astro-satori/blob/main/packages/core/README.md

Demonstrates the basic configuration of the astro-satori integration in an Astro project's configuration file.

```javascript
import {defineConfig} from "astro/config"
import satori from "astro-satori"
export default defineConfig({
  integrations: [
    satori({})
  ],
})
```

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

### Basic astro-satori Configuration

Source: https://github.com/cijiugechu/astro-satori/blob/main/README.md

A basic configuration for the astro-satori integration in an Astro project's configuration file (astro.config.mjs).

```javascript
import {defineConfig} from "astro/config"
import satori from "astro-satori"
export default defineConfig({
  integrations: [
    satori({})
  ],
})
```

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

### Custom Satori Options Factory

Source: https://github.com/cijiugechu/astro-satori/blob/main/packages/core/README.md

Shows how to provide a custom `satoriOptionsFactory` function to dynamically generate satori options, including fetching and embedding custom fonts.

```javascript
import {defineConfig} from "astro/config"
import satori from "astro-satori"
export default defineConfig({
  integrations: [
    satori({
      satoriOptionsFactory: async () => {
        const fontFileRegular = await fetch(
          'https://www.1001fonts.com/download/font/ibm-plex-mono.regular.ttf'
        )
        const fontRegular: ArrayBuffer = await fontFileRegular.arrayBuffer()

        const fontFileBold = await fetch(
          'https://www.1001fonts.com/download/font/ibm-plex-mono.bold.ttf'
        )
        const fontBold: ArrayBuffer = await fontFileBold.arrayBuffer()

        const options = {
          width: 1200,
          height: 630,
          embedFont: true,
          fonts: [
            {
              name: 'IBM Plex Mono',
              data: fontRegular,
              weight: 400,
              style: 'normal',
            },
            {
              name: 'IBM Plex Mono',
              data: fontBold,
              weight: 600,
              style: 'normal',
            },
          ],
        }

        return options
      }
    })
  ],
})
```

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

### Custom satori Element Generation

Source: https://github.com/cijiugechu/astro-satori/blob/main/README.md

Configures astro-satori to use a custom satori element factory. This function takes title, author, and description as props and returns a JSX-like structure for the open graph image.

```javascript
import {defineConfig} from "astro/config"
import satori from "astro-satori"
export default defineConfig({
  integrations: [
    satori({
      satoriElement: ({ title, author, description }) => {
        return {
          type: 'div',
          props: {
            children: [
              title,
              author,
              description
            ]
          }
        }
      }
    })
  ],
})
```

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

### Custom Satori Element

Source: https://github.com/cijiugechu/astro-satori/blob/main/packages/core/README.md

Illustrates how to define a custom `satoriElement` function to control the structure and content of the generated satori element.

```javascript
import {defineConfig} from "astro/config"
import satori from "astro-satori"
export default defineConfig({
  integrations: [
    satori({
      satoriElement: ({ title, author, description }) => {
        return {
          type: 'div',
          props: {
            children: [
              title,
              author,
              description
            ]
          }
        }
      }
    })
  ],
})
```

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

### Custom satori Options Factory

Source: https://github.com/cijiugechu/astro-satori/blob/main/README.md

Configures astro-satori with a custom satori options factory to load and use custom fonts (IBM Plex Mono) for generating open graph images. This includes setting image dimensions and embedding font data.

```javascript
import {defineConfig} from "astro/config"
import satori from "astro-satori"
export default defineConfig({
  integrations: [
    satori({
      satoriOptionsFactory: async () => {
        const fontFileRegular = await fetch(
          'https://www.1001fonts.com/download/font/ibm-plex-mono.regular.ttf'
        )
        const fontRegular: ArrayBuffer = await fontFileRegular.arrayBuffer()

        const fontFileBold = await fetch(
          'https://www.1001fonts.com/download/font/ibm-plex-mono.bold.ttf'
        )
        const fontBold: ArrayBuffer = await fontFileBold.arrayBuffer()

        const options = {
          width: 1200,
          height: 630,
          embedFont: true,
          fonts: [
            {
              name: 'IBM Plex Mono',
              data: fontRegular,
              weight: 400,
              style: 'normal',
            },
            {
              name: 'IBM Plex Mono',
              data: fontBold,
              weight: 600,
              style: 'normal',
            },
          ],
        }

        return options
      }
    })
  ],
})
```

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