Skip to content


I've been committed to writing nearly every note I take in markdown these days and today was no different. My favorite tools all use it:, Trello, 11ty. I was adding a list of inspiration sites to a client's board and noticed a beautiful interaction.

I had seen Zach's post CSS-only External Link Favicons— and quickly threw it into a codepen, but knew adding the css to cover every possible url would be too much and I needed to be able to link to anything on the internet without too much work.

Luckily, Eleventy has a budding plugin environment so I spent some time browsing the eleventy-plugin Github tag. After not too long, I came across a great addition by David Darnes and Sara Soueidan which made it so easy to add to my site. The code lives on a Github repo for eleventy-plugin-unfurl.

Simple steps

  1. Install via npm
npm install eleventy-plugin-unfurl
  1. Add the plugin to the .eleventy.js config
const pluginUnfurl = require("eleventy-plugin-unfurl");
  1. Customize the template inside the module.exports of your .eleventy.js config file
eleventyConfig.addPlugin(pluginUnfurl, {
template: ({ title, url, logo }) => `<a href="${url}" class="unfurl"><img
  1. Add some styles site-wide. For me this was easy to adapt to light/dark mode with the use of css variables.
.unfurl {
background: rgba(var(--color-foreground), .1);
border: 1px solid rgba(var(--color-foreground), .3);
border-radius: 2px;
display: inline-block;
line-height: 1.3;
margin: 0 .1rem;
padding: 0 .5rem .2rem;
text-decoration: none;
transition: all var(--duration-short) ease-in-out;
.unfurl:hover {
border-color: rgb(var(--color-accent));
.unfurl__logo {
display: inline-block;
margin-right: .5rem;
vertical-align: middle;
  1. Use it!
{% unfurl "" %}


The CSS prefers-color-scheme user query and order of preference

David Darnes - Designer, Front-end Developer & Writer specialising in Design Systems, Eleventy, Ghost and Jamstack

Using a GitHub repo directory as an npm package

In the spirit of instant gratification, I'm posting this immediately after adding this feature to my site. Feels great to have some incremental improvements. Maybe someday I'll post all my markdown notes from my Obsidian library. See you out there, internet!

Edit: After using for a day or so, I plan to look into truncating titles via ellipsis since sites with really long titles aren't ideal on mobile or in inline content. I'd also like to see if it's possible to add another template and shortcode for further expansion than I have in my current setup.

Posted in: #website #changelog by @



Philip Boardman
Eric Wallace
Hazim Sami / حازم سامي
Dave 🧱
Luke Harris 🌵
Tariq Martinez


Dave 🧱
Tariq Martinez

2 Replies

Luke Harris 🌵
Luke Harris 🌵

Really cool! Tried to subscribe to your blog via RSS and was sad to see no feed source

dan leatherman
dan leatherman

It’s on my list! source

These are webmentions via the IndieWeb and Mention this post from your site:

More posts