DiscoTOC - automatic table of contents

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?

Nice component, the # links created for the headings are very neat too.

Is there a way to move the icon link as pictured in the screenshot?

Right now it hovers over the left, in between the user icon and heading text (see below)

Screen Shot 2022-07-13 at 7.27.19 PM

Edit:

A suggestion if I may.

By nature, posts with TOC will be long. When the Google crawler sees the page it doesn’t see the TOC nor those nifty links to different parts of the page. Perhaps on the crawler version we can have those links show up for each heading/sub-heading.

1 Like

What is the purpose of the anchor icon setting?
I could not find it anywhere. Was it removed in REFACTOR: General component overhaul (#19) · discourse/DiscoTOC@20366c6 · GitHub ?

1 Like

Awesome component! However I’ve found a bug in how it parses and renders TOC’s which contain escaped and certain characters.

For example it doesn’t render these headers correctly

### <a name="profilename">**[\<Profile Name\>]**</a>
### [\<Profile Name\>]
### \<encoder\>-general=\<general parameters\>

You can try my fix XD

As a non-latin language speaker, this theme component was not working well on my forum until I made some changes in javascripts/discourse/initializers/disco-toc-main.js

 headings.forEach((h, index) => {
              // suffix uses index for non-Latin languages
 ---             const suffix = slugify(h.textContent) || index;
 +++             const suffix = /*slugify(h.textContent) ||*/ index + "-salt-" + Math.round(Math.random() * 1145141919);
              const id =
                h.getAttribute("id") || slugify(`toc-${h.nodeName}-${suffix}`);

I used a huge random number instead of a title slug to make the link; it works fine in non-latin texts.

As you can see, it’s harder to get two titles confused than to win the lottery XD.

1 Like

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 like that the explanation of the arrow is now always visible. But “jump to replies” is a bit misleading in topics without replies. On hover it still says “navigate to post controls”.

5 Likes

Had to revert this for now due to some display issues, will re-approach

6 Likes

7 posts were split to a new topic: Getting ‘undefined method `kilobytes’ for “1024”:String’ when installing theme component

A post was merged into an existing topic: Dark/Light Mode Toggle