🍭 ToC: follow scroll location & styling updates

fonsp commented 1 year ago

Updates:

The header that is currently in view is highlighted (using IntersectionObserver). It even works when you click-to-scroll on an item!!
A new option include_definitions to include Julia variable/function definitions in the ToC
New flat style, matching https://plutojl-preview.netlify.app/docs/
Use system-ui font stack instead of Alegreya Sans
New icons instead of emoji to match Pluto's style
Support for HTML inside headers: images, latex, highlighting, etc
Hover on long title names to see the complete text
Small margin above h1 headers, creating groups of all contained subheaders
Fix invalidation bug that caused old ToC to sometimes continue rendering in the background
Using HypertextLiteral

https://user-images.githubusercontent.com/6933510/191618623-86e4b349-12c5-4755-8315-95aa7b204d77.mov

github-actions[bot] commented 1 year ago

Try this Pull Request!

Open Julia and type:

  julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/JuliaPluto/PlutoUI.jl", rev="restyle-toc")
julia> using PlutoUI

Or run this code in your browser:

fonsp commented 1 year ago

Before	After

fonsp commented 1 year ago

https://user-images.githubusercontent.com/6933510/191730762-a85871b7-aeae-4b37-8924-ac35acb48899.mov

JuliaPluto / PlutoUI.jl

🍭 ToC: follow scroll location & styling updates #226

Try this Pull Request!