Cartesian Theater

記事のOGP自動生成を実装した。以下の記事とリポジトリを参考にしている。

React.FunctionComponentをReactDOMServer.renderToStaticMarkup()を使ってマークアップ文字列に変換して、ヘッドレスブラウザで描画した上でスクリーンショットを撮るという実装。とても勉強になった。

あとそのOGP生成用の画面描画にimgタグを使いたかったけどNext.jsによってnext/imageの使用を強制される。ただそれを使うと描画がうまくいかないのでちょっと困っていた。

どうやらこれはESLintの設定で回避できるらしく、.eslintrcの"rules"の項目に"@next/next/no-img-element": "off"と設定するとimgタグを使ってもコンパイルエラーにならなくなった。

しかしこういうことを書いているとコードブロックが書けるようにしたくなる。ただNotion APIではコードブロックはunsupportedと言われて無視されてしまうので対応待ち。