eleventy-plugin-unfurl

    0.0.6 • 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

    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

    Install

    npm i eleventy-plugin-unfurl

    DownloadsWeekly Downloads

    6

    Version

    0.0.6

    License

    ISC

    Unpacked Size

    5.74 kB

    Total Files

    3

    Last publish

    Collaborators

    • daviddarnes