feat: auto gen og

[naitokosuke]

Implement automatic og-image generation from first slide

Hi Slidev maintainers.

Thank you so much for your amazing work on Slidev.
I absolutely love this project!

This is my first feature implementation PR for Slidev, so please let me know if there's anything that needs improvement or if I'm causing any trouble.

I'm happy to make any necessary changes.

Motivation

Currently, Slidev users need to manually create og-images for social media sharing.
The existing workflow requires:

• Export first slide as PNG

  • Run slidev export --format png --range 1 to generate first slide image

• Rename and move file

  • Rename 01.png to og-image.png and place in appropriate location

• Host image somewhere

  • Upload to CDN, GitHub, or image hosting service

• Configure URL in frontmatter

  seoMeta:
    ogImage: https://example.com/og-image.png

Usage

---
# slides.md frontmatter
seoMeta:
  ogImage: auto # Automatically generates og-image from first slide
---

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	1ab0c03
🔍 Latest deploy log	https://app.netlify.com/projects/slidev/deploys/68859dfaf7cd6600086c5cea
😎 Deploy Preview	https://deploy-preview-2226--slidev.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.

[pkg-pr-new]

Open in StackBlitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2226

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2226

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2226

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2226

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2226

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2226

commit: 1ab0c03

[antfu]

Thanks! That's a great idea!

I think we could improve it even more:

• We should by default support using og-image.png on the project root
• With this auto-gen feature, we generate ./og-image.png on the project if it doesn't exist, so users could also commit it to the source control or make modifications to avoid repetitive exporting on CI