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


< Newer
Jamstack Community Survey 2021 Results
Older >
Every Fire Needs a Sparkline

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

14 Reposts

IndieWeb Avatar for https://www.alvinashcraft.comIndieWeb Avatar for https://softbranchdevelopers.comJacky AlcinéMax BöckKurt KempleLuis OrduzEleventyKevin MarksJean Pierre KolbAxel RauschmayerPablo Lara HMatthias OttFlorian WeilIndieWeb Avatar for https://online-code-generator.com

42 Likes

Nicolas Hoizey⚡️ Salma | whitep4nth3rColby FayockFabio FranchinoTrevor TwiningMarc Littlemore 🤖SergestraJennifer HicksBrett EvansMatthias OttSven KaemperRoel Groeneveld4rontenderEric WallaceMike AparicioherestomwiththeweatherDemirliasansorGiuseppeDoğan ÇelikJohn Kemp-CruzTomek SułkowskiDaniel EhnissAndrew ChouDanKurt Kempleashur.cab/reraMatt SecoskeJacky AlcinéemanuelJason LengstorfEleventyMax BöckMonica 🇵🇷 Hasta en la 🌑Chris “Vaxed and Masked” GaraffaJess Peck 🐍👾✨Stephanie EcklesjalbertbowdeniiChris M.Thorr | codinsonn.dev ✊🏾 👾 ⚡️S#Tanner DolbyStephen Cunliffe
7 Comments
  1. Max Böck

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

  2. Zach Leatherman

    Awesome!

  3. Nicolas Hoizey

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

  4. Martin Schneider

    Exactly this.

  5. Giuseppe

    zravatar

  6. Zach Leatherman

    ahaha that has a nice webring to it

  7. Nicolas Hoizey

    @zachleat it is a great solution (how could I say something different with your demo… 😅), but I like to host these icons myself, and I love SVG so much… 🤷‍♂️

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

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)