Skip to content

feat: auto gen og#2226

Merged
antfu merged 11 commits into
slidevjs:mainfrom
naitokosuke:feat/auto-gen-og
Jul 27, 2025
Merged

feat: auto gen og#2226
antfu merged 11 commits into
slidevjs:mainfrom
naitokosuke:feat/auto-gen-og

Conversation

@naitokosuke

@naitokosuke naitokosuke commented Jul 13, 2025

Copy link
Copy Markdown
Contributor

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

netlify Bot commented Jul 13, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ 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...

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

pkg-pr-new Bot commented Jul 13, 2025 •
edited
Loading

Copy link
Copy Markdown

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

@naitokosuke naitokosuke changed the title Feat/auto gen og feat: auto gen og Jul 13, 2025
@naitokosuke
naitokosuke marked this pull request as draft July 13, 2025 03:35
@naitokosuke
naitokosuke marked this pull request as ready for review July 14, 2025 14:25
@antfu

antfu commented Jul 15, 2025

Copy link
Copy Markdown
Member

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

@antfu
antfu merged commit 3a34a18 into slidevjs:main Jul 27, 2025
7 checks passed
@pinage404 pinage404 mentioned this pull request Sep 4, 2025
Closed
@mozumasu mozumasu mentioned this pull request Sep 10, 2025
Merged
@gdorsi gdorsi mentioned this pull request Sep 16, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@naitokosuke @antfu @daguanren21