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
-
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 is1m
, 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 withindemo
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