search

deanputney / earlyvoting

MIT License
0 stars 0 forks source link

Dean/open graph metadata #79

Closed deanputney closed 4 years ago

deanputney commented 4 years ago

Here is how to make the share images for each state:

  1. Load the homepage.
  2. Open the web inspector and turn on mobile mode.
  3. Set to responsive. Set dimensions to 542 x 304.
  4. Modify the .hero element to have height: 100vh;. This fills the viewport.
  5. Use Nimbus Screenshot to take a screenshot of the visible area of the page.
  6. In the Nimbus settings, uncheck "Keep original resolution (for Retina)". This makes the screenshot retina resolution instead of screen resolution.
deanputney commented 4 years ago

I don't particularly want to deal with loading all the images into React at the moment to actually put them in the share URL. @kofron if you're up for it in the morning, go nuts. Once that's done this closes the share metadata issue #21.

kofron commented 4 years ago

I'll take care of the images right now

kofron commented 4 years ago

I have performed the following dark magic:

ls src/images/state-shares/* | sed -e 's/\// /g' -e 's/\./ /g' -e 's/-//g' | awk '{print "import " $(NF-1)"ShareImage from '\''../images/site-shares/" $(NF-1)".png'\'';" }'
kofron commented 4 years ago

Except that won't work. Not entirely sure how to do this actually, we should talk about it

deanputney commented 4 years ago

Looks like we're in good shape now. The images appear to be writing properly to the HTML.