Add social media preview images

Equal-Vote / star-server

STAR Voting is an upgrade to our current way of voting that allows voters to score candidates from 0 to 5. Ultimately, STAR Voting elects candidates who better represent the whole of the electorate. We are building a site that lets everyone from individuals to organizations use STAR Voting to host simple polls or run secure elections.

GNU Affero General Public License v3.0

17 stars 21 forks source link

Add social media preview images #583

Closed ArendPeter closed 2 weeks ago

ArendPeter commented 2 months ago

(I'm adding it to a early milestone in order to start the investigation, if it's a high effort item I may push it back)

When someone shares elections on social media, there should be an image showing exactly what the poll will look like

ArendPeter commented 1 month ago

For public beta, just give it a generic ballot based on the voting method, and optionally investigate next steps for server side rendering and figure out how hard it is.

Maybe investigate next.js for SSR? or see if the latest version of react / express can handle it

mikefranze commented 1 month ago

After seeing the links in social media posts this does feel needed

ArendPeter commented 1 month ago

Sounds like there's 3 paths

Minimum: Just have a place holder star ballot without candidate names
Medium: Create a screenshot of an empty ballots, and then draw the names on it server side
Full solution: Server side render the ballot so that the preview exactly matches what voters will see

Minimum & Medium will likely only apply to STAR ballots, but the full solution will be more flexible.

mikefranze commented 1 month ago

There is a service that can overlay text onto template images, we could make an API call when the election is finalized to create the image and get the url which would be the simplest. https://imagekit.io/docs/add-overlays-on-images

The other issue to consider is how to dynamically change the meta tags so that it is visible on the frontend. The simplest would be to put in template text into the index.html and fill in when the page is requested. This would include title, description, and image. This is a sort of mini SSR approach. https://blog.logrocket.com/adding-dynamic-meta-tags-react-app-without-ssr/

mikefranze commented 1 month ago

Alternatively we can use Puppeteer or Playwright to convert HTML to an image and store it locally. https://blog.logrocket.com/create-open-graph-image-generator-node-js/

mikefranze commented 3 weeks ago

Step 1: Add placeholder for entire website Step 2: Add ability to specify other meta tags based on what page we're on Step 3: Figure out how to automatically generate image and update meta tags

Questions: Do we still want image to be a ballot? Or just election title?

mikefranze commented 3 weeks ago

Need to figure out where to store generated images Volume in K8s or azure blob storage?