New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TOC min / max header level configuration #1782

Closed
mrmanc opened this Issue Aug 10, 2018 · 9 comments

Comments

Projects
None yet
4 participants
@mrmanc
Contributor

mrmanc commented Aug 10, 2018

Description

Really pleased to see that there is a table of contents feature! I’d love to be able to configure the min and max header levels to include. I’ve half accomplished this by overriding the toc.html to use min: 1 and max: 6, but the style doesn’t work with the nested lists properly. Ideally, the TOC entries would continue to indent up to the maximum. I’d offer a pull request but the styling is a little beyond my skillset.

Expected behavior

Specify following in front matter:

layout: single
toc: true
toc_min_header: 1
toc_max_header: 6

Headings from <h1> to <h6> should appear in the table of contents, and <h3> should be more indented than <h2>.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Aug 10, 2018

Owner

You have a published version somewhere I can look at to see if it's a simple CSS fix or not.

Getting the nested lists to indent properly is tricky and causes all sorts of layout issues past a level or two. That's partially why I limited it. That and the space is so narrow that after a few indents you get text that normally fit on one line is broken up into 3 or more lines... which looks ridiculous.

Owner

mmistakes commented Aug 10, 2018

You have a published version somewhere I can look at to see if it's a simple CSS fix or not.

Getting the nested lists to indent properly is tricky and causes all sorts of layout issues past a level or two. That's partially why I limited it. That and the space is so narrow that after a few indents you get text that normally fit on one line is broken up into 3 or more lines... which looks ridiculous.

@mrmanc

This comment has been minimized.

Show comment
Hide comment
@mrmanc

mrmanc Aug 13, 2018

Contributor

Here’s a published version with plenty of headings to work with: https://markcrossfield.co.uk/minimal-mistakes-toc/

If there isn’t enough space for indents, is changing the text size an option to indicate the level?

Contributor

mrmanc commented Aug 13, 2018

Here’s a published version with plenty of headings to work with: https://markcrossfield.co.uk/minimal-mistakes-toc/

If there isn’t enough space for indents, is changing the text size an option to indicate the level?

@luispuerto

This comment has been minimized.

Show comment
Hide comment
@luispuerto

luispuerto Aug 14, 2018

I'm interested in this feature too! I would like to be able to have a toc with at least a couple more levels.

luispuerto commented Aug 14, 2018

I'm interested in this feature too! I would like to be able to have a toc with at least a couple more levels.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Aug 14, 2018

Owner

Adding a few more lines of CSS seems like it could fix the indents.

image

I added these lines and seems to do the trick. Could you link me to the Markdown source for this page? I'd like to add it as a test so I can tweak the indents better and make sure the new styles don't break anything.

.toc__menu li ul li ul > li a {
  padding-left: 2.5rem;
}

.toc__menu li ul li ul li ul > li a {
  padding-left: 3rem;
}

.toc__menu li ul li ul li ul li ul > li a {
  padding-left: 3.5rem;
}
Owner

mmistakes commented Aug 14, 2018

Adding a few more lines of CSS seems like it could fix the indents.

image

I added these lines and seems to do the trick. Could you link me to the Markdown source for this page? I'd like to add it as a test so I can tweak the indents better and make sure the new styles don't break anything.

.toc__menu li ul li ul > li a {
  padding-left: 2.5rem;
}

.toc__menu li ul li ul li ul > li a {
  padding-left: 3rem;
}

.toc__menu li ul li ul li ul li ul > li a {
  padding-left: 3.5rem;
}
@mrmanc

This comment has been minimized.

Show comment
Hide comment
@mrmanc

mrmanc Aug 14, 2018

Contributor

That looks great!

Apologies—the source would have been useful information for you… didn’t think about the fact my CNAME obscures the original repo address!

https://github.com/mrmanc/minimal-mistakes-toc/blob/master/index.html

Contributor

mrmanc commented Aug 14, 2018

That looks great!

Apologies—the source would have been useful information for you… didn’t think about the fact my CNAME obscures the original repo address!

https://github.com/mrmanc/minimal-mistakes-toc/blob/master/index.html

@allejo

This comment has been minimized.

Show comment
Hide comment
@allejo

allejo Aug 15, 2018

Contributor

Yo @mmistakes, me again!

A while back it was requested to allow jekyll-toc to add classes based on the heading level. It's the item_class parameter to the snippet and here's an example of how to use it.

Just a friendly FYI if you'd like to give it a try to avoid so much CSS nesting.

Contributor

allejo commented Aug 15, 2018

Yo @mmistakes, me again!

A while back it was requested to allow jekyll-toc to add classes based on the heading level. It's the item_class parameter to the snippet and here's an example of how to use it.

Just a friendly FYI if you'd like to give it a try to avoid so much CSS nesting.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Aug 15, 2018

Owner

Thanks @allejo, this is helpful.

Owner

mmistakes commented Aug 15, 2018

Thanks @allejo, this is helpful.

mmistakes added a commit that referenced this issue Aug 15, 2018

Reduce padding and adjust toc `font-size`
Fit more text to handle indentation better.

Ref: #1782

@mmistakes mmistakes closed this in 3b77428 Aug 15, 2018

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Aug 15, 2018

Owner

Merged in enhancements to support nested TOC levels 1-6 on the master branch.

An example can be seen here.
https://mmistakes.github.io/minimal-mistakes/layout-table-of-contents-indent-post/

Owner

mmistakes commented Aug 15, 2018

Merged in enhancements to support nested TOC levels 1-6 on the master branch.

An example can be seen here.
https://mmistakes.github.io/minimal-mistakes/layout-table-of-contents-indent-post/

@mrmanc

This comment has been minimized.

Show comment
Hide comment
@mrmanc

mrmanc Aug 15, 2018

Contributor

Awesome, thanks for your work on this—our deep documentation page will look much better :)

Contributor

mrmanc commented Aug 15, 2018

Awesome, thanks for your work on this—our deep documentation page will look much better :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment