Add a Table of Contents

[iray-tno]

Refs

• https://blog.ojisan.io/1st-blog-stack#%E7%9B%AE%E6%AC%A1%E3%81%A8%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97%E6%A9%9F%E8%83%BD
• https://rnote.work/gatsby-remark-autolink-headers
• https://www.if-blog.site/gatsby/gatsby-introduction/#%E7%9B%AE%E6%AC%A1
• https://takumon.com/2018/10/28/
• https://github.com/gatsbyjs/gatsby/issues/6896

[iray-tno]

IntersectionObserver looks like useful for this.

Refs

• https://css-tricks.com/sticky-table-of-contents-with-scrolling-active-states/
• https://note.com/kawa1228/n/nb198010ab653

[iray-tno]

And this

https://www.npmjs.com/package/react-intersection-observer

[iray-tno]

Memo: have to add redux for managing the state of the Table of Contents

• https://wp-kyoto.net/use-redux-in-gatsby-pj-with-typescript/#wrapRootElement%E3%82%92%E4%BD%BF%E3%81%86
• https://www.freecodecamp.org/news/how-to-get-started-with-gatsby-2-and-redux-ae1c543571ca/
• https://redux-toolkit.js.org/usage/usage-with-typescript <- with redux-toolkit maybe
• https://qiita.com/__sakito__/items/e446d0f0974f2e12a5f5 <- a qiita article about the toolkit
• https://github.com/le0nik/gatsby-plugin-react-redux <- no need?

[iray-tno]

• [x] impl header redux module
  • [x] reset state on navigate
  • [x] manage headers state from inView component's callback
  • [x] reconsider for state management of headers
    • It's not so simple because I want to keep changing style after the header goes upper
• [x] impl components
  • [x] split inView wrapper component into independent component
  • [x] impl wrapper for implement callback onInViewChange
  • [x] use those components for all headers (h1 to h6)
  • [x] change styles of inView header elements