daviddarnes / eleventy-plugin-unfurl

Unfurl links into rich cards, as seen in places like Slack and Twitter

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

• duration: The duration of time before the cache is busted and new data is captured from the URL. Default is 1m, check out the Eleventy Fetch documentation for more info.

• template: A custom template to present unfurled links. Can be a totally custom HTML template string.

  Example:

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

  Check out the Microlink API documentation for a full list of possible data fields.

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
• Elly Loel for providing feedback