DiscoTOC - automatic table of contents

[topological]

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

fix wrong id with non-ascii

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.

[JammyDodger]

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

[pmusaraj (Penar Musaraj)]

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

[Awesome_E]

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

[pmusaraj (Penar Musaraj)]

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

[jerry0 (Jerry)]

@simonk

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

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

[simonk (Simon King)]

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

[pmusaraj (Penar Musaraj)]

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.

[mksafi (M.K.)]

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

[Awesome_E]

Can confirm that’s been fixed as well

[awesomerobot (Kris)]

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!

[tobiaseigen]

I love it!

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

[awesomerobot (Kris)]

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.

[fbpbdmin (deepblue)]

this component works nicely for the first post, thanks for this nice one…

wonder if possible to do the autoTOC for the posts below as well… that seems a common case when try to document something using one post and comments below…
say, when browsing to the main post or replies below, if the post/reply has titles/subtitles defined, it auto shows its TOC, otherwise shows the default timeline thing…

I did not read this long thread, did a quick search, seems not discussed…

thanks…

[Moin]

Disco TOC for replies

For anyone who wants to apply DiscoTOC in their replies, I did this part of the work in my own fork! Now it can apply TOC to any post and it works fine, just like it does on the OP. It seems that the official team doesn’t think it’s necessary to apply DiscoTOC in the replies, so I won’t open a pull request. But you can use my modified version! https://github.com/Lhcfl/DiscoTOC-edited

[fbpbdmin (deepblue)]

another question

somehow, I don’t see the button to switch between content and TOC
the same using the official disco-toc or @Moin 's forked version…
is there a setting for this? seems not… hmm…
my system is on discourse 3.2.1

someone could give a hint? thanks…

[awesomerobot (Kris)]

@fbpbdmin

my system is on discourse 3.2.1

you need to update Discourse, the feature required some Discourse updates

[fbpbdmin (deepblue)]

@awesomerobot

you need to update Discourse

hmm, seems 3.2.1 is the current release, right ?

update to beta ?

[awesomerobot (Kris)]

Yes, major versions have a much slower release schedule, so you may be waiting months for new features and security updates otherwise — by default we recommend staying up to date with our beta releases. Some more info here: Why does Discourse always install "beta" versions by default?