oEmbed で YouTube や Twitter などの外部のコンテンツを取得して埋め込むために、remark-embedder を導入した。
この手のプラグインはいくつか存在するが、取得したコンテンツをキャッシュして次回以降のビルドを高速化する仕組みがあるのが採用のポイント。ただ、公式のキャッシュの実装については、コンテンツごとにファイルが作られてキャッシュの検索性が悪かったり、バックエンドのライブラリが要件に対して過剰な感があって好みではなかったため、シンプルなものを自作した。
出力をシンプルに単一の JSON ファイルにしているというのと、ビルド中はメモリ上の操作だけで完結して、Astro Integration のライフサイクルを使って最後にファイルに書き出すというのが若干トリッキーではあるけど効率はよくて気に入ってる。
出力されたキャッシュを git commit
してしまうことで、ビルド時にインターネットに出る必要がなくなって速度的にも安定性的にもよくなった。
さらに、handleHTML
を使って Astro のコンポーネントでラップするということもしている。MDX を使うことで、記事の中に Astro や React のコンポーネントがあってもレンダリングできる。取得した HTML を直接配置するよりも、コンポーネントになっていることで Astro のスコープ付きスタイルが使えるので調整しやすくて便利。
# handleHTML
と cache
を組み合わせたとき、キャッシュが存在すると handleHTML
が効かない問題があったんだけど、Pull Request を投げたら反映してもらえた。よかった。