トップ/記事一覧

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

📆2021/10/22（最終更新日：2021/11/25）🔖 Notion Blog Notion API Notion

🐈 「（少しマニアックな）Notion の使い方まとめ」という note マガジンでも、毎週1本 Notion の使い方に関する記事を発信をしています。もしよければそちらも覗いてみてください。

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

🐈

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

JavaScript
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