29 replies

1. Robb Knight Mastodon 5 min later

   @zachleat This is really smart. I just nuked mine recently because I was fed up of making the ~1000 pages it needed. I'll keep this in mind if i want to do them again.

   1. Zach Leatherman Mastodon 6 min later

      @robb thanks! I forgot to mention in the post that it also solved some sneaky problems with seeing 404 errors if my local build requested a production URL screenshot before it was pushed! If that happens I just show a default now (better)

      1. Robb Knight Mastodon 10 min later

         @zachleat Thats also a good point, I hit that a bunch of times and it's really annoying with Mastodon especially because it caches preview images.

         1. Zach Leatherman Mastodon 29 min later

            @robb *yes*

2. Khalid ⚡ Mastodon 6 min later

   @zachleat Jokes on you, I can make whatever OG image I want with any text I want :P

   1. Zach Leatherman Mastodon 7 min later

      @khalidabuhakmeh if it ain’t hosted on my domain it’s a deepfake

      (and you could do that before!)

      1. Khalid ⚡ Mastodon 25 min later

         @zachleat IT'S REAL TO ME, ZACH! IT'S REAL TO ME.... 😭

         1. Zach Leatherman Mastodon 30 min later

            @khalidabuhakmeh that’s because I am your dad

            1. Khalid ⚡ Mastodon 33 min later

               @zachleat Did you ever get those cigarettes you went out for? Must have been difficult to find.

               1. Zach Leatherman Mastodon 51 min later

                  @khalidabuhakmeh *backs away slowly*

3. David Bushell 👻 Bluesky 11 min later

   i'm confused, are you generating the same 474 images every build (or worse, every request!)?

   1. Zach Leatherman Bluesky 19 min later

      - now it’s 1 page for 474 unique images (cached in the screenshot service, not generated every time or every build)
      - previously it was 474 pages for 474 unique images (also cached in the screenshot service, not generated every time or every build)

      (I removed 473 pages from my build)

      1. David Bushell 👻 Bluesky 31 min later

         ah gotcha, nice

4. Mastro.{js,ts} Bluesky 17 min later

   Cool! If the background image is always the same, you can also speed up image generations a loooot by not spinning up a whole browser, but justing using canvaskit-wasm in Node/Deno/Bun, e.g. via github.com/mastrojs/og-...

   1. Zach Leatherman Bluesky 22 min later

      yeah! I wanted a 1:1 with a regular website as much as possible in my workflow so I didn’t have to worry about browser support as much in the library

      1. Mastro.{js,ts} Bluesky 26 min later

         yeah, as the website changes you'd have to periodically update the background png somehow. Although that could be automated as well ;)

5. Christopher Kirk-Nielsen Mastodon 1 hr later

   @zachleat Ooh, clever! I should see if this helps get my build times down a little… thank you for sharing!

   1. Zach Leatherman Mastodon 1 hr later

      @chriskirknielsen you’re very welcome!

6. Amelia Bellamy-Royds Mastodon 1 hr later

   @zachleat So, to be clear: you are still building 474 open graph *images*, you're just not building 474 separate static HTML pages just to screenshot them to make the images.

   You're using the Chromium-based screenshot service as the build tool instead of using eleventy plus also the screenshot service.

   That seems like a sensible use of resources. But its not quite as impressive as you implied yesterday; your total build time including the screenshots is still proportional to page count.

   1. Zach Leatherman Mastodon 2 hr later

      @AmeliaBR I suppose! I don’t include the screenshots in my mental model of build times because they aren’t “blocking” build times, they happen independently as needed (but your point is valid!)

      1. Amelia Bellamy-Royds Mastodon 4 hr later

         @zachleat If the screenshot images are only generated on demand by your image caching layer, that also I guess means you're not necessarily re-building images for your entire archive of posts every time you tweak something.

         But be careful about following that logic too far: you could end up re-inventing PHP just to speed up the build times on your "static" website!

         1. Zach Leatherman Mastodon 5 hr later

            @AmeliaBR

            first of all: https://www.zachleat.com/twitter/1257414895110369280/
            second of all: https://www.zachleat.com/twitter/1304556448035278848/

            😅

            1. Stuart Langridge Mastodon 5 hr later

               @zachleat @AmeliaBR the thing about funky caching isn’t that it’s funky, it’s that it’s caching

               1. Zach Leatherman Mastodon 5 hr later

                  @sil @AmeliaBR I love a forever cache that I can bust at will

                  in the immortal words of the ghostbusters, cache-bustin makes me feel — no… wait, sorry this is an inside thought

7. Christian Alder Bluesky 4 hr later

   Ohhh that's clever! Took me a trip to your repo to understand, but it's all clicked for me now 🥳 Adding the json to the page is the same way I do a "go to random page" feature - great idea! And nice way to keep it secure so folks can't just generate any OG image with URL param shenanigans.

   1. Christian Alder Bluesky 4 hr later

      Thanks for the write up Zach!

      1. Zach Leatherman Bluesky 4 hr later

         you’re very welcome (and thank you for the kind words!)

8. Jesse Sutherland Bluesky 11 days later

   The screenshot service is custom 11ty service older post references on netlify or something else?

   Was just thinking of having a utility like this in my design system docs.

   Ie render screenshot of a component dynamically and give it a URL. Useful for marketing/comms team etc

   1. Zach Leatherman Bluesky 12 days later

      github.com/11ty/api-scr... is the one! currently on vercel though