34 replies

1. Mike Aparicio Bluesky 33 min later

   Nice! What did you end up using to pull the colors?

   1. Zach Leatherman Bluesky 1 hr later

      I’m releasing a plugin tomorrow! 🙌🏻 I haven’t hidden it so you could probably find it now though 😅

      1. Bob Monsour Bluesky 1 hr later

         I think I've seen it...wink wink. And I know of a site where it may have showed up...continues winking.

         1. Zach Leatherman Bluesky 1 hr later

            if you hold it too long your face will stay like that forever—I’m a dad so I know these things

2. Amelia Bellamy-Royds Mastodon 3 hr later

   @zachleat Oooh, classy. So what technique did you end up using? Pixel sampling the favicons? Or did you find good enough results from manifest theme colors?

   Also, am I correct that you're desaturating or lightening whatever color you extracted?

   1. Massimo Artizzu 🇺🇦🔱 Mastodon 7 hr later

      @AmeliaBR @zachleat I was going to reply "What is this sorcery?!" to Zach but I guess your question will do just fine instead 😆

   2. Zach Leatherman Mastodon 15 hr later

      @AmeliaBR yeah! `npm:extract-colors` on favicon via https://www.11ty.dev/docs/services/opengraph/ and then sorted oklch by lightness and chroma (descending)

      …I should write a blog post.

      1. Eric Portis Mastodon 15 hr later

         @zachleat @AmeliaBR Yes yes yes please do

3. d3v1an7 Mastodon 7 hr later

   @zachleat 👏

4. Zach Leatherman Bluesky 15 hr later

   to do the above, I used the following: bsky.app/profile/11ty...

5. Zach Leatherman Mastodon 15 hr later

   If you’re curious, I used the brand new `@11ty/image-color` to fetch the border colors from each site’s favicon/avatar: https://fosstodon.org/@eleventy/114076444351199781

   1. Zach Leatherman Mastodon 15 hr later

      This open source work is part of a larger migration of the Font Awesome blog (Blog Awesome) from WordPress to Eleventy, currently ongoing!

      https://github.com/11ty/eleventy-import was also born from that too!

   2. uncenter Mastodon 17 hr later

      @zachleat this is super cool! on the other hand does this need to be under the eleventy organization, it seems to have barely any connection ahah 😅

      1. Zach Leatherman Mastodon 17 hr later

         @uncenter yeah, I get it — it isn’t an Eleventy plugin per-say but I suppose in my head I was choosing between @11ty/ or @zachleat/ and the former made more sense with the fetch and -img use internally.

         It’s a gray area — should is-land be under @11ty/?

         1. uncenter Mastodon 18 hr later

            @zachleat i would say no actually, same with something like webc (for is-land in particular you have the luck of `is-land` seemingly still being available as a non-scoped package name! could use that and move it under your personal account)

            1. Zach Leatherman Mastodon 18 hr later

               @uncenter Whether or not something is tightly coupled to Eleventy core isn’t really what I’d consider weighted into whether or not something is namespaced under @11ty/. What do you think about `eleventy-fetch`?

               1. uncenter Mastodon 22 hr later

                  @zachleat i also think we could decouple that from eleventy since it bears little relation- i do think that relation to eleventy should matter in terms of namespacing.

                  1. Zach Leatherman Mastodon 23 hr later

                     @uncenter I think there are four different styles at play here, which do you mean?

                     1. @11ty/eleventy-plugin-UTIL
                     2. @11ty/eleventy-UTIL
                     3. @11ty/UTIL
                     4. UTIL

                     I agree that #2 *could* go away (though renaming packages is annoying enough for folks that I don’t think it’s worth it, unless there is a larger issue)

   3. David Sleight Mastodon 17 hr later

      @zachleat @eleventy OMG, I was *just* migrating my site to 11ty v3 + the v6 image plugin this morning and starting to eye Sharp to do something like this!

      1. Zach Leatherman Mastodon 20 hr later

         @stuntbox @eleventy yay!! perfect timing!

   4. Private reply Mastodon 20 hr later
      1. Private reply Mastodon 1 day later
   5. Christopher Kirk-Nielsen Mastodon 21 hr later

      @zachleat Silly question (out of curiosity, not anything I am dead-set on figuring out): for the Google Dev site, the favicon is evenly (ish) spread across 4 colours, but the output is yellow. I didn't look too much at the code (sorry) but is there a magic thing that determines which hue "wins"?

      Also, gotta say this is very cool! It fits neatly in the "Whimsy" and "Surprise & Delight" Venn diagram. (as overused as that second term may be these days 😅)

      1. Zach Leatherman Mastodon 1 day later

         @chriskirknielsen it’s not really magic, just a quick sort by oklch Lightness and Chroma — wrote it up here: https://fediverse.zachleat.com/@zachleat/114082206353649121

         You could make a fancy multicolor gradient border from all of the colors it finds but I didn’t!

         1. Christopher Kirk-Nielsen Mastodon 1 day later

            @zachleat Ah, that's smart and simple, neat! Thank you for the write-up!

            1. Zach Leatherman Mastodon 1 day later

               @chriskirknielsen you’re very welcome!

6. Tyler Sticka Mastodon 15 hr later

   @zachleat Ooh, fun! 🎨

   1. Zach Leatherman Mastodon 16 hr later

      @tylersticka Thanks!!

7. Ariel Salminen Bluesky 16 hr later

   Waiiit, I see two websites I’ve made here! 😍

   1. Zach Leatherman Bluesky 16 hr later

      I had to force myself to stop at 2, sorry 😅

   2. Chris Ferdinandi Bluesky 17 hr later

      Ohh which ones are yours? I'm so sorry, I just realized I only know you for your absurdly relatable posts here and not your professional work.

      1. Ariel Salminen Bluesky 19 hr later

         The 2nd (Nord Design System) and the 9th (Duet Design System) ☺️

         1. Chris Ferdinandi Bluesky 21 hr later

            Nice!!

8. Zach Leatherman Mastodon 1 day later

   Wrote this up on the blog: https://fediverse.zachleat.com/@zachleat/114082206353649121