generate dynamic social media share images for category pages
Scenario: Generate dynamic social share images for categories
Given a category has 4 applications
And some have won awards
When someone shares a link to the category page on social media
Then the image that's shown has some details about the category
And the background of the category
And shows there are 4 applications in this category
And shows x have won awards
Examples

Copied from @MTG2000's response on discord
Our front-end app is a kind of apps that is called "SPA", which stands for Single Page Applications. The way they are different from regular websites is that the whole app is served at the beginning, then when moving between pages, no page reloads happens, so it gives an experience that is closer to native desktop/mobile apps.
But this has a drawback, the app being served as a single page means that we can't use dynamic meta tags for each page (meta tags: the tags responsible for showing the this preview card).
A common solution for this situation is to migrate our Front-end app to Next.Js. But this will take a LOT of time, so I wouldn't recommend doing that at this stage of our project life cycle.
Currently, after we added pre-rendering, we have preview cards for category pages. But do you mean we also want dynamic content inside the preview image??
Because I think we discussed this point previously (when we wanted to do it for Lightning Landscape), but we decided not to because generating images with dynamic content will require subscribing to a new service to handle this image generation & it wasn't cheap at all...
So what do we want to do here??