Content: [@nuxt/content-theme-docs] generate social preview image

[pi0]

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

Related to #371, instead of manually generating a social preview image, we may use an automated way to generate it.

Describe the solution you'd like

I would suggest having a built-in SVG template (so contents like texts and colors are replaceable on build time) and using svg2img to generate png format. (alternatively, we may use sharp). We can also directly use SVG for doc itself.

Describe alternatives you've considered

An alternative method as suggested by @danielroe would be providing a lambda function using a headless browser but it would add a service dependency which is in contrast to going full-static and being independent of APIs.

Additional context

Maybe we can finally refactor this solution out of nuxt/content for an easy way to generate social preview for static target :)

[danielroe]

A Nuxt module that uses a headless browser could also be done at generate time, for fully static.

[pi0]

@danielroe Headless browser could be good just it has a downside of ~300MB install size (vs svg2img: 120MB | sharp: 39MB) and requires chrome dependencies to be installed in CI/CD pipeline.
Benefit of headless browser would be it allows using vue components to design vs SVG to be designed once but at least for teme-docs where we have everything else predesigned probably not much benefit.

[Atinux]

I love it 💯