Create OG Image Component for shared Articles

[John-Paul-Larkin]

Context

The current codebase has an OG image API that generates images with dynamic data on request.
We need a component based on the Figma designs to handle this.
The designs involve layers, images, and gradients, so its a good issue for someone looking to work on CSS skills.

Niall discussed this on the stream, which you can watch here.

Check out the Figma file.

Screenshots

Additional info

The API can be found at
app/api/og/route.tsx

[South-IN]

Do you want the image response to be like this ?

[John-Paul-Larkin]

Do you want the image response to be like this ?

HI South in.
Yes the image should be dynamically created to match the designs found in the figma file.
Do you want this issue assigned to you?

[South-IN]

Yes please assign this issue to me I am not sure I I'll be able to replicate the design but I'll try if I am not able to do it I'll unassign myself.

[John-Paul-Larkin]

Thanks South-IN.

I believe in you. 🥳

[NiallJoeMaher]

If you need the figma file so you can download the images to use in the design jump into the Discord and tag me. I'll send you the file.

The design isn't responsive (since it's a fixed size). But has lots of layered images so it's a tough but fun one. We are here to help! <3

[John-Paul-Larkin]

Apologies, I thought you could view the figma file in through the link I shared.

[NiallJoeMaher]

You can view it but not pull out the needed images I think 🤔

[South-IN]

@NiallJoeMaher @John-Paul-Larkin thank you I'll mention you on discord.