eleventy-plugin-unfurl

1.0.0 • Public • Published

eleventy-plugin-unfurl

npm

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

  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

Package Sidebar

Install

npm i eleventy-plugin-unfurl

Weekly Downloads

8

Version

1.0.0

License

ISC

Unpacked Size

5.21 kB

Total Files

3

Last publish

Collaborators

  • daviddarnes