Zach’s ugly mug (his face) Zach Leatherman

Every Fire Needs a Sparkline

September 13, 2021

The Eleventy API ecosystem is growing. It started with a screenshot service. Now, we have a very simple service to generate SVG images for sparklines. This is using the sparkline-svg package from CharlesStover’s AvatarCharlesStover.

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

URLs support the following formats:

/[height]x[width]/[values]/
/[height]x[width]/[values]/[color]/

Deploy your own

Deploy to Netlify

Demos

Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021 Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021 Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021 Sparkline representing frequency of posts on zachleat.com written from 2007 to 2021

You can also view this on the sidebar of this very website (at larger viewport sizes).

Generating the values from an Eleventy collection

eleventyConfig.addLiquidFilter("getYearlyPostCountList", (posts, startYear = 2007) => {
  let years = [];
  for(let year = startYear; year <= (new Date).getFullYear(); year++) {
    let count = posts.filter(function(post) {
      return post.data.page.date.getFullYear() === parseInt(year, 10);
    }).length;

    years.push(count);
  }
  return years.join(",");
});

via source code on zachleat.com

Usage:

<img src="https://v1.sparkline.11ty.dev/120x30/{{ collections.posts | getYearlyPostCountList }}/" width="120" height="30" alt="Frequency of posts written every year on zachleat.com">

< Newer
IndieWeb Avatar, yet another Eleventy Image Service API
Older >
Two Million npm Downloads for Eleventy

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 83 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 »

1 Repost

IndieWeb Avatar for https://www.bram.us

21 Likes

Eric ☕️ 🐟 💻Charles StoverAdebiyi AdedotunArpit BatraSteve LeeEric WallaceHéctor AguilarAna RodriguesamberleybertrandkellerJon KupermanMWDelaneyJoshua YoesNetlifyMark BoultonLuke (he/him) Stressed af 💉💉Pelle WessmanJens Oliver MeiertWiley WigginsDavid Boyne 🚀Chris Burnell
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)