Implement TableOfContent #67 with aside toc

[famaridon]

Hello I implemented multiple tocMode=navbar|page|aside (as enhancement #67).

I also added documentation and samples in /exempleSite/content/cont/toc

Can you add it to your very nice theme ?

[matcornic]

A big thanks for a big PR ! I may need some time to review it though.

[famaridon]

if you need some help say me. I will help you with pleasure.

[matcornic]

I functionally tested your PR and it looks pretty neat, congrats 👍 . I have following remarks though:

1. The pages with aside mode are kind of broken in mobile version: http://recordit.co/WjLFoezE9w
2. Could you add a global option to let the user choose a mode, once and for all. But keep local options when user want to specifically change the mode of a given page.
3. Could you add a disclaimer on each example page to show the differences. At first, I searched something special in "navbar" example... until I understood that it was the normal mode ^^
4. Could you set a "navbar" example page as first page in the toc menu as it's the default.

I will do a more thorough technical review when you're ready.

Note: don't worry, I will translate french pages :p

[famaridon]

hi I think it's all done.

1. max-width is needed with display: flex;. I also remove scrolling on toc on mobile devices.
2. Now we can add tocMode in config.toml to change the side default mode.
3. I added it but it's not realy visual, but I don know how to make it more visual.
4. ordered

[s-leray]

Hi,

Could you implement an automatic switch mode ? My users works on laptop or desktop.

On a laptop, I rather keep toc in navbar. On a desktop (resolution 1600x900 and higher) I rather switch to the mode aside.

Hope you will. Aside toc is a real good idea. Thanks !

[famaridon]

Hi the aside mode switch to page mode with this css media query in hugo-theme-toc.css file :

@media only all and (max-width: 48em)

I think you can overwrite it with custom css.

[famaridon]

Hi,

when do you think you can finish code review?

[famaridon]

hello can you finish this pull request ?

[famaridon]

up

can you finish this pull request plz

[nlsrchtr]

@famaridon great work! Looking also forward to have this merged into the main theme. Any blockers on that, @matcornic?

[pocc]

@matcornic This is a cool feature! Are there any updates?

[famaridon]

up

[famaridon]

one more up

[RobFog]

+1

@famaridon Do you have a screenshot or an example website of this feature?

[famaridon]

Hi @RobFog,

you can find a sample https://process-sdk-draft.doc.moovapps.com/rest/

[RobFog]

Thank you very much!

[famaridon]

Is their any problem with the merge request ?

[matalo33]

Is their any problem with the merge request ?

Hi @famaridon, been a bit busy with changing jobs and taking some time off. I'll get to this when possible. In the meantime I do notice that it has a conflict that'll need resolving before rebase & merge.

Thanks for the contribution

[famaridon]

Ok I understand :)

I have tried to merge it on my fork.

Their is a problem with css. I can try to work on it. Their is an other problem with scrollspy. I think it's better to remove this feature because it's not mandatory and it can be hard to maintain.

Else all works well.

[McShelby]

Thanks @famaridon, this looks pretty slick and I like the idea.

Sadly there are some issues at least with the page on your example page.

• using Chrome 85, the page looks broken
• using FF 81, the page looks pretty good, but the toc is running vertically off the visible area and there is no scroll bar
• long titles are wrapping around into the next line, making the toc hard to read and difficult to discern the structure of the document

[thrix]

Eagerly waiting for this!

[famaridon]

I'm sorry but I can't work on it I'm currently too busy