DiscoTOC - automatic table of contents

Ah, I can explain. The topic you linked has html headings (<h3>, <h4> and so on) and initially the TOC component had its own logic for adding heading anchors. However, since then, core added automatic anchors and recently I removed the custom anchor login in the theme component. However, core’s anchor feature only works for Markdown headings (using ###).

So that’s the OP here has anchors, but the linked guide doesn’t.

We probably should update that guide to use Markdown instead of HTML @JammyDodger.

5 Likes

Ah! That explains things perfectly, thanks Penar!!

4 Likes

I was clearly not paying enough attention yesterday. :slight_smile: I have now swopped in Markdown headers for the two example topics. :+1:

2 Likes

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

Hi there, I wonder if there is a way to bulk apply the TOC to topics? We just installed the TOC component recently and now having to manually apply it to old topics is a bit tedious :smiling_face_with_tear:

2 Likes

I’ll double-check, but I don’t think that’s currently possible? Though I do sympathise with the manual edits. :slight_smile: How many have you got left to do?

3 Likes

I don’t think we have a whole lot of them at the moment, though it’d be great if the team could consider implementing this feature in a future release :crossed_fingers:

2 Likes

It was such a great idea @albert_vu that it’s now been added: :slightly_smiling_face::+1:

13 Likes

Great :smile: so I guess that I’d need to update the theme-component from my end?

2 Likes

If you check, I’ll think you’ll find it’s already been done. :slightly_smiling_face::+1:

But for anyone else wanting the swish new functionality, you can update the theme component from its customise page:

2 Likes

Hmmm, just thought of a scenario where a user doesn’t want to have a TOC in their topic, is there a way to revert that? :thinking:

1 Like

I like the tag element of it, so you could have a specific tag for TOC, and then remove it again if one is not desired?

2 Likes

I love the idea of automation, almost everytime and everywhere.

I haven’t updated DiscoTOC yet, but if it can take away option to insert TOC from toolbar when TOC comes from category it would be really nice touch. Like cherry top of the cake :wink:

Or, do opposite thing what @albert_vu asked — there would be an option insert something like !toc if you understand what I’m meaning.

For ordinary users it could be confusing, though.

I can live with that but TOC is quite unneeded when there is somethng like only one or two headers. Because when there is a TOC a long post must be scrolled to bottom to find out… what is it in discourse-lingo… well, possibility to scroll dates. But that is quite rare edge case I reckon.

4 Likes

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\>

does it support generating the toc across the whole topic (not limited to the 1st post), like if I have a in-progress article that keeps updating with in one topic(by replying),will it work?

2 Likes

No, it only supports headings from the first post of a topic. (Additionally, as soon as another post is in view, the TOC disappears.)

3 Likes

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

Thanks for the great theme component! I use it regularly.

Recently, I have started using the “publish” feature for some of the topics on my forum, and it appears that the TOC stuff simply disappears when you do that. Is there any plan to make the TOC available on published pages?

Thanks again!

2 Likes

I’m afraid it’s not possible to show DiscoTOC on a published page. Though there is a feature request for it - Adding DiscoTOC to Published Pages

5 Likes