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)]

Ik heb de DiscoTOC 2.1.0 thema-component geïnstalleerd, maar de optie om een TOC te genereren wordt niet weergegeven onder de “+” in het composer-dialoogvenster. Ik gebruik Discourse 3.6.0.beta1-dev. In het “+” menu zie ik “Hele bericht citeren”, “Tabel invoegen”, “Details verbergen”, “Datum/tijd invoegen”, “Voetnoot toevoegen”, “Poll bouwen” en “Spoiler vervagen”.

Zijn er nog andere “werkt niet met”-scenario’s? Deze site heeft de “Custom Header Links” thema-component en verschillende plugins.

Tot nu toe heb ik het geprobeerd op een wiki-bericht en een niet-wiki-bericht.

Testdocument:

# Hoofding
## Tweede niveau kop
## Nog een kop van het tweede niveau
### Wow, een kop van het derde niveau
## Nog een kop van het tweede niveau

[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)]

Hartelijk dank voor de uitgebreide reactie! Mijn excuses, maar het probleem ligt bij mij en Apple. Ik gebruik Safari op een nieuwe Mac, en het “+” menu wanneer het opent bevat wel de TOC-optie, maar deze is niet zichtbaar in de lijst, en het menu toont helemaal geen scrollbalken die ik kan zien (en ze verschijnen pas als je scrollt). De verticale uitlijning van de inhoud was toevallig perfect, alsof het N-1 items bevatte in plaats van N. Grrrr. Ik merkte het eindelijk toen ik dit in Chrome probeerde, en toevallig was het N-1e item half zichtbaar, dus ik scrolde…

[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.

[putty (Derek Putnam)]

PSA, I’m getting this in my console log:

[awesomerobot (Kris)]

Thanks for reporting it! We’ve just updated the component to fix this

[RBoy]

Been seeing this warning in the logs after updating to the latest discourse build last week

Message

DiscoTOC theme/component is throwing errors:
TypeError: Failed to fetch dynamically imported module: https://ccc.xxx.com/theme-javascripts/fb8891ef8c38dab255d356c75588ff25d4a97805.js?__ws=ccc.xxx.com

Backtrace

TypeError: Failed to fetch dynamically imported module: https://ccc.xxx.com/theme-javascripts/fb8891ef8c38dab255d356c75588ff25d4a97805.js?__ws=ccc.xxx.com

Env

[Lilly]

are both your Discourse and TOC component up-to-date? I cannot reproduce those errors.

[RBoy]

Yes, discourse is updated as of Nov 11th 3.6.0.beta3-latest(aee3db7cdd) and components are update to date also. I’m also seeing a similar error for another component

Message

Discourse Top Contributors Sidebar theme/component is throwing errors:
TypeError: Failed to fetch dynamically imported module: https://ccc.xxx.com/theme-javascripts/ddc9fd1b23f86d280ce4a9dbefc40b751d5fb8b4.js?__ws=ccc.xxx.com

I’ve tried a rebuild also but it didn’t go away. What else can I try? Also what impact does this error have on the site?

[JBM]

Hey here:

Quick question here and sorry for the (probably) already reported issue; i did not find where.

It seems that there is a display issue with the (great) horizon theme (screenshot here on meta, with iOS on vertical display). Is it logged for some future release?

Tks .

[Moin]

@JBM

Is it logged for some future release?

Yes, there is a topic about this:

Opening TOC on iPad in portrait causes TOC to overlay text with no background

When viewing a topic in Documentation and opening the TOC on an iPad in portrait mode, this happens: [IMG_0008] The page can still be scrolled, and the links in the TOC clicked. Browser: Safari

[JBM]

Great. Tks for the quick response.

[dax (Daniela)]

@RBoy

Message

Discourse Top Contributors Sidebar theme/component is throwing errors:
TypeError: Failed to fetch dynamically imported module: https://ccc.xxx.com/theme-javascripts/ddc9fd1b23f86d280ce4a9dbefc40b751d5fb8b4.js?__ws=ccc.xxx.com

These errors do not affect Discourse itself. They originate from the client side, likely caused by users with unstable connections, ad blockers, or other browser extensions interfering. @david has just submitted a PR to suppress these warnings, as they are essentially unavoidable, stemming from external factors rather than anything within Discourse.

DEV: Stop logging theme load errors to logster