Docusaurus: Support sidebars with links to anchors in the same page

[JoelMarcey]

Is this a bug report?

No. Feature request

Have you read the [Contributing Guidelines]

Why, yes, I have :)

Environment

N/A

Steps to Reproduce

N/A

Expected Behavior

Have a sidebar with links that don't go to different pages, but rather goes to anchors within the same page.

Actual Behavior

N/A

Reproducible Demo

N/A

[neilsutcliffe]

I would suggest this be auto generated from the markdown content.

Something like the following

## [Favourite Dinosaurs](#)

* T-Rex
* Raptor

And display an icon like ⚓ next to any of these.

[microbouji]

I can work on enabling this as a config option as discussed in babel/website#1582

Live demo of proposed UI: https://deploy-preview-1582--babel-new.netlify.com/docs/en/index.html

With the new option set to on, the html for the on page navigation will be generated from h2s and h3s in the markdown, and on big screens the main sidebar will switch to fixed position and the new sidebar will show up as well.

I'm thinking of making this a progressive enhancement only in browsers that @support the css "position: sticky" property instead of using polyfills.

[JoelMarcey]

Hi @microbouji. Thanks! We have PR https://github.com/facebook/Docusaurus/pull/349 that I would love for you to take a look at to see if it meets your standard for this feature. If so, we could use that (or make minor improvements). If not, would love to see what you come up with.

[microbouji]

Hi @JoelMarcey! That's a nice alternative and should probably be the default as it doesn't change the layout from fixed to full width. The separate sidebar that I proposed above could then be enabled with an option for folks who have long doc pages with many subheaders. Option could look like this:

anchorsNav: false (what we have now) | "inline" (PR #349) | "separate" (my solution)

I should have a PR tomorrow and we can iterate there more. Even if you don't end up needing the separate sidebar, the function to generate links from the headers can be reused even in the other PR.

[JoelMarcey]

@microbouji By the way, I am loving the new Babel site. You all have done really good work.

[yangshun]

I believe this feature is live after https://github.com/facebook/Docusaurus/pull/524. @microbouji correct me if I'm wrong 😄