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

1
const visit = require('unist-util-visit');
2
const cheerio = require('cheerio');
3
const axios = require('axios');
4
const https = require('https');
5

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

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

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

19
    const completeURL = `h${url}`;
20

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

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

29
      const ogTitle = $('meta[property="og:title"]').attr('content');
30
      const title = $('title').text();
31
      const ogDescription = $('meta[property="og:description"]').attr('content');
32
      const Description = $('meta[property="description"]').attr('content');
33
      const ogImage = $('meta[property="og:image"]').attr('content');
34
      const Image = $('meta[property="image"]').attr('content');
35

36
      return {
37
        ogTitle: ogTitle || title,
38
        ogDescription: ogDescription || Description,
39
        ogImage: ogImage || Image
40
      };
41
    } catch (error) {
42
      console.error(`Error fetching metadata for ${url}:`, error);
43
      return {};
44
    }
45
  }
46

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

51
    const widgetDiv = {
52
      type: 'html',
53
      value: `
54
        <div class="link-card">
55
          <a href="${completeURL}" rel="noopener noreferrer nofollow" target="_blank">
56
            <div class="link-card-title">
57
              ${metadata.ogTitle || externalArticle.title}
58
            </div>
59
            <div class="link-card-description">
60
              ${metadata.ogDescription || externalArticle.description}
61
            </div>
62
            <div class="link-card-url">
63
              ${getDomainFromURL(completeURL)}
64
            </div>
65
          </a>
66
          <a class="link-card-image" href="${completeURL}" rel="noopener noreferrer nofollow" style="background-image: url(${metadata.ogImage || externalArticle.imageUrl})" target="_blank"></a>
67
        </div>
68
      `,
69
    };
70

71
    return widgetDiv;
72
  }
73

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

79
  const promises = [];
80

81
  visit(markdownAST, 'text', (node, index, parent) => {
82
    if (urlRegex.test(node.value) && parent) {
83
      const url = node.value.match(urlRegex)[1];
84
      const promise = fetchMetadata(url)
85
        .then((metadata) => {
86
          const cardNode = createCardNode(pluginOptions, metadata, url);
87
          parent.children.splice(index, 1, cardNode);
88
        })
89
        .catch((error) => {
90
          console.error(`Error fetching metadata for ${url}:`, error);
91
        });
92

93
      promises.push(promise);
94
    }
95
  });
96

97
  await Promise.all(promises);
98

99
  return markdownAST;
100
};

1
{
2
  "main": "markdown-link-card.js"
3
}

1
  plugins: [
2
    {
3
      resolve: `gatsby-transformer-remark`,
4
      options: {
5
        plugins: [
6
// highlight-start
7
          {
8
            resolve: './src/plugins/markdown-link-card',
9
            options: {
10
              externalArticle: { //ページ生成時に値が存在しなかった場合に使用されます。
11
                title: 'No title',
12
                description: 'No description',
13
                imageUrl: ' ', //リンク先にサムネイルがない場合に表示する画像を指定
14
              },
15
            },
16
          },
17
// highlight-end
18
        ],
19
      },
20
    },
21
  ]