notion-blogの改造メモ (5)

Posted: March 07, 2021

今までの改造リスト:

Tableの表示

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

Notion内での表のイメージ ↓

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

getTableDataの仕様

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

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

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

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

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

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

[slug].tsx内での処理

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

...waiting for Gist...

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

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

...waiting for Gist...

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

...waiting for Gist...

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

CSS

適当

...waiting for Gist...

実演

Notion上で定義した表 ↓

実際に生成された表 ↓

Header1Header2Header3
content1-1content1-2content1-3
content2-1content2-2content2-3
content3-1content3-2content3-3

まあまあって感じ。