Skip to content

v1.0.0
Compare
Choose a tag to compare
@github-actions github-actions released this 21 Jan 09:03
· 1059 commits to main since this release
v1.0.0
5c5f4c3

✨ v1 Release

With support for Satori and the OG Playground, the module is now at a stable release version.

If you have any feedback on the release, please submit an issue or get in touch 🙂!

Please see the updated docs for anything missed in these notes.

🚀 Features

Satori Support

Satori is a library to convert HTML to SVGs, using this you can dynamically generate OG images quickly without the need headless browser.

The average render is around ~100ms compared to a chromium instance which can take seconds.

By default the OgImageStatic, OgImageDynamic, defineOgImageStatic and defineOgImageDynamic will use the Satori provider to render your Vue template.

It comes pre-configured with:

  • Emoji support 👋
  • Google font support (Uses Inter by default)
  • Image support (must be in the public directory)
  • Tailwind classes

OG Image Playground

An issue in 0.x was there was no way to work on your OG Image template with HMR support. To resolve this, I've built the OG Image Playground.

This playground lets you preview exactly what will be generated for both Satori and the browser screenshot provider with full HMR support.

  • Lets you preview images at the rendered twitter size
  • Shows you
  • Accessible at any URL, just append /__og_image__

🧹 Improvements

Better route inferences

The module will now use your page title and description as the default data for the OG Image.

⚠️ Breaking changes

Output dir

Previously all images were saved in a folder called _og-images. Now they are at ${route}/__og_image__/og.png.

Config removed

The following module config has been removed: outputDir, serverSideRender

OgImage, defineOgImage has been removed.

If you previously were using these, you should update to either OgImageStatic, defineOgImageStatic, OgImageDynamic, or defineOgImageDynamic.

Before

<template>
  <OgImage />
</template>

After

<template>
  <OgImageStatic />
</template>
Assets 2