Gatsbyブログ内のリンクをカード形式で表示するプラグインgatsby-remark-link-cardをリリースした
はじめに
年始から色々とある2024年であるが、自分にできることはあまりないし、実家にいても暇なのでいつものようにコードを書いている。
ブログ周りの改善をする過程で記事内のリンクをカード形式で表示したく、色々試していたらプラグインをリリースしていた。
どんなプラグインか
Markdown内のリンクをカード形式で表示するプラグイン。リンクはURLのみのパラグラフである必要があるので、基本的には以下のように上下に空行を置く必要がある。
(空行)
https://github.com/okaryo/gatsby-remark-link-card
(空行)すると、以下のようなカードが表示されるようになる。
設定自体も簡単で、プラグインをインストールしてgatsby-config.jsに指定するだけ。
npm install @okaryo/gatsby-remark-link-cardgatsby-transformer-remarkのオプションプラグインとして使用する。
// gatsby-config.js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`@okaryo/gatsby-remark-link-card`
]
}
}
];なぜ作ったか
自分のブログにもリンクカードを導入したいと思い、ライブラリを探していたが合わなかったというのが大きい。
Gatsbyブログでリンクカードを表示する方法としては以下のプラグインを使ったり、iframelyを使ったりする方法がよく取られている方法だ。
上記のプラグインについては、リンクカードを表示するためにMarkdown内のリンクを[$card](url)と独自記法で記述する必要があった。個人的には外部のライブラリを前提とした特殊記法に依存するようなMarkdownを書きたくなかった。iframelyを使う方法についてはアカウントを作ってAPIを叩く必要があり、面倒だった。
それなら、特殊記法を用いず、設定も簡単なプラグインを自分で作ってしまえと思い、上述のプラグインを自作してリリースした。
参考になったサイト・リポジトリ
GatsbyでRemarkプラグインを作成するドキュメントとしては以下が公式から出ている。MarkdownのASTを使用して要素を操作する。
MarkdownASTのような木構造を巡回するにはVisitorパターンが有効だが、それにぴったりのライブラリがある。unist-util-visitというライブラリで、visit(markdownAST, "paragraph", (node, index, parent) => {})のようにして用い、指定した種類のノードを簡単に取得・操作することができる。
これを使った実装として、remark-link-cardというリポジトリの実装が参考になった。ただし、このリポジトリで扱っているMarkdownASTとGatsbyで使用するMarkdownASTとは少し違っているっぽいので注意が必要。
また、リンクカードにはサイトのメタデータを取得する必要があるが、ここでもopen-graph-scraperというぴったりなライブラリがあった。URLを渡せば指定したサイトのメタデータをJSON形式で返してくれるので、自分でHTMLをパースする必要がなくかなり便利。
おわり
リンクがカード形式になるだけで記事がリッチになった感がある。
良ければ使ってみていただけると嬉しい。リポジトリも公開しているので、不具合や改善要望などあればお気軽にコントリビュートください。
