「Gatsby JS」ブログカードのプラグインを追加する

ブログカードとは

https://masalib.hatenablog.com/entry/2019/03/12/100000

を下記のようなビジュアル的のリンクに変更してくれる機能です masalib.hatenablog.com

インスグラムとかTwitterのリンクを追加したいのでプラグインを導入する事にした

github.com

手順

プラグインをインストールする

gatsbyにはプラグインが用意されているのでインストールする。
なお、ローカルで動かしているサーバー（gatsby develop）を停止してください

$ npm install --save @weknow/gatsby-remark-twitter

プラグインの設定を追加する

gatsby-config.js

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `@raae/gatsby-remark-oembed`,
            options: {
              providers: {
                // Important to exclude providers
                // that adds js to the page.
                // If you do not need them.
                exclude: ["Reddit"]
              }
            }
          }
        ]
      }
    },

念のために差分

差分のソース

確認

変更したいリンクはかならず改行で囲わないといけない

例

## Instagram

https://www.instagram.com/p/Bof9WhgBmY2/

インスグラムのリンクが変換された結果

## Twitter

I'm sure I'll write a lot more interesting things in the future.

https://twitter.com/raae/status/1047849320865775617

Twitterのリンクが変換された結果

はてなブログは認識されなかった・・・＼(^o^)／