DiscoTOC - automatic table of contents

[Moin]

@alltiagocom

Do you know if it’s possible to disable the behavior where the sub headings are hidden when the parent heading is not “in focus”?
I would like all headings to be visible at all times, otherwise it seems that there’s less content than there actually is.

DiscoTOC - automatic table of contents

If you prefer to have the table of content always fully expanded, try adding this CSS to your theme #d-toc li.d-toc-item > ul { max-height: 500em !important; overflow: visible !important; opacity: 1 !important; }

[alltiagocom (Tiago)]

Thank you and sorry for missing that…

Works like a charm! Really appreciate your time and help!

[alltiagocom (Tiago)]

Everything is working, but:

1. On mobile I don’t see the button “Table of Contents” as shown in the instructions:

2. The only way to see it is to add at least a comment/reply (I would expect it to show even if no replies were added?), but even then, what is shown is not the same as what is in the image:

Is it possible to make it show “Table of Contents”, not just the icon? I’m thinking that maybe it’s possible via CSS, but I was wondering if this is a new “feature” or something else I can change to show the text?

I even tried to change the default text, in case that was the issue, but no luck:

---

EDIT: I was able to add the text via CSS in a custom component, but still wondering if this is a bug or something?

@media screen and (max-width: 767px) {
  .d-toc-mini button::after {
    content: "Table of Contents";
    margin-left: 5px;
    font-size: 14px;
    vertical-align: middle;
  }
}

And I still haven’t figure out the issue of it only being visible at the bottom (instead of "sticky) when there’s no replies.

[Moin]

@alltiagocom

but I was wondering if this is a new “feature”

The screenshots in the first post are quite old. You won’t find any information about the button which allows you to toggle between timeline and toc when there is more than one post, or information about the toc for replies feature, in them.

The problem with the missing button on mobile was reported here:

DiscoTOC style is broken if there is no reply on mobile

Hello DiscoTOC style is connected to the .with-topic-progress class which is added to .topic-navigation if there are more than 1 post in the topic. So without reply the DiscoTOC style will broke. I think TOC should also be active if there is no reply in a topic because it doesn’t related with the reply counts. On desktop it works fine topics with no reply too. Here is a topic for testing: Customizing the topic list I think that would be consider to change this behaviour. It’s probabl…

Maybe you also want to support this feature request: Fully expand table of content, if you’d prefer official support instead of custom CSS.

[alltiagocom (Tiago)]

I was able to make it work when it doesn’t have a reply:

DiscoTOC style is broken if there is no reply on mobile

With my basic coding skills and some ChatGPT talk, I made it work, I believe. Created a custom component and put this in the CSS tab: @media (max-width: 767px) { #topic-progress-wrapper.sticky-bottom { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; } } and this in the JS tab import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { api.onPageChange(() => { const observer = new MutationObs…

I just added my feedback on that topic. Thanks.

[alltiagocom (Tiago)]

I noticed that something is broken.
On mobile, the TOC panel doesn’t slide overlaying the topic. It gets added at the bottom:

I thought it could be an issue with any of the other components, but I disabled them all and just left this one on.

---

EDIT: I noticed that this issue is only visible is the topic has no replies. I added a testing reply, and now it’s working. Even a simple Unlist > List, will work:

Bug…?

[murphyke (Kevin Murphy)]

I installed the DiscoTOC 2.1.0 theme component, but the option to generate a TOC isn’t showing up under the “+” in the composer dialog. I’m on Discourse 3.6.0.beta1-dev. In the “+” menu I see Quote whole post, Insert table, Hide details, Insert date/time, Add footnote, Build poll, and Blur spoiler.

Are there any other “won’t work with” scenarios? This site has the “Custom Header Links” theme component and a several plugins.

So far I tried it on a wiki topic post and a non-wiki topic post.

Test document:

# Top heading

## Second level heading

## Another second level heading

### Whoa, a third level heading

## Yet another second level heading

[Moin]

I guess you added the component to your theme and you have already tried to refresh the site in the browser after that (Just mentioning that because I sometimes forget).

Did you try the preview button of the theme? That can be helpful to check for a conflict with another component (Though I think it’s unlikely)

You can also try to add the text that the button in the composer menu adds to the post manually

<div data-theme-toc="true"> </div>

Does that work?

[murphyke (Kevin Murphy)]

Thank you so much for taking so much time in your response! I apologize, but the problem is with me and Apple. I am using Safari on a new Mac, and the “+” menu when it opens does contain the TOC option, but it is not visible in the list, and the menu does not flash the scrollbars at all that I can see (and they do not appear unless you scroll). The vertical alignment of the content just happened to be perfect, as if it contained N-1 items instead of N. Grrrr. I finally noticed when I tried this in Chrome, and by chance the N-1st item was cut in half, so I scrolled ….

[Moin]

I’m glad you found it.
I actually had similar problems once: Last item of reply composer gear menu inaccessible I haven’t tried it in a long time to see if it’s better now.