feat: auto gen og image (#2226)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Anthony Fu <github@antfu.me>

Author: 3 people

.github/workflows/smoke.yml

@@ -107,6 +107,10 @@ jobs:
         working-directory: ../temp/slidev-project
         if: ${{ matrix.pm != 'yarn' }}
 
+      - name: Install Playwright browsers
+        run: pnpx playwright install chromium
+        working-directory: ../temp/slidev-project
+
       - name: Install project (yarn)
         run: yarn add /tmp/slidev-pkgs/cli.tgz playwright-chromium
         working-directory: ../temp/slidev-project

demo/starter/slides.md

@@ -21,8 +21,11 @@ transition: slide-left
 # enable MDC Syntax: https://sli.dev/features/mdc
 mdc: true
 # open graph
-# seoMeta:
-#  ogImage: https://cover.sli.dev
+seoMeta:
+  # By default, Slidev will use ./og-image.png if it exists,
+  # or generate one from the first slide if not found.
+  ogImage: auto
+  # ogImage: https://cover.sli.dev
 ---
 
 # Welcome to Slidev

docs/features/og-image.md

@@ -0,0 +1,41 @@
+---
+relates:
+  - features/seo-meta
+tags: ['SEO', head]
+description: |
+  Set the Open Graph image for your slides.
+---
+
+# Open Graph Image
+
+Slidev allows you to set the Open Graph image via the `seoMeta.ogImage` option in the headmatter:
+
+```md
+---
+seoMeta:
+  ogImage: https://url.to.your.image.png
+---
+
+# Your slides here
+```
+
+Learn more about [SEO Meta Tags](./seo-meta).
+
+## Local Image
+
+If you have `./og-image.png` in your project root, Slidev will grab it as the Open Graph image automatically without any configuration.
+
+## Auto-generate
+
+Since v52.1.0, Slidev supports auto-generating the Open Graph image from the first slide.
+
+You can set `seoMeta.ogImage` to `auto` to enable this feature.
+
+```md
+---
+seoMeta:
+  ogImage: auto
+---
+```
+
+It will use [playwright](https://playwright.dev/) to capture the first slide and save it as `./og-image.png` (same as `slidev export`). You may also commit the generated image to your repository to avoid the auto-generation. Or if you generate it on CI, you might also want to setup the playwright environment.

docs/features/seo-meta.md

@@ -0,0 +1,36 @@
+---
+depends:
+  - custom/index#headmatter
+relates:
+  - features/og-image
+tags: [SEO, head]
+description: |
+  Configure SEO meta tags for better social media sharing and search engine optimization.
+---
+
+# SEO Meta Tags
+
+Slidev allows you to configure SEO meta tags in the headmatter to improve social media sharing and search engine optimization. You can set up Open Graph and Twitter Card meta tags to control how your slides appear when shared on social platforms.
+
+## Configuration
+
+Add the `seoMeta` configuration to your slides deck frontmatter:
+
+```yaml
+---
+# SEO meta tags
+seoMeta:
+  ogTitle: Slidev Starter Template
+  ogDescription: Presentation slides for developers
+  ogImage: https://cover.sli.dev
+  ogUrl: https://example.com
+  twitterCard: summary_large_image
+  twitterTitle: Slidev Starter Template
+  twitterDescription: Presentation slides for developers
+  twitterImage: https://cover.sli.dev
+  twitterSite: username
+  twitterUrl: https://example.com
+---
+```
+
+This feature is powered by [unhead](https://unhead.unjs.io/)'s `useHead` hook, please refer to the [documentation](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) for more details.

packages/slidev/node/commands/build.ts

@@ -54,6 +54,67 @@ export async function build(
 
   const outDir = resolve(options.userRoot, config.build.outDir)
 
+  // copy or generate ogImage if it's a relative path, skip if not
+  if (options.data.config.seoMeta?.ogImage === 'auto' || options.data.config.seoMeta?.ogImage?.startsWith('.')) {
+    const filename = options.data.config.seoMeta?.ogImage === 'auto' ? 'og-image.png' : options.data.config.seoMeta.ogImage
+    const projectOgImagePath = resolve(options.userRoot, filename)
+    const outputOgImagePath = resolve(outDir, filename)
+
+    const projectOgImageExists = await fs.access(projectOgImagePath).then(() => true).catch(() => false)
+    if (projectOgImageExists) {
+      await fs.copyFile(projectOgImagePath, outputOgImagePath)
+    }
+    else if (options.data.config.seoMeta?.ogImage === 'auto') {
+      const port = 12445
+      const app = connect()
+      const server = http.createServer(app)
+      app.use(
+        config.base,
+        sirv(outDir, {
+          etag: true,
+          single: true,
+          dev: true,
+        }),
+      )
+      server.listen(port)
+
+      const { exportSlides } = await import('./export')
+      const tempDir = resolve(outDir, 'temp')
+      await fs.mkdir(tempDir, { recursive: true })
+
+      await exportSlides({
+        port,
+        base: config.base,
+        slides: options.data.slides,
+        total: options.data.slides.length,
+        format: 'png',
+        output: tempDir,
+        range: '1',
+        width: options.data.config.canvasWidth,
+        height: Math.round(options.data.config.canvasWidth / options.data.config.aspectRatio),
+        routerMode: options.data.config.routerMode,
+        waitUntil: 'networkidle',
+        timeout: 30000,
+        perSlide: true,
+        omitBackground: false,
+      })
+
+      const tempFiles = await fs.readdir(tempDir)
+      const pngFile = tempFiles.find(file => file.endsWith('.png'))
+      if (pngFile) {
+        const generatedPath = resolve(tempDir, pngFile)
+        await fs.copyFile(generatedPath, projectOgImagePath)
+        await fs.copyFile(generatedPath, outputOgImagePath)
+      }
+
+      await fs.rm(tempDir, { recursive: true, force: true })
+      server.close()
+    }
+    else {
+      throw new Error(`[Slidev] ogImage: ${filename} not found`)
+    }
+  }
+
   // copy index.html to 404.html for GitHub Pages
   await fs.copyFile(resolve(outDir, 'index.html'), resolve(outDir, '404.html'))
   // _redirects for SPA

packages/slidev/node/setups/indexHtml.ts

@@ -56,6 +56,14 @@ export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot
   const { info, author, keywords } = data.headmatter
   const seoMeta = (data.headmatter.seoMeta ?? {}) as SeoMeta
 
+  const ogImage = seoMeta.ogImage === 'auto'
+    ? './og-image.png'
+    : seoMeta.ogImage
+      ? seoMeta.ogImage
+      : existsSync(join(userRoot, 'og-image.png'))
+        ? './og-image.png'
+        : undefined
+
   const title = getSlideTitle(data)
   const description = info ? toAttrValue(info) : null
   const unhead = createHead({
@@ -76,7 +84,7 @@ export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot
           { name: 'keywords', content: keywords ? toAttrValue(Array.isArray(keywords) ? keywords.join(', ') : keywords) : null },
           { property: 'og:title', content: seoMeta.ogTitle || title },
           { property: 'og:description', content: seoMeta.ogDescription || description },
-          { property: 'og:image', content: seoMeta.ogImage },
+          { property: 'og:image', content: ogImage },
           { property: 'og:url', content: seoMeta.ogUrl },
           { property: 'twitter:card', content: seoMeta.twitterCard },
           { property: 'twitter:site', content: seoMeta.twitterSite },