Gatsby製のブログにリンクカードプラグイン自力で作って追加した

const visit = require('unist-util-visit'); 
const cheerio = require('cheerio');
const axios = require('axios');
const https = require('https');

// ランダムな遅延を生成する関数（1〜10秒の範囲）
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

module.exports = async ({ markdownAST }, pluginOptions) => {
  const urlRegex = /\$card\(([^)]+)\)/;

  async function fetchMetadata(url) {
    //ランダム遅延追加（間接的なDDOS対策）
    const randomDelay = Math.floor(Math.random() * 10000) + 1000;
    await sleep(randomDelay);

    const completeURL = `h${url}`;

    const agent = new https.Agent({  
      rejectUnauthorized: false // SSL証明書の検証を無効化（非推奨だが、trueだと動かないサイトがある）
    });

    try {
      const response = await axios.get(completeURL, { httpsAgent: agent });
      const $ = cheerio.load(response.data);

      const ogTitle = $('meta[property="og:title"]').attr('content');
      const title = $('title').text();
      const ogDescription = $('meta[property="og:description"]').attr('content');
      const Description = $('meta[property="description"]').attr('content');
      const ogImage = $('meta[property="og:image"]').attr('content');
      const Image = $('meta[property="image"]').attr('content');

      return {
        ogTitle: ogTitle || title,
        ogDescription: ogDescription || Description,
        ogImage: ogImage || Image
      };
    } catch (error) {
      console.error(`Error fetching metadata for ${url}:`, error);
      return {};
    }
  }

  function createCardNode(pluginOptions, metadata, url) {
    const { externalArticle } = pluginOptions;
    const completeURL = `h${url}`;

    const widgetDiv = {
      type: 'html',
      value: `
        <div class="link-card">
          <a href="${completeURL}" rel="noopener noreferrer nofollow" target="_blank">
            <div class="link-card-title">
              ${metadata.ogTitle || externalArticle.title}
            </div>
            <div class="link-card-description">
              ${metadata.ogDescription || externalArticle.description}
            </div>
            <div class="link-card-url">
              ${getDomainFromURL(completeURL)}
            </div>
          </a>
          <a class="link-card-image" href="${completeURL}" rel="noopener noreferrer nofollow" style="background-image: url(${metadata.ogImage || externalArticle.imageUrl})" target="_blank"></a>
        </div>
      `,
    };

    return widgetDiv;
  }

  function getDomainFromURL(url) {
    const domain = url.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i)[1];
    return domain;
  }

  const promises = [];

  visit(markdownAST, 'text', (node, index, parent) => {
    if (urlRegex.test(node.value) && parent) {
      const url = node.value.match(urlRegex)[1];
      const promise = fetchMetadata(url)
        .then((metadata) => {
          const cardNode = createCardNode(pluginOptions, metadata, url);
          parent.children.splice(index, 1, cardNode);
        })
        .catch((error) => {
          console.error(`Error fetching metadata for ${url}:`, error);
        });

      promises.push(promise);
    }
  });

  await Promise.all(promises);

  return markdownAST;
};

{
  "main": "markdown-link-card.js"
}

  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          { 
            resolve: './src/plugins/markdown-link-card',
            options: {
              externalArticle: { //ページ生成時に値が存在しなかった場合に使用されます。
                title: 'No title',
                description: 'No description',
                imageUrl: ' ', //リンク先にサムネイルがない場合に表示する画像を指定
              },
            },
          }, 
        ],
      },
    },
  ]

.link-card{
  display: table; 
  width: 100%; 
  border: 2px solid rgba(200,200,200);
  border-radius: 5px;
  background-color: rgba(255,255,255);
  transition: border .2s; 
}

.link-card:hover{
  border: 2px solid rgba(150,150,150); 
  transition: border .5s; 
}

.link-card>a{
  display: table-cell; 
  padding: 16px; 
  width: 100%; 
  max-width:0; 
  text-decoration: none; 
  background-color: initial; 
}

.link-card-title{
  margin-bottom: 8px; 
  font-size: 1.2rem; 
  font-weight: 700; 
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis; 
}


.link-card-description{
  height: 56px; 
  margin-bottom: 4px; 
  color: rgba(150,150,150); 
  font-size: .75rem; 
  word-break: break-all; 
}

.link-card-url{
  color: rgba(80,80,80); 
  font-size: .75rem; 
  word-break: break-all; 
}

.link-card-image{
  display: table-cell; 
  min-width: 220px; 
  height: 150px; 
  text-decoration: none; 
  background-position: 50%; 
  background-size: cover; 
  border-left: 1px solid rgba(200,200,200); 
  border-radius: 0 3px 3px 0; 
}

$card(ttps://doranarasi.com)