Gatsbyブログ内のリンクをブログカードにする

Gatsby ブログ内に貼ったリンクを「はてなブログカード」のように表示したい。 でも毎回 iframe を書くのも面倒。リンクを貼り付けるだけでブログカードとして表示したい。

ということで、既にある Gatsby プラグインをカスタマイズしてブログカード埋め込み機能を作った時のメモを残しておきます。

作ったブログカードの見た目

Markdown 内にリンクを貼ると、↓ のようにブログカードが表示されます。
こちらのリンクは参考にさせていただいた Gatsby プラグイン。

hgezim/gatsby-remark-link-unfurl

Transform your boring old blue-underlined links in your Gatsby blog to prevew links à la Slack - hgezim/gatsby-remark-link-unfurl

https://github.com/hgezim/gatsby-remark-link-unfurl

やったこと

gatsby-remark-link-unfurlはリンクを Slack 風に展開してくれるプラグインです。 ビルド時にリンク先のタイトル, 説明文, 画像 URL などをキャッシュしてくれます。

僕はこのプラグインをソースコードをローカルに Clone して、見た目だけ手を加えたうえで Gatsby ブログ本体にプラグイン追加して利用しました。

ブログカードのプラグインをつくる

まずはローカルにソースコードを Clone して、名前をgatsby-simple-blog-cardに変更。

$ mkdir ./plugins
$ cd ./plugins
$ git clone https://github.com/hgezim/gatsby-remark-link-unfurl.git
$ mv ./gatsby-remark-link-unfurl ./gatsby-simple-blog-card

はてなブログカードの見た目を参考に、transformLinkToUnfurledNode.ts内の template を整える。

package.json 内のパッケージ名を修正して、まずビルド(yarn prepublish)してみたところエラー。 typescript が足りないようなので追加。

$ yarn add typescript

他にも index.ts 内でコンパイルエラーが発生したので適当に解消。
もう一度ビルドを実行してビルドが成功することを確認。

Gatsby ブログのパッケージに追加

ローカルのプラグインを Gatsby ブログに追加する。

$ yarn add ./plugins/gatsby-simple-blog-card

gatsby-config.js の設定

gatsby-remark-link-unfurlの READEME を見て設定。 僕の環境ではgatsby-transformer-remarkに関連付けて設定。

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-simple-blog-card`,
            options: {
              processedUrlsFile: `${__dirname}/link-cache/cache.json`,
            },
          },
        ...省略...

あとは、ブログ記事の Markdown にリンクを貼り付ければ勝手にブログカードになる。