Back

@pepelsbey that's what I was thinking — it sounds like @nhoizey is working on something along those lines. I added the generation script to my command that starts my site locally as well so it'll get generated if I preview my post.

@cory actually, I already have a pre-push commit hook (with Husky), which currently only adds dates in YAML Front Matter of Markdown files in my photography site:

https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/.husky/pre-push

I think I commented the check on opengraph images because it was taking too much time.

But here’s the shell script that checks if they are missing: https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/_scripts/check-missing-opengraph.sh

@pepelsbey

@cory @pepelsbey oh no, this was not because of the time it took, here the commit that commented it:
https://github.com/nhoizey/nicolas-hoizey.photo/commit/b3a9bd316bff67ae9186908a3a4ee938b6fa7665

This is because my opengraph images are based on some HTML that loads my photos, so the dev server has to be running, but might not be the case when I git push…

@cory @pepelsbey an example photo:
https://nicolas-hoizey.photo/galleries/misc/miniature/ho-scale/the-great-cinemascope-car-chase/

The HTML for the opengraph image:
https://nicolas-hoizey.photo/photos/the-great-cinemascope-car-chase/opengraph.html

The Eleventy templates to generate these:
https://github.com/nhoizey/nicolas-hoizey.photo/tree/main/src/tools/opengraph

And the shell script that runs a cluster of Puppeteer/Chrome to take screenshots:
https://github.com/nhoizey/nicolas-hoizey.photo/blob/main/_scripts/generate-opengraph-images.js

@cory the ones on my personal site are really different, they are generated on demand with pretty complex Cloudinary URLs.

For example: https://res.cloudinary.com/nho/image/upload/w_1200,h_630,c_fill,q_auto,f_auto/w_1100,c_fit,co_rgb:000000,g_south_west,x_50,y_380,l_text:Georgia_42:Matthias%20Ott%3A%20Own%20Your%20Web%20%E2%80%93%20Issue%2010%3A%20Links%20Worth%20Sharing/w_1100,c_fit,co_rgb:663399,g_north_east,x_50,y_300,l_text:Georgia_40:%2523IndieWeb%2520%2520%2523links/resources/opengraph-background

I use @jlengstorf ‘s `get-share-image ` plugin with a shortcode:
https://github.com/nhoizey/nicolas-hoizey.com/blob/main/src/_11ty/shortcodes/opengraph.js

There are many ways to build opengraph images.

@pepelsbey

@nhoizey @jlengstorf @pepelsbey oh nice! I think I may keep my current approach for the sake of simplicity — I did move all of my blog/music images to a B2 Bucket and Netlify’s CDN, removing 11ty image, which cut my build times in half.

@nhoizey @jlengstorf @pepelsbey I was seeing unpredictable build failures when it failed to fetch a valid image as well.

@nhoizey @pepelsbey I’ve just been committing them and having it copy them through.