eleventy-plugin-unfurl

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

• Install plugin using npm:

  npm install eleventy-plugin-unfurl
  

• Add plugin to your .eleventy.js config:

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

• 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

• 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");
  

• Install the demo dependencies:

  cd demo
  npm install
  

• 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