【astro-notion-blog】右メニューに目次を追加してみた

概要

PCやタブレット環境向けに、QiitaやZennで見たことあるような見出し一覧をこのブログの右側に作ってみた。

仕組みとしてはNotionの「目次」に対するastro-notion-blogのコンポーネントである「src/components/notion-blocks/TableOfContents.astro」を流用することで簡単に作成できた。

今のブログで見出しの一覧を使いたいと思っていたところ、Notionブロックの中で「目次」というものがあり、作りたかったものそのものだった。

これはページ内のHeading1～Heading3を自動的に集計して階層表示してくれるNotionブロック。

このコンポーネントは目次ブロックをブログ上で再現するコンポーネントであり、目次ブロックの内容がそのままブログ上で表示される。

仕組みとしてはページ全体のブロックを引数（プロパティ）として受け取っており、Heading1～3要素を抽出してNotionと同じように配置することで再現している。

最初はrehype-slugとrehype-tocを使えば目次が簡単に作れると考えていたが、うまくいかず断念。

さらに調査すればなんとかなった可能性もある。

これらがmarkdownから目次を生成するものだったらastro-notion-blogはmarkdownを用意しない（仕組みがそもそも違う）ので無理ということはわかるのだが、rehypeの対象はmarkdownではなく生成されたHTMLを対象にするらしいので理論上可能ではあるはず。

しかしastro-notion-blogに目次を再現した機能があるし、今回はそれらを使って自分でなんとかしてみようとして本修正を行った。

今回作成したのは「src/components/BlogPostHeadline.astro」で、TableOfContents.astroと同じように記事全体のblockを受け取り、Heading1～Heading3を全て抽出してTableOfContentsに投げることで実現している。

この際、TableOfContentsのブロック情報（IDとか）が必要になるが、Notion上には実際に存在しない架空のブロックとなるため、IDなどは空文字、boolのプロパティはfalseにして渡している。

画面右側にメニューを用意するため、まずは全体レイアウトを修正。

ページ全体のパーツ。

メニュー領域の用意とその領域をstickyとして定義することで長い記事をスクロールしても見出しがついてくるようにした。

また、right_naviというslotを用意することで後述する[slug].astroから記事情報の流し込みを行う。

今回の設定では[slug].astroのみ右側のメニューを表示するようにしたため、記事以外のページでは空の右メニューでできてしまう。

後々良い使い方が思いついた時にでも実装しようと思う。

Notionの1記事に対応するパーツ。

修正した箇所はright_naviというslot追加することと、BlogPostHeadlineの定義。

今回の感想としては、思った以上にAstroやastro-notion-blogは改造しやすいということ。

正直なところ数日かかるかもと思っていた。

費用がドメイン費用くらいしかかからないのも好きな点。

これからもastro-notion-blogの改造は続けていきたい。

今回追加したような見出し一覧はNotionアプリ上で常に右側に表示といったことはできない。

もしやりたい場合はNotion BoostというChrome拡張機能を使えば実現できる。

しかしスマホやタブレットではChrome拡張機能は使えないため、結局パソコンでやるか、執筆体験が悪くなるのを承知でリモートデスクトップとかで自宅PCに繋いで実行しかないのが現状。

やはり外出用にMacBook(M1以上)がほしい。

ChromeBookでもChrome拡張機能は使えるのだが、やりたいことはNotionだけではないのと電池持ちや発熱面でMacBookは優秀なので。

一応iPhoneやiPadではSafari拡張機能が使えるので、Chrome拡張機能を自分で変換すればiPadでできるかもしれない。