Un(f)URL

Mar 16, 2022

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: Obsidian.md, 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—zachleat.com 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

Install via npm

npm install eleventy-plugin-unfurl

Add the plugin to the .eleventy.js config

const pluginUnfurl = require("eleventy-plugin-unfurl");

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
  class="unfurl__logo"
  src="${logo.url}"
  width="16"
  height="16"
  alt=""
/>${title}</a>`,
});

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;
}

Use it!

{% unfurl "https://www.sarasoueidan.com/blog/prefers-color-scheme-browser-vs-os/" %}

Examples

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

6 Likes

2 Reposts

3 Comments

Dave 🧱 Mar 17, 2022
Dan wrote about using mine and @SaraSoueidan's unfurl plugin for @eleven_ty. So glad it worked! Thanks for sharing Dan 😊
View original post
Luke Harris 🌵 Mar 17, 2022
Really cool! Tried to subscribe to your blog via RSS and was sad to see no feed
View original post
dan leatherman Mar 17, 2022
It’s on my list!
View original post

Next: Nice Details
Previous: We're going streaking