Zach’s ugly mug (his face)

Zach Leatherman

IndieWeb Avatar, yet another Eleventy Image Service API

September 20, 2021 11ty

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

https://github.com/11ty/api-indieweb-avatar

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 Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
The Very First Eleventy 1.0 Beta Release
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 #

      Show original post

    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)