New Table of Contents element #30

shashankp · 2020-09-09T12:39:25Z

https://github.com/fonsp/Pluto.jl/issues/307

Datseris · 2020-09-10T13:10:22Z

My personal opinion, and motivation behind #307 is that a table of contents is much, much more useful when it is always visible, i.e. in the side bar. Having it only at the top of a 30 page long to document takes away a lot of the benefits I would say. Of course, it is still useful to have, and a good start. But, while scrolling all the way to the top to find it, I probably will come across the section I needed to find anyway.

fonsp · 2020-09-10T13:11:50Z

Yeah we can just add an option for position: fixed, right @shashankp ?

shashankp · 2020-09-10T13:14:05Z

@Datseris very true; will look into @fonsp suggestion; probably as an option to either keep in cell or move aside

Datseris · 2020-09-10T13:40:10Z

you rock, keep it up!

Datseris · 2020-09-10T13:42:05Z

src/Builtins.jl

+                )
+            ).map(el => el.id)
+
+            const headers = [...elementsOfType("h1"), ...elementsOfType("h2"),...elementsOfType("h3"),...elementsOfType("h4"), ...elementsOfType("h5"),...elementsOfType("h6")] 


Would it make sense to have the allowed headers as input argument? E.g. the user would provide the level depth they require (1 to 6) and only headers up to this depth are used in the ToC?

If LaTeX has any value here, I would argue that the default depth should be 3 (because in latex by default you get section numbering up to e.g. 2.2.3)

(but this is a minor comment - please don't let it hold this PR back)

Added the depth limit. ✅
Tempted to do auto numbering, but wouldn't it be jarring? a section name would have a number in the TOC, but not in the actual location. I'd rather let user do the numbering.

I don't know how the plugin of Jupyter does it, but the autonumbering there is reflected in both the TOC and the headers. So the headers will literally display 1.1 Header. But maybe this is too invasive or just too hard to do from the design of Pluto?

(to be honest I actually liked the auto numbering)

Yes, updating the user created content itself would be invasive & fraught with assumptions.
Lets see the feedback on auto-numbering only in TOC.

I've checked Jupyter again and they only change the display. So if I have markdown sections:

# Title ## Subtitle # Next title

they will be displayed (or rendered) as "1. Title, 1.1 Subtitle, 2. Next title", but when I double click the markdown cells to edit them, the numbers are not there. So it is only what displayed that is altered and thus I would call it non-invasive.

Header cells would need to store the numbering in their state making them special markdown cells. Adding this hidden state from an external PlutoUI addon seems invasive 🤔

shashankp · 2020-09-12T05:26:44Z

Using an existing element, but needs more appropriate colors

Is a regular element for smaller screen widths; this case would need an animation on the target element shoulder when clicked as it will scroll to target.

Looking into reactive updates; was running into into recursive updates

Really liked Observable's navigation, but thats cell based, not necessarily header links.
Feedback welcome.
@marius311

marius311 · 2020-09-13T02:06:47Z

Thanks for the tag, just tried it out and looks great already, plus super happy to see its being worked on since a TOC is a must-have for all but the shortest toy notebooks. Only quick comments I have is the chunky blue box looks slightly out of place in the Pluto UI, I think something sleeker with either a 1px border or even just a top border which matches the cells themselves would be better, but I'm sure you're going to play around it (and really happy to see the same-sized font + indent approach to showing depth, instead of the visual mess that JupyterLab's many-font-size TOC is still after many years 😄 ) And right now you have to re-evaluate the TOC cell for it to pick up changes to headings, but probably you're working on that too.

shashankp · 2020-09-15T19:44:19Z

Thank you for the inputs @marius311

✔ Improved UX
~ Instant updates - work in progress

fonsp · 2020-09-16T23:39:23Z

Instead of switching the visual style using

if condition
	print(io, some_extra_css)
end

it would be nicer to always output that CSS, and switch the style by including or not including a class (e.g. indent and aside) on the toc element. Otherwise two ToC elements would interfere, altough that's a rare use case.

mossr · 2020-10-06T03:40:47Z

It does move to the corresponding cell, but it puts the header in the middle of the window (instead of at the top).

Here's a video of what I mean:

mossr · 2020-10-06T03:42:58Z

Also @Datseris, I suppose this is the demo GIF you're looking for 😊

fonsp · 2020-10-15T10:45:58Z

Can you move it to its own file? :)

fonsp

Can you move it to its own file? It is not a HTML5 builtin

…p/PlutoUI.jl into TableOfContents-element

shashankp

Done

j-fu · 2020-11-13T20:14:51Z

Hi, tried this out - IMHO it's ready to go... Would use it immediately.

EDIT: it seems that the global link color has changed. Being non-intrusive as it is now in the TOC is perfect, but in normal text IMHO highlighting is now slightly too weak. Matter of taste of course...

j-fu · 2020-11-26T22:32:03Z

bump this :)

fonsp · 2020-12-29T19:07:58Z

Thanks everyone!

icweaver · 2020-12-29T22:11:59Z

It's beautiful!! Y'all are amazing 🚀🚀🚀

MasonProtter · 2021-04-11T16:40:25Z

So I see there's a docstring for the TableOfContents object, but it doesn't show up in https://juliahub.com/docs/PlutoUI/abXFp/0.6.3/autodocs/

Do the docs need to be rebuilt?

shashankp · 2021-04-11T18:10:25Z

So I see there's a docstring for the TableOfContents object, but it doesn't show up in https://juliahub.com/docs/PlutoUI/abXFp/0.6.3/autodocs/

Do the docs need to be rebuilt?

I guess the docs are not generated cos the TableOfContents struct is enclosed in a begin..end
cos of its macro usage (Base.@kwdef)

MasonProtter · 2021-04-11T18:13:16Z

Hm, I don't see that happening at the REPL:

julia> begin
           """
           docstring
           """
           Base.@kwdef struct Foo
               a = 1
           end
           x = 2
       end
2

help?> Foo
search: Foo floor pointer_from_objref OverflowError RoundFromZero unsafe_copyto! functionloc StackOverflowError @functionloc

  docstring

m3g · 2021-04-14T01:26:55Z

Is this released? I could not find how to use it at the end. Thanks.

feanor12 · 2021-04-14T07:13:44Z

Put this in a cell:

begin
  using PlutoUI
  TableOfContents()
end

ccmejia · 2021-09-15T13:23:05Z

It's beautiful!! Y'all are amazing 🚀🚀🚀

Really nice! Do you have a repo for this?
Thanks!
Crist.

icweaver · 2021-09-15T14:28:32Z

Oh, this is from the MIT course that @fonsp and others were involved in getting off the ground last Fall. I would definitely recommend checking out their updated Spring course when you have the time! The repository can be found here

ccmejia · 2021-09-15T15:52:14Z

Thank you for your quick reply! I had problems with the aside option for table of contents... It came from my zoom configuration of navigator... I need new glasses... How could you enable the dark view?

icweaver · 2021-09-20T17:41:31Z

I like using DarkMode. Dark Reader is also nice for just editing the CSS directly through your browser. I've also seen PlutoStyles.jl, but have not used it myself

new toc element

47aa334

Datseris reviewed Sep 10, 2020

View reviewed changes

shashankp added 5 commits September 12, 2020 11:46

toc aside

296e235

improve naming

9ec0587

mouse over and out events

4f58a66

right class for mouse hover actions

a839f3b

dont use hint

40e2518

shashankp marked this pull request as draft September 12, 2020 22:03

shashankp added 4 commits September 13, 2020 10:32

limit display text

c0c1e2b

css stuff

e50b4fd

smooth scroll to target

4e59a2c

highlight pluto-cell shoulder

d1d9c19

shashankp marked this pull request as ready for review September 13, 2020 11:16

shashankp marked this pull request as draft September 13, 2020 11:17

shashankp added 4 commits September 13, 2020 16:51

anchor full width is clickable

2c57f55

cleanup

63d1105

Better UI

9ca7b57

sync with origin

cef3ca5

shashankp added 2 commits September 17, 2020 00:47

react to cell_output_changed event

a865fd0

fun

709a963

shashankp mentioned this pull request Sep 16, 2020

Cell output changed event fonsp/Pluto.jl#445

Closed

shashankp marked this pull request as ready for review September 16, 2020 20:01

icweaver mentioned this pull request Nov 3, 2020

Table of Contents/Outline fonsp/Pluto.jl#629

Closed

fonsp requested changes Nov 5, 2020

View reviewed changes

shashankp added 3 commits November 7, 2020 17:25

move out of builtins into a separate file

fac4137

Merge branch 'master' into TableOfContents-element

743847d

Merge branch 'TableOfContents-element' of https://github.com/shashank…

67bae9f

…p/PlutoUI.jl into TableOfContents-element

shashankp commented Nov 7, 2020

View reviewed changes

shashankp requested a review from fonsp November 7, 2020 17:33

fonsp mentioned this pull request Nov 26, 2020

Add features to navigate big notebooks fonsp/Pluto.jl#721

Closed

pbouffard mentioned this pull request Nov 30, 2020

Table of contents / Automatic enumeration of Markdown headers? #51

Closed

fonsp added 3 commits December 29, 2020 18:29

Update TableOfContents.jl

f855693

Allow multiple ToCs

b1211ee

use mutationobserver instead of event

8805292

fonsp merged commit 6551162 into JuliaPluto:master Dec 29, 2020

shashankp deleted the TableOfContents-element branch January 3, 2021 19:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Table of Contents element #30

New Table of Contents element #30

shashankp commented Sep 9, 2020

Datseris commented Sep 10, 2020

fonsp commented Sep 10, 2020 •

edited

shashankp commented Sep 10, 2020

Datseris commented Sep 10, 2020

Datseris Sep 10, 2020

Datseris Sep 10, 2020

shashankp Sep 12, 2020 •

edited

Datseris Sep 12, 2020

shashankp Sep 12, 2020 •

edited

Datseris Sep 12, 2020 •

edited

shashankp Sep 22, 2020

shashankp commented Sep 12, 2020 •

edited

marius311 commented Sep 13, 2020

shashankp commented Sep 15, 2020

fonsp commented Sep 16, 2020

mossr commented Oct 6, 2020 •

edited

mossr commented Oct 6, 2020

fonsp commented Oct 15, 2020

fonsp left a comment

shashankp left a comment

j-fu commented Nov 13, 2020 •

edited

j-fu commented Nov 26, 2020

fonsp commented Dec 29, 2020

icweaver commented Dec 29, 2020

MasonProtter commented Apr 11, 2021

shashankp commented Apr 11, 2021

MasonProtter commented Apr 11, 2021

m3g commented Apr 14, 2021

feanor12 commented Apr 14, 2021 •

edited

ccmejia commented Sep 15, 2021

icweaver commented Sep 15, 2021

ccmejia commented Sep 15, 2021

icweaver commented Sep 20, 2021

New Table of Contents element #30

New Table of Contents element #30

Conversation

shashankp commented Sep 9, 2020

Datseris commented Sep 10, 2020

fonsp commented Sep 10, 2020 • edited

shashankp commented Sep 10, 2020

Datseris commented Sep 10, 2020

Datseris Sep 10, 2020

Choose a reason for hiding this comment

Datseris Sep 10, 2020

Choose a reason for hiding this comment

shashankp Sep 12, 2020 • edited

Choose a reason for hiding this comment

Datseris Sep 12, 2020

Choose a reason for hiding this comment

shashankp Sep 12, 2020 • edited

Choose a reason for hiding this comment

Datseris Sep 12, 2020 • edited

Choose a reason for hiding this comment

shashankp Sep 22, 2020

Choose a reason for hiding this comment

shashankp commented Sep 12, 2020 • edited

marius311 commented Sep 13, 2020

shashankp commented Sep 15, 2020

fonsp commented Sep 16, 2020

mossr commented Oct 6, 2020 • edited

mossr commented Oct 6, 2020

fonsp commented Oct 15, 2020

fonsp left a comment

Choose a reason for hiding this comment

shashankp left a comment

Choose a reason for hiding this comment

j-fu commented Nov 13, 2020 • edited

j-fu commented Nov 26, 2020

fonsp commented Dec 29, 2020

icweaver commented Dec 29, 2020

MasonProtter commented Apr 11, 2021

shashankp commented Apr 11, 2021

MasonProtter commented Apr 11, 2021

m3g commented Apr 14, 2021

feanor12 commented Apr 14, 2021 • edited

ccmejia commented Sep 15, 2021

icweaver commented Sep 15, 2021

ccmejia commented Sep 15, 2021

icweaver commented Sep 20, 2021

fonsp commented Sep 10, 2020 •

edited

shashankp Sep 12, 2020 •

edited

shashankp Sep 12, 2020 •

edited

Datseris Sep 12, 2020 •

edited

shashankp commented Sep 12, 2020 •

edited

mossr commented Oct 6, 2020 •

edited

j-fu commented Nov 13, 2020 •

edited

feanor12 commented Apr 14, 2021 •

edited