eleventy-plugin-unfurl

Turn URLs into rich cards. Show a preview image, page title, description and other meta information all inside a neatly presented card. Collaborative effort between Sara Soueidan and myself.

See the live demo and the demo directory in the repo to see it all in action.

• Installation
• Options
• Development
• Credits

Installation

1. Install plugin using npm:

   npm install eleventy-plugin-unfurl
   

2. Add plugin to your .eleventy.js config:

   const pluginUnfurl = require("eleventy-plugin-unfurl");
   
   module.exports = (eleventyConfig) => {
     eleventyConfig.addPlugin(pluginUnfurl);
   };
   

3. Use the shortcode in your templates (.md, .njk, .liquid or .js) like so:

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

Options

The HTML of the unfurled links can be amended using the template option like so:

eleventyConfig.addPlugin(pluginUnfurl, {
  template: ({ title, url }) => `<a href="${url}">${title}</a>`,
});

The following data points are available:

• title
• description
• lang
• author
• publisher
• image
  • url
  • type
  • size
  • height
  • width
  • size_pretty
• date (Note: Currently not returning the published date, removed from plugin HTML template)
• url
• logo
  • url
  • type
  • size
  • height
  • width
  • size_pretty

🎨 Looking for some CSS like in the demo? Check out the demo file in the repo.

Development

1. Amend the .eleventy.js file within demo so it points to the source code in the parent directory:

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

2. Install the demo dependencies:

   cd demo
   npm install
   

3. Run the demo locally:

   npm run dev
   

Credits

• Microlink for the underlying API
• Sara Soueidan for the idea and initial execution
• Kiko Beats for help with using Microlink