Support Open Graph protocol

[kaakaa]

Is your feature request related to a problem? Please describe.

It would be nice if the generated slides has og properties of Open Graph protocol, making them easier to share on blog, SNS, etc.

Describe the solution you'd like

Like download config, setting ogp config enabled will inject og properties to index.html when building a slide. ogp config would be needed to have the URL to deploy to, because some og properties require absolute URL and the URL isn't determined when building.

e.g.:

If ogp setting is enabled,

---
ogp:
  url: https://slides.exaple.com/
  image: https://slides.exaple.com/ogp.png
---

og properties will be injected to index.html in setupIndexHtml, and og-image can be generated in build.ts with {format: 'png', range: 1} options.

const ogImage = ogp.image ? ogp.image : `${ogp.url}/assets/ogp/image.png`
...
head += [
  ogp && `<meta property="og:title" content="${getSlideTitle(data)}" />`,
  ogp && `<meta property="og:type" content="video.movie" />`,
  ogp && `<meta property="og:url" content="${ogp.url}" />`,
  ogp && `<meta property="og:image" content="${ogImage}" />`,
]
...

(However, my concern is that this way fixes the deployment location at build time, so it would be good if URLs such as og:url could be dynamically determined according to the deployment location...)

Describe alternatives you've considered

Now, I'm running a script on GitHub Actions to generate index.html with og properties. It works fine, but I would love for Slidev to have this function;

[antfu]

I'd be happy to have this feature. I think it would be better to have og instead of ogp tho. For the URL I am not sure as Slidev generates SPA without server, where we don't know where the page is deployed, I feel it's better not to do any special handling and leave them to the users.

As tagged, PR is welcome if anyone wants to work on it