Zach’s ugly mug (his face)

Zach Leatherman

IndieWeb Avatar, yet another Eleventy Image Service API

September 20, 2021

The Eleventy API ecosystem is growing (again).

I use Twitter avatars everywhere. They require an Twitter Developer account and an API key to implement. They require the talent being pictured to have a Twitter account (not everyone does). I wanted a more open alternative. I decided to build a little image service that would fetch the icon from any web site, optimize it using Eleventy Image, and return that instead.

Demo

IndieWeb Avatar for 11ty.dev/ IndieWeb Avatar for a11yproject.com/ IndieWeb Avatar for netlify.com/ IndieWeb Avatar for viljamis.com/ IndieWeb Avatar for ashur.cab/rera/ IndieWeb Avatar for nicolas-hoizey.com/

If you want a live demo in the wild, check out the Eleventy Leaderboards (via Speedlify).

Source Code

Only one path parameter is supported right now: /[url]/ (must be encoded via e.g. encodeURIComponent)

My version is running on https://v1.indieweb-avatar.11ty.dev/ using the same versioning via Netlify Branch Subdomains strategy as the screenshot and sparkline services.

It makes use of Netlify’s On-Demand Builders to reduce the number of external HTTP requests to generate the images.

Deploy your own

Deploy to Netlify

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for https://jamstackconf.com/Jamstack Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for https://smashingconf.com/Smashing Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Jamstack Community Survey 2021 Results
Next
Every Fire Needs a Sparkline

10 Retweets

Florian WeilMatthias OttAxel RauschmayerJean Pierre KolbKevin MarksEleventyLuis OrduzKurt KempleMax BöckJacky Alciné
39 Likes
Fabio FranchinoTrevor TwiningMarc Littlemore 🤖SergestraJennifer HicksBrett EvansMatthias OttRoel GroeneveldSven Kaemper4rontenderEric WallaceMike AparicioherestomwiththeweatherDemirliasansorDoğan ÇelikGiuseppeJohn Kemp-CruzDaniel EhnissTomek SułkowskiDanAndrew Chouashur.cab/reraKurt KempleJacky AlcinéMatt SecoskeJason LengstorfemanuelEleventyMax BöckChris “Vaxed and Masked” GaraffaMonica 🇵🇷 Hasta en la 🌑Stephanie EcklesJess Peck 🐍👾✨jalbertbowdeniiChris M.Thorr | codinsonn.dev ✊🏾 👾 ⚡️S#Tanner DolbyStephen Cunliffe
6 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    ahaha that has a nice webring to it

  2. Giuseppe

    Giuseppe @giuseppegurgone #

    zravatar

  3. Martin Schneider

    Martin Schneider @schneyra #

    Exactly this.

  4. Nicolas Hoizey

    Nicolas Hoizey @nhoizey #

    OMG, did you really use my avatar in your demo? 😅

  5. Zach Leatherman

    Zach Leatherman @zachleat #

    Awesome!

  6. Max Böck

    Max Böck @mxbck #

    nice! I've been looking for something exactly like this for my blogroll 🙌

    4 Mentions
    1. online-code-generator.com https://online-code-generator.com/author/ #

      Top Links Minimal APIs in .NET 6 but where are the Unit Tests? (Scott Hanselman) Announcing the Pulumi REST API (Joe Duffy) 6 Essential Tools to Detect and Fix Performance Issues in .NET (Michael Shpilt) Let’s Learn .NET: IoT (Sept 30th) (.NET Team) LINQ improvements in .NET 6 (M… Truncated

    2. Pablo Lara H

      Pablo Lara H @pablolarah #

      🚀 Indieweb Avatar, Yet Another Eleventy Image Service Api by Zach Leatherman @zachleat An open source/open web service to fetch the icon/favicon/avatar from any URL. #avatar #icon #fetchicon #webdev #webtool #webapp #11ty zachleat.com/web/indieweb-a…

    3. softbranchdevelopers.com #

    4. Alvin A. https://www.alvinashcraft.com/author/admin/ #

      Top Links Minimal APIs in .NET 6 but where are the Unit Tests? (Scott Hanselman) Announcing the Pulumi REST API (Joe Duffy) 6 Essential Tools to Detect and Fix Performance Issues in .NET (Michael Shpilt) Let’s Learn .NET: IoT (Sept 30th) (.NET Team) LINQ improvements in .NET… Truncated

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)