Discrepency between TOC component and auto sidebar

13protons commented 5 years ago

[x] I confirm that this is an issue rather than a question.

Bug report

Version

0.14.10

Steps to reproduce

Turn on auto sidebar in config.js
Create a page that has headings with gaps (i.e. an h3 inside an h1)
Add the [[toc]] component to the page
Observe a discrepancy between TOC and auto sidebar

This works:

With expected output:

auto sidebar picks up h3s when h2 is present

This doesn't (notice ### preceding 'Underlying' vs ##)

With this output highlighting difference between sidebar and TOC

auto sidebar ignores h3 without h2 despite toc working ok

What is expected?

Auto sidebar would index all headers on page (same as TOC)

What is actually happening?

Auto sidebar skips indexing headers if there's a gap in header hierarchy. It will render an h3 contained in an h2, contained in an h1, but will not render an h3 contained in an h1. the [[toc]] build-in does not have this problem.

Other relevant information

Your OS: MacOS Mojave v10.14.2
Node.js version: v8.10.0
Browser version: Chrome Version 71.0.3578.98 (Official Build) (64-bit)
Is this a global or local install? Local
Which package manager did you use for the install? NPM
Does this issue occur when all plugins are disabled?

shigma commented 5 years ago

So you actually want a sidebar similar to table of contents? It makes sense, but I really want to know what sidebar do you want the following title to generate?

# title1
### title2
## title3

13protons commented 5 years ago

hmmm, here's a test with the existing markdown-it TOC plugin that vuepress is already using:

kapture 2019-03-06 at 10 27 52

The goal of the sidebar is probably not to emulate the toc plugin exactly, but it seems to have some handle on when to hide a subtree and when to pick it back up that's out of sync with the default implementation used for the sidebar. That's really my only observation - internal consistency with two 'baked in' features.

13protons commented 5 years ago

Here's another screen cap that is better at showing the discrepancy

kapture 2019-03-06 at 10 37 24 :

shigma commented 5 years ago

Thanks for your issue. I understand your question. The truth is, at present, when using some kinds of "abnormal" heading, neither the TOC nor the sidebar behave satisfactorily. We may provide a unified and comprehensive solution in a future release.

13protons commented 5 years ago

Thanks for the followup - might be a good place for a PR if I have time to dig in

13protons commented 5 years ago

@Shigma one last question while I have you - are these the two different implementations?:

shigma commented 5 years ago

If you want to optimize TOC grouping behavior, you can modify this method: https://github.com/vuejs/vuepress/blob/ff8df663f2a9b6c7c792c5572dd5bdd186fad9d1/packages/%40vuepress/core/lib/client/components/TOC.vue#L32-L54

And contribution welcome!

vuejs / vuepress