DiscoTOC - automatic table of contents

Anything in /logs? These 500s should have more details in logs.

2 Likes


Hello Joe,
I wonder why table of content not Full right display!
What did i do wrong? So, can you fix for me? Thank you!

2 Likes

Can you post a link to your site? I suspect the issue is due to styling in your theme.

2 Likes

Here My link:

https://whois.nhachinhchu.org/t/bang-gia-xem-data-nha-chinh-chu/63389

1 Like

Sorry to the interrupt the ongoing discussion. Found something that I’m not sure if it has been reported already.

If the post has a link on a header, the number of clicks is also shown on the TOC entry:

image

image

2 Likes

Since this update, I’m seeing an error on discourse-docs pages that have a table of contents. For example, on this page on Meta, the ToC isn’t displayed, and I see an error in my browser dev tools:

On my site, I also see a banner at the top of the page saying “Posts may not display correctly because one of the post content decorators on your site raised an error. Check the browser developer tools for more information.”

3 Likes

Thanks @simonk, I just (2 minutes ago!) merged a fix for that issue. Please update the component on your site, and let me know if the banner on your own site is persisting.

3 Likes

Thanks for the reply! The error is gone, but the ToC is not displayed within the discourse-docs version of the page. Before yesterday’s update, the ToC was displayed on the discourse-docs version of the page as well as the “normal” version.

(This isn’t urgent for me - I deployed the update on a staging site, not production, so it doesn’t matter that it’s not working properly)

Edit: I’m running 2.8.0.beta11 (42c71789f9), if that makes any difference.

2 Likes

Yeah, I see what you mean. Unfortunately, my changes to TOC use an outlet in the topic view that is missing in docs. Will look into it.

3 Likes

Made a few more changes to the component today, they should address the issues raised by @mentalstring and @simonk. In your case, Simon, you need a full rebuild because you need to pull an update to the docs plugin as well.

@huynhthai824 it’s very likely that your issue will be fixed once you update the component.

4 Likes

Tks so much, I’m so happy, My issue is solve.
Thank again…

1 Like

After a full rebuild, I can confirm that the ToC appears correctly on the discourse-docs page - thanks a lot :+1:

I see you’ve also now restricted the ToC to 2 levels. Given the horizontal space, I think this is reasonable, but it means that third-level headings are displayed in the ToC at the same nesting level as their parents.

ie. at the moment, this text:

# First Heading
## First Subheading
### Child of First Subheading
### Child of First Subheading
## Second Subheading
### Child of Second Subheading
### Child of Second Subheading
# Second Heading

Produces this ToC:

image

I wonder if it would be better for third-level headings and below to be excluded from the ToC altogether?

Also, the DOM structure doesn’t look quite right - each second level item is a <ul> with a single <li> inside it:

image

4 Likes

Good catch. I’m not sure how often we use 3+ levels, but it’s possible to reintroduce them, it shouldn’t be too complicated.

Good catch, again. This one was a small mistake, it should be fixed once this PR is merged.

3 Likes

If you’re in the mood for feature requests, perhaps the max depth could be controlled via a setting… :wink:

5 Likes

In my experience, the ToC feature only works on the first posting but not on subsequent postings. Is this correct? If so, could my remark be treated as a feature request therefore? BTW, the ToC, even on the first posting, is a really great addition. R

Hello everyone, I have an issue since the last upgrade on this great theme component, but on mobile only. When I click on the table of contents button, the slider with the full toc is not opening.

If I use a very small window in Desktop, this button and slider works great. So it might be an issue on Android only.

Here is the log on my up-to-date (Discourse and TOC) forum:

Message

Uncaught TypeError: Cannot read properties of null (reading 'classList')
Url: https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr
Line: 36
Column: 49
Window Location: https://iunctis.fr/t/le-mensuel-01-decembre-2021/9591

Backtrace

TypeError: Cannot read properties of null (reading 'classList')
    at n.showTOCOverlay (https://iunctis.fr/theme-javascripts/671f772e071bd55050592ff8541b659afe421259.js?__ws=iunctis.fr:36:49)
    at e.n._join (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:412333)
    at e.n.join (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:409358)
    at h (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:273784)
    at https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:65110
    at a (https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:260923)
    at https://iunctis.fr/assets/vendor-96a5eaa8d436066b954c21ae5afb7f504310945c679465a2f1ba46b429a95edf.js:36:65054
    at n._triggerAction (https://iunctis.fr/assets/application-945e3f0cb654a8c23b30e86f5e955be5599a8330d68ce75e97b8228ad45ff6fd.js:1:1254524)
    at n.click (https://iunctis.fr/assets/application-945e3f0cb654a8c23b30e86f5e955be5599a8330d68ce75e97b8228ad45ff6fd.js:1:1254160)

Env

HTTP HOSTS: iunctis.fr

If I use an android user agent in my firefox desktop version, I have this error if I click on the button in this forum:

Uncaught TypeError: document.querySelector(...) is null
    showTOCOverlay 4916e6ed2a984e00537fe797b799637f1a801ffe.js:374
    _join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
    join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
    p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
    An _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:1147
    o _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2785
    An _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:1147
    _triggerAction _application-2646ad3bbed41e42bb77806dc41fbea2.js:489
    click _application-2646ad3bbed41e42bb77806dc41fbea2.js:488
    trigger _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2560
    n _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2422
    _run _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4034
    _join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
    join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
    p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
    handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2574
    o _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2785
    handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2574
    handleEvent _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2499
    setupHandler _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2524
    dispatch _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:347
    handle _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:342
    add _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:342
    Oe _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:339
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:123
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:116
    Oe _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:339
    on _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:358
    initialize _application-2646ad3bbed41e42bb77806dc41fbea2.js:3354
    initialize _application-2646ad3bbed41e42bb77806dc41fbea2.js:62
    runInstanceInitializers _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2730
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4074
    walk _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4064
    each _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4056
    topsort _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4056
    _runInitializer _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2733
    runInstanceInitializers _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2730
    _bootSync _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2604
    didBecomeReady _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2623
    invoke _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3963
    flush _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3955
    flush _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3969
    _end _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4032
    end _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3988
    _run _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4034
    _join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:4033
    join _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:3999
    p _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2870
    bind _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:2873
    u _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:272
    c _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:273
    setTimeout handler*a/< _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:274
    l _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:265
    fireWith _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
    fire _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
    l _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:265
    fireWith _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:266
    ready _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
    z _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
    EventListener.handleEvent* _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:283
    <anonymous> _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:109
    <anonymous> _vendor-64dba8b874ef11bbef3b2bce2fbcf6cc.js:109
4916e6ed2a984e00537fe797b799637f1a801ffe.js:374:18

On my phone, I have Chrome version 97.0.4692 if it helps

Am I the only one who experience this?

2 Likes

This is a recent regression due to a change in core, I’ve got a fix ready in FIX: Restore outlet in mobile views by pmusaraj · Pull Request #15683 · discourse/discourse · GitHub, once that is merged, you can rebuild your site and the issue should be fixed. Sorry about that.

Last week, I also added back the third indentation level for headings in the component, as mentioned by Simon above.

I am hesitating to add a setting here, the vast, vast majority of use-cases don’t need it. And, the component has classes for each level as well, so if you want to hide the 4th and 5th level, you can do so with this css:

li.d-toc-h4, li.d-toc-h5 {
  display:none;
}
7 Likes

It’s merged and working fine, thanks!

5 Likes

I noticed that the <div data-theme-toc="true"> </div> at the top of a topic introduced extra margin. For example:

I’ve added this to my theme, which seems to fix it:

// ToC elements at the top of the post introduce unwanted
// space. Discourse sets the top margin of the first child in the post
// to zero, but this doesn't work when the ToC is the first
// child. Instead we'll set the top margin of the element following
// the ToC to zero.
div[data-theme-toc="true"] + * {
    margin-top: 0px;
}

Perhaps something like that needs to be added to the component?

7 Likes

Good catch, I’ve added that CSS rule in this PR: https://github.com/discourse/DiscoTOC/pull/30

4 Likes