DiscoTOC - automatic table of contents

I am using DiscoTOC for a long time, and it works fine with Chinese headings until recent update.

If there are multiple Chinese headings (including no ascii characters) in the post, it will only navigate to the first heading of one level when the navigation item on the right side is clicked. I believe this is because the DiscoTOC generates navigation items with the same id (because the headings are all in Chinese). So, the query selector will only find the first heading.

As a try, I forked the GitHub repo and pushed a little commit as

It seems to work in my site. If it looks good to you team, I can raise a pull request, or this bug need to be fixed in another way.

8 Likes

Thanks @topological :slight_smile: I’ve moved your bug report over to the DisoTOC topic itself to hopefully get it in front of the right people. :+1:

3 Likes

Thanks for the report and the PR. As noted in the PR, I have implemented a different fix, that doesn’t rely on headings having anchors as children.

(I’m happy to merge the translations in your PR, though.)

4 Likes

First off, this is a super helpful theme component for long posts!

However, there’s an issue with this theme component on mobile devices (at least on iOS). When I open a large table of contents, scrolling through the TOC doesn’t work on mobile like it does on a desktop.


The list contains Headings A-H, but I can’t scroll through it

The list appears to be scrollable, but a touchstart event prevents the list from being scrolled. Disabling the touch start event listener for the d-toc element seems to solve the issue.


I can’t see the version of the theme component we have on our forum, nor can I test this on a local install (since I can’t load it on a phone). So, if there is a fix I’m not aware of or if there’s anything I should, please let me know.

Thanks in advance :slight_smile:

3 Likes

Thanks for the report, the screenshots were particularly helpful in tracking down the issue. This is a problem that comes from core, one of the parent elements of the DiscoTOC mobile UI disables scrolling of its children, and this affected DiscoTOC. Should be fixed via FIX: Limit pan event handler to fix scrolling in TOC by pmusaraj · Pull Request #16673 · discourse/discourse · GitHub (it’ll likely be merged early next week).

4 Likes

Is this still working?

@pmusaraj I guess it’s possible that I haven’t set this correctly but I have installed the theme and the TOC I set up on a topic is not appearing on the discourse-docs version but it is appearing in the main topic

3 Likes

Hmm, I agree, the ToC seems not to be appearing in discourse-docs pages again. For example:

https://meta.discourse.org/docs?ascending=false&category=53&tags=themes&topic=91966

4 Likes

The mobile scrolling issue fix is now merged. I also added a compatibility fix for the discourse Docs view, you can see it in action here on meta.

6 Likes

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

Can confirm that’s been fixed as well :+1:

3 Likes

5 posts were split to a new topic: When ToC present, I lose access to the topic wrench?

The next time you update DiscoTOC you’ll probably notice that we’ve added a button to toggle between the topic timeline and the table of contents… let us know if you encounter any issues or have feedback about this new feature!

8 Likes

I love it! :heart_eyes_cat:

Did just have to refresh my browser to see it in this topic, because it’s that shiny and new! :sparkling_heart:

5 Likes

I’ve just made a minor update to this theme that ignores the trust level requirement for staff accounts, this more closely follows how Discourse’s settings behave.

6 Likes