Notion API にアップデートが加わり、Divider （区切り）ブロックがきちんと返却されるようになったので、このブログも Divider に対応しました。

この区切り線です。divider 部分の実装は以下のような感じ。

Notion API から返却されるオブジェクトを jsx に変換

case 'toggle':
  return <Toggle key={id} text={value.text} children={value.children} />

case 'divider':
  return <hr className="w-full border-1 border-gray-300 dark:border-gray-400" key={id} />

case 'code':
  return (
    <Code key={id} language={value.language}>
      {value.text[0]?.plain_text}
    </Code>
  )

Notion API から返却されるブロックオブジェクトを HTML（正確には jsx）に変換するロジックを書いて、新たなブロック対応があるたびにここにロジックを追加していくということをしています。こんな感じで好きにカスタマイズしていけるのが自作ブログの楽しいところ。

Notion API のアップデート情報はこちら。

https://developers.notion.com/changelog/table-of-contents-and-divider-block-types-are-now-supported

Yuji Tsuburaya

このブログも divider ブロックに対応した（Notion API アップデート）