DiscoTOC - automatic table of contents

pmusaraj · January 19, 2022, 1:05am

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

huynhthai824 · January 19, 2022, 7:49am

Here My link:

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

mentalstring · January 19, 2022, 11:33am

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:

simonk · January 19, 2022, 1:47pm

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

pmusaraj · January 19, 2022, 1:49pm

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.

simonk · January 19, 2022, 1:55pm

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.

pmusaraj · January 19, 2022, 2:00pm

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.

pmusaraj · January 20, 2022, 4:08am

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.

huynhthai824 · January 20, 2022, 5:37am

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

simonk · January 20, 2022, 10:20am

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

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:

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:

pmusaraj · January 20, 2022, 3:08pm

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.

simonk · January 20, 2022, 3:11pm

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

robbie.morrison · January 20, 2022, 8:49pm

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

Steven · January 23, 2022, 1:28pm

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?

pmusaraj · January 23, 2022, 5:32pm

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;
}

Steven · January 23, 2022, 7:56pm

It’s merged and working fine, thanks!

simonk · January 28, 2022, 10:40am

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?

pmusaraj · January 30, 2022, 10:27pm

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

tobiaseigen · January 30, 2022, 10:33pm

I have addressed this issue in the past by moving the embed code to the bottom of the post. Does feel a bit hacky but it works.

craigconstantine · February 2, 2022, 2:33pm

I have posts that have extra DIVs in their bodies. For example, On Storytelling - Public - Podcaster Community

The DIV which triggers the TOC generation is inside a DIV… and TOC notices that. But other headings, inside DIVs, don’t seem to get noticed by TOC.

…not the best screenshot. That’s an H2 in an arbitrary/just-for-styling DIV which does not appear in the TOC.

…not shown is the <div that triggers the TOC, which is inside the DIV with the crazy attribute/value pair…

updated hours later to add: Maybe just “:scope h1,” etc rather than requiring the headings be immediate children of the scope?

…also, this was mentioned in March '21, DiscoTOC - automatic table of contents - #255 by Ed_Bobkov

Topic		Replies	Views
Dark/Light Mode Toggle Theme component official , dark-mode-toggle	133	16034	November 20, 2024
Header Submenus Theme component official , header-submenus	87	36024	November 14, 2024
Discourse Doc Categories Plugin official , experimental , doc-categories	75	1690	November 8, 2024
Post Badges Theme component post-badges , experimental	126	15191	November 19, 2024
Discourse Central Theme — Meta Pre-Release Out Now! Theme feedback , experimental	139	15511	November 18, 2024

DiscoTOC - automatic table of contents

Related topics