Optional table of contents

[choucavalier]

First of all, super excited by the new notebook implem', that i've been using extensively over the past two weeks. It's great!

I've been mostly working on pretty long notebooks, with multiple sections and figures, and I found that they would really benefit from a table of contents: ## and ### headings already get anchors, but there's no way to see where you are or to jump to another section

The tricky part is wide content: text is 640px but plots, tables and code take the full 960px, so a sidebar either squeezes them or ends up on top of them

I've been working on an opt-in version that I think deals with this nicely:

<notebook theme="air" toc>

The list floats at the edge of the window and highlights the current section. Nothing moves, figures keep their full width. When a chart, image, table, code block or aside passes under it, it collapses to small marks, and you can hover or tap them to open the list again. It's hidden on phones, so the mobile rendering doesn't change

You can also write toc="left" for the other side, toc="column" to make room for it instead of floating (kind-of like in Framework), or toc="marks" to always keep it collapsed

Without the attribute, notebooks render exactly as before

The branch is here: https://github.com/choucavalier/notebook-kit/tree/toc

Two questions:

1. is a new attribute on <notebook> ok? it's the natural place next to theme and readonly, but Desktop and the cloud editor share the same format and would probably drop it on save
2. would you rather keep only the bare toc? the extra options are about 50 lines and easy to remove

WDYT?

[choucavalier]

@Fil wdyt?

[Fil]

Hello Valentin, I don't think that's something we'd want to support as a code feature of notebook-kit; it would be nice to share as an add-on to a template, though.