feat(plugin): add plugin-og-image for dynamic OG image generation

[Copilot]

Summary

Implements @rspress/plugin-og-image to automatically generate Open Graph images (1200x630 PNG) for each page during build. Uses Satori for SVG rendering from JSX templates and Sharp for PNG conversion.

Related Issue

Closes #[issue_number]

Ref: rolldown/rolldown#7135

Implementation

Core Architecture

• extendPageData hook: Collects page metadata (title, description) during build
• config hook: Injects og:image meta tags into SSR HTML via config.head
• afterBuild hook: Generates PNG images in /og/{route-path}.png structure

Key Dependencies

• [email protected]: React-like JSX → SVG rendering
• [email protected]: SVG → PNG conversion

Customization

• Template function for custom layouts
• Filter function for selective generation
• Per-page overrides via frontmatter (ogBackgroundColor, ogTextColor)

Usage

import { pluginOgImage } from '@rspress/plugin-og-image';

export default defineConfig({
  plugins: [
    pluginOgImage({
      siteUrl: 'https://v2.rspress.rs',
      ogImage: {
        width: 1200,      // optional
        height: 630,      // optional
        filter: (page) => !page.routePath.startsWith('/api/'),  // optional
      }
    }),
  ],
});

Result

• Page: https://v2.rspress.rs/guide/start/getting-started
• Image: https://v2.rspress.rs/og/guide/start/getting-started.png
• Meta tag injected in SSR: <meta property="og:image" content="..." />

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature][Plugin]: Dynamic og-image plugin-og-image</issue_title>
<issue_description>### What problem does this feature solve?

Solutions for dynamically generating OG images

rolldown/rolldown#7135

The general idea is to use an SVG as a placeholder, then populate each page's information into it and convert it to a PNG.

What does the proposed API look like?

A very straightforward way

pluginOgImage({
    siteUrl: 'https://v2.rspress.rs',
})

• url: https://v2.rspress.rs/guide/start/getting-started
• og-image url: https://v2.rspress.rs/og/guide/start/getting-started.png

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Feature][Plugin]: Dynamic og-image plugin-og-image #2794

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[netlify]

✅ Deploy Preview for rspress-v2 ready!

Name	Link
🔨 Latest commit	b457cf8
🔍 Latest deploy log	https://app.netlify.com/projects/rspress-v2/deploys/691f024b55371900086f8fd1
😎 Deploy Preview	https://deploy-preview-2795--rspress-v2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[github-actions]

Rsdoctor Bundle Diff Analysis

📁 web

Path: website/doc_build/web/rsdoctor-data.json

Metric	Current	Baseline	Change
📊 Total Size	14.3 MB	14.3 MB	0 B (0.0%)
📄 JavaScript	13.8 MB	13.8 MB	0 B (0.0%)
🎨 CSS	109.8 KB	109.8 KB	0 B (0.0%)
🌐 HTML	0 B	0 B	N/A
📁 Other Assets	497.3 KB	497.3 KB	0 B (0.0%)

📦 Download Diff Report: web Bundle Diff

Generated by Rsdoctor GitHub Action