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

Overview

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

You might also like...

Cards Against Humanity Game Client made with ⚡Nextron (Next.js + Electron) and Typescript

CAH Client Introduction This project is one of the other projects related to the Cards Against Humanity (CAH) game. This client is made in Electron, u

Jun 17, 2022

👾 Simple creating cards using canvas. Welcome, Rank, Info and so on.

👾 Simple creating cards using canvas. Welcome, Rank, Info and so on.

⭐ discord-canvas-card Are you developing a bot using DiscordJS and you need beautiful images created using Canvas? You can create great welcome, goodb

Dec 18, 2022

A Chrome extension for converting ENS names into links to daopanel chat.

A Chrome extension for converting ENS names into links to daopanel chat.

daopanel connect A Chrome extension that links Twitter usernames to daopanel chat conversations Example daopanel chat is powered by XMTP Github Action

Aug 23, 2022

Additional themes for Lovelace Mushroom Cards 🍄

Additional themes for Lovelace Mushroom Cards 🍄

🍄 Mushroom Themes Mushroom themes allow you to customize your Mushroom dashboard using Home Assistant themes. ⚠️ It's only a theme! You need to insta

Dec 24, 2022

Customizable Codegrepper Stat cards.

CodeGrepper Cards Render your grepper data on your profile. The average server reponse is around 3seconds on the first request. Config Base URL https:

Apr 24, 2022

A free & open source project to save your passwords, notes & credit cards

Free & open source project to save your passwords, notes & credit cards with a clean console UI with multiples features such as show information/create information/delete information

Aug 8, 2022

A front-end only implementation of linked template cards for Lovelace

A front-end only implementation of linked template cards for Lovelace

Linked Lovelace by @daredoes A Javascript/Websocket way to do templating in the Lovelace UI Support Hey you! Help me out for a couple of 🍻 or a ☕ ! F

Dec 12, 2022

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Jan 8, 2023

A Twitter filtered search to only get the live broadcasts hosted on Twitter itself, Built using Vanilla JS and Node.js

Twitter Broadcasts Search A Twitter filtered search to only get the live broadcasts hosted on Twitter itself, Built using Vanilla JS and Node.js. Live

Oct 6, 2022
Comments
  • Fail gracefully

    Fail gracefully

    Currently if the data isn't able to be fetched it fails and kills the whole build:

    Error fetching https://api.microlink.io/?url=https://trib.al/5t27Gcr. Message: Bad response for https://api.microlink.io/?url=https://trib.al/5t27Gcr (429): Too Many Requests
    Failing gracefully with an expired cache entry.
    [11ty] Problem writing Eleventy templates: (more in DEBUG output)
    [11ty] 1. Having trouble rendering njk template ./src/garden/CSS Nesting.md (via TemplateContentRenderError)
    [11ty] 2. (./src/garden/CSS Nesting.md)
    [11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `unfurl` (via Template render error)
    [11ty] 3. Bad response for https://api.microlink.io/?url=https://developer.chrome.com/blog/help-css-nesting/ (429): Too Many Requests (via Template render error)
    [11ty]
    [11ty] Original error stack trace: Error: Bad response for https://api.microlink.io/?url=https://developer.chrome.com/blog/help-css-nesting/ (429): Too Many Requests
    [11ty]     at RemoteAssetCache.fetch (/Users/ellyloel/git/ellyloel.com/node_modules/@11ty/eleventy-cache-assets/src/RemoteAssetCache.js:55:11)
    [11ty]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    [11ty]     at async run (/Users/ellyloel/git/ellyloel.com/node_modules/p-queue/dist/index.js:163:29)
    [11ty] Copied 65 files / Wrote 0 files in 96.66 seconds (v2.0.0-canary.18)
    error Command failed with exit code 1.
    

    It might be nice to fail gracefully and return the link to be displayed instead.

    try {
      const metadata = await Cache(`https://api.microlink.io/?url=${link}`, {
        duration: "1m",
        type: "json",
      });
     
      if (options.template) {
        return options.template(metadata.data);
      }
      return template(metadata.data);
    } catch(e) {
      console.error(e);
      return link;
    }
    

    Also, on another note, it could be good to make an option for the cache duration, and switch from Eleventy cache assets to Eleventy fetch.

    const metadata = await EleventyFetch(`https://api.microlink.io/?url=${link}`, {
      duration: options?.duration || "1m",
      type: "json",
    });
    
    opened by EllyLoel 4
  • Errors house keeping

    Errors house keeping

    • Prevent errors in builds if the API failed to return data, thanks @EllyLoel! (Fixes #1)
    • Clean up template code so it's easier to read overall
    • Clean up docs and lean on external docs for more accuracy
    • Remove lock file to prevent getting annoying error reports via email
    opened by daviddarnes 1
Owner
David Darnes
Senior Front-end Developer at @Nordhealth
David Darnes
Start building admin tools on Slack without going into complex slack syntax and flows.

Slackmin Slackmin helps in easy integration with slack to use slash commands, interactive components, format and send messages, design and use modals.

PLG Works 49 Jan 2, 2023
slack-friends Make it easy to send to Slack from your application

slack-friends Make it easy to send to Slack from your application Installation ?? npm install slack-friends How to get bot token https://api.slack.com

Taein Kang 9 Aug 23, 2022
An example implementation of the slack-gpt starter which ingests confluence pages to create a helpful slack bot

Slack-GPT (HR bot example implementation) Table of Contents Introduction Prerequisites Creating and installing the application Configuration Starting

Martin Hunt 17 Jul 31, 2023
Preview Notion's private links in Slack

slack-notion-preview English | 日本語 Description A Slack App that shows a preview of a private Notion link posted to Slack. Features Notion article titl

Anycloud 30 Nov 16, 2022
A community-centric site like you've never seen before.

Kleptonix A community-centric site like you've never seen before. Overview This section will be updated when basic posting and account creation functi

Luis Bauza 1 Apr 19, 2022
MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

PlaceRate PlaceRate is a MERN stack application which serves as an online map journal where users can mark and rate the places they've been to. You ca

Yuvraj Virdi 0 May 17, 2022
This is a full stack application where you can log all you places where you visited....-

Full Stack Travelling Log ?? ?? ✈️ This is a full stack application where you can log ✈️ your all places ?? ?? ?? you have visited .... ??️ ??️ ??️ Se

null 19 Sep 29, 2022
Benefit cards API, create and store card data and log transactions

Valex ?? Benefit cards for companies and employees! ?? Tech used Overview An API to store benefit cards from companies to employees and log transactio

Felipe Ventura 2 Apr 25, 2022
A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

Akamai BMP - RSA/AES Frida Hook This Frida script can be used to find the public RSA key used in the encryption process in Akamai BMP 3.3.0. Since ver

yog 31 Jan 8, 2023
Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data

CIDEr Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data. Website: Start using Cider About CIDEr Cider was created to f

Oatear 37 Dec 10, 2022