notion-blogの改造メモ (5)

今までの改造リスト:

• https://manj.io/blog/notion-blog-custom-1
• https://manj.io/blog/notion-blog-custom-2
• https://manj.io/blog/notion-blog-custom-3
• https://manj.io/blog/notion-blog-custom-4

Notionは記事内にインラインで表を埋め込むことができる。ただ、notion-blogではそれを<table>として表示することができず、表を別途画像などの別の形式で埋め込む必要があった。

Notion内での表のイメージ ↓

せっかくなら表を使いたいということで、表示できるように改造することに。

notion-blogの/src/lib/notion/getTableData.tsにはblockのデータからcollection_view(notionにおける表)のデータを取得する関数が定義されているので、これを使って中身をひっぱってくる。

ただ、この関数は表の各行にslugが設定されてないとうまく動作しない。slugが定義されていない場合、

• 1行目のデータはindexがつかない単体のObjectとして出力される
• 2行目以降のデータは-1からdecrementされたindexがつく

みたいな謎仕様の動作になる。こんな感じ。

また、上の画像を見ると分かる通り、実際に定義した表のHeaderの順序とkeyの順序が一致していない。

このあたりを補正してあげるのは面倒だったので、

• 1行目は適当なデータで埋める
• 各Headerには<num>-というprefixをつけて後でsortとprefix削除を行なう

という手元での解決で妥協することにした。

データを取得するタイミングは[slug].tsxでのgetStaticPropsの中にして、typeがcollection_viewのものについてこれで取得したデータをひっつけてあげればよい。

これでサーバ側で生成した表データがクライアント側にjsonとして渡る。

クライアント側での処理として、 type == collection_viewのときに呼ばれる新しい関数を定義する。

components.Tableはcomponents以下でdynamic importされる関数で、以下のような感じ。

力技でsortとpushを繰り返してるのであんまり綺麗ではないけど、とりあえず動いた。

適当

Notion上で定義した表 ↓

実際に生成された表 ↓

まあまあって感じ。