Make ToC Component

[Jeonghyun109]

indicate current location

https://github.com/Kaist-ICLab/iclab-newhomepage/assets/65295325/428ef6e0-bb97-4c7c-b3aa-b20aa4f19908

[highjun]

Make ToC referring velog.io

[Jeonghyun109]

Table of Contents Implementation

Option 1. Intersection observer

• pros: simple code, better performance (async callback)
• cons: ToC highlighting issue (not working in quick scrolling scenario)

Option 2. Scroll event

• pros: solve ToC highlighting issue
• cons: complex code

Reference intersection observer vs scroll event for ToC

[Jeonghyun109]

Table of Contents Implementation

Option 1. Intersection observer

• pros: simple code, better performance (async callback)
• cons: ToC highlighting issue (not working in quick scrolling scenario)

Option 2. Scroll event

• pros: sole ToC highlighting issue
• cons: complex code

Reference intersection observer vs scroll event for ToC

@highjun Which option do you prefer?

[highjun]

페이지의 현재 위치에 맞게 조정해 주세요. 현재 2019 섹션을 보고 있는 경우 앞뒤로 2개씩, 총 5개를 표시하도록 해주시면 됩니다.

ToC의 경우, h3까지의 것만을 고려하고 짜시면 됩니다. 해당 ToC는 heading의 title, heading level, link(anchor)를 parameter로 받는다고 고려해주세요.

수고하세요!