feat: browser exporter

[KermanX]

This PR introduces a new page on /export as an alternate to the slidev export CLI.

• A new "export" button is added under the "more options" menu in the navigation bar.
• When running slidev, the exporting URL will be shown.
• When running slidev export, a tip will be shown to inform the user to use the exporting UI.

Warning

Both PDF exporting and image capturing don't work well on Firefox. And I don't have a Safari to test.

The Approach

• For PDF, use the browser's built-in "export to PDF" function.
• For PPTX/PNGs, the "Screen Capture API" is used.

Screenshots (by 2024/12/5 11:55)

On non-Chromium or chrome<94:

Todos

Maybe adding some UI for #1732?

[netlify]

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	f0304c8
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/67611ad22fa8db000757854b
😎 Deploy Preview	https://deploy-preview-1972--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 site configuration.

[pkg-pr-new]

Open in Stackblitz

@slidev/client

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

@slidev/parser

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

create-slidev

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

@slidev/cli

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

create-slidev-theme

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

@slidev/types

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

commit: f0304c8

[antfu]

Let's have it as experimental and ship it to iterates. I have some UI adjustment in mind but I think the feature wise is very solid already. Thanks a lot for working on it!

[antfu]

I think just export would be good enough :)

[KermanX]

We already have an export field in the headmatter:

# export options
# use export CLI options in camelCase format
# Learn more: https://sli.dev/guide/exporting.html
export:
  format: pdf
  timeout: 30000
  dark: false
  withClicks: false
  withToc: false

[antfu]

How about export.browser?

[KermanX]

export.* are correspondent to the CLI options of slidev export, but there is't a --browser CLI option, which may cause confusion 🤔

[antfu]

I guess that would be fine. We could update the docs mentioning about that. The name exportingUI feels a bit verbose and we don't usually have the concept of UI. Or I don't know if we could call it exporter to differentiate with the CLI export

[antfu]

Or browserExport or browserExporter to be more specific?

[antfu]

Let's have it and iterate on the main. I am open for better naming