backgroundFlareAttrs could receive a rgb variable

[dethdkn]

Clear and concise description of the problem

While using the package, I wanted to use the default og image, but I wish the flare was blue instead of green. and I have other pages I need to create that I wish the flare was other colors instead of green.

Suggested solution

I think it would be really nice if src/runtime/components/OgImageTemplate/Fallback.vue receive a prop called flare. Something like this:

const props = defineProps({
    flare: {
        type: Object as () => {
            r: number
            g: number
            b: number
        },
        default: () => ({
            r: 0,
            g: 220,
            b: 130
        })
    }
})

const backgroundFlareAttrs = computed(() => {
  // we want to make a
  // const isBackgroundTw = props.background?.startsWith('bg-')
  return {
    style: {
      display: 'flex',
      position: 'absolute',
      right: '-100%',
      top: '10%',
      width: '200%',
      height: '200%',
      backgroundImage: `radial-gradient(circle, rgba(${props.flare.r},${props.flare.g},${props.flare.b}, 0.5) 0%,  rgba(5, 5, 5,0.3) 50%, rgba(5, 5, 5,0) 70%)`,
    },
  }
})

Alternative

No response

Additional context

I'm still new to coding, if you think this is a good idea, I will try to create my first pr 😁 If not, thanks for the feedback!

[harlan-zw]

Hi, thanks for the issue.

This may be partially solved with the v3 where you can provide a theme property to change the color of the flare.

You can read more about it here https://nuxtseo.com/og-image/api/nuxt-seo-template

If you need more functionality it's recommended to copy+paste the module.