@epycbyte/og Reference

This reference provides detailed information on how the @epycbyte/og package works with Epycbyte. Below is a structured overview of its features, usage, and configuration options.

Table of Contents

• Choosing a Runtime
• Functions API Reference
• Configuring Functions
• Streaming Functions
• OG Image Generation
  • @epycbyte/og Usage
  • WebAssembly Support
• Logs and Limitations
• Usage & Pricing
• Edge Middleware
• Image Optimization
• Incremental Static Regeneration (ISR)
• Data Cache
• Cron Jobs
• Infrastructure
• Acknowledgments

Choosing a Runtime

The @epycbyte/og package is optimized for the Edge runtime. Using the default Node.js runtime will not work. Ensure your project is set up to use the Edge runtime for optimal performance.

Functions API Reference

The package provides an ImageResponse constructor that allows you to generate images from React components. Here’s a breakdown of its parameters:

Main Parameters

• element: ReactElement - The React component used to generate the image.
• options: An object containing additional customization options.

Options Parameters

• width: Number (Default: 1200) - Image width in pixels.
• height: Number (Default: 630) - Image height in pixels.
• emoji: String (Default: 'twemoji') - Emoji set to use ('blobmoji', 'noto', 'openmoji').
• debug: Boolean (Default: false) - Debug mode flag.
• status: Number (Default: 200) - HTTP status code.
• statusText: String - HTTP status text.
• headers: Record<string, string> - Custom HTTP headers.

Fonts Parameters

• name: String - Font name.
• data: ArrayBuffer - Font data.
• weight: Number - Font weight.
• style: 'normal' | 'italic' - Font style.

Supported HTML and CSS Features

The package supports a range of HTML and CSS features, as documented in Satori's reference. By default, it includes the Noto Sans font. For other fonts, you can use the fonts option.

Acknowledgments

• Twemoji: Used for emoji rendering.
• Google Fonts: Integrated for additional font support.
• Noto Sans: Default font included in the package.
• Resvg and Resvg.js: Supported for vector graphics.

This article provides a comprehensive overview of the @epycbyte/og package. For detailed implementation guides, refer to the official documentation or explore the code examples provided in the reference.