Scrape URLs and display card like HTML using a nunjucks shortcode

.eleventy.js

// require all the metascraper rules at the top of the config file

const metascraper = require("metascraper")([
  require("metascraper-image")(),
  require("metascraper-logo")(),
  require("metascraper-logo-favicon")(),
  require("metascraper-publisher")(),
  require("metascraper-title")(),
  require("metascraper-url")(),
]);
const got = require("got");

module.exports = (eleventyConfig) => {
  // create shortcode
  eleventyConfig.addNunjucksAsyncShortcode("link", async function (link) {
    const { body: html, url } = await got(link);
    const metadata = await metascraper({ html, url });

    return `
        <article class="resource">
            <div class="resource__image">
                <img class="resource__img" width="75" height="75" src="${metadata.logo}" alt="Avatar image for ${metadata.publisher}" />
            </div>
            <div class="resource__content">
                <a href="${metadata.url}" class="resource__title"> ${metadata.title} </a><br>
                <span class="resource__domain"> ${metadata.publisher}</span>
            </div>
            <svg class="c-icon resource__icon" width="13" height="12" viewBox="0 0 13 12" fill="none">
            <path d="M1.5 11L11.5 1M11.5 1H1.5M11.5 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </article>`;
  });
  return {
    dir: {
      input: "src",
      output: "dist",
    },
  };
};