DiscoTOC - automatic table of contents

I pushed a fix for that, thanks :+1:

There was a small issue with that setting but it’s now fixed. Once you update the component, you can use link if you want.

9 Likes

Just updated and like the link instead of the hashmark

image

image

:vulcan_salute:

6 Likes

I’m with you on that!

@Johani Thanks for pushing those fixes! Everything is working perfectly for us now, with the TOC. Great work on this! :raised_hands:

5 Likes

I just had a few other ideas for consideration with the TOC…

:thinking:

  1. Currently when you click on a heading, it opens and reveals the subheadings (1 level beneath.) If you click another heading, the TOC tool closes the current section and opens the newly selected section.
    ↳ It would be nice if you could click a section to open it, and then if you click it again, it closes. The only way to get it to close now, is to click on another section.
  2. We have some topics that use the table of contents and would like it to stay open and not auto-collapse. Is there a workaround or hack, or snippet of JS that would make it so it doesn’t collapse on desktop?
  3. It would be nice if there was some kind of option to have an indicator which shows where sub-headings exist. Something like " > " at the end of the heading title (when there are sub-sections)
3 Likes

I believe that if a heading has accented marks or non-ascii characters, the anchor link doesn’t work. For example:

## Cómo hace un año

creates this anchor link:

https://whatever.com/t/whatever-topic#c%C3%B3mo-hace-un-a%C3%B1o

but clicking doesn’t go to the correct section. To overcome this, I currently have to manually create the header:

<h2 id='heading--whatever'>Cómo hace un año</h2>

and the link:

[this works](#heading--whatever)
4 Likes

Hey guys

Are there any plans to make it compatible with the new Page Publishing feature

4 Likes

Noticed another potential problem and simple workaround. (actual post)

Sometimes the TOC on the right will be collapsed until the post is scrolled further down, then the TOC will expand correctly.

In tinkering with the post text found that if the post text is like

### Installation Instructions
### Language agnostic steps

the problem occurs

and if the post text is like this (with a blank line between section hearers)

### Installation Instructions

### Language agnostic steps

the problem does not appear.

Not expecting a fix or anything but just noting in case others run into this.

This will be an option in the next release of this component.

I think you might be referring to the way that the browser handles the URL for non-ascii characters when you copy the link. In any case. We have plans to automatically generate the ids for headings in core in the next version of Discourse. So, this component won’t have to do that once that work is done. We’ll be sure to test for this :+1:

Eventually, yes. but no immediate plans for that as of now.

I think

Language agnostic steps

here is supposed to be a subheading under

Installation Instructions

but they both have the same level.

problematic headings

So, if you have a heading - level 3 in this case - with no text under it followed by another heading on the same level, then it’s expected that you’d run into this problem.

You can either add a paragraph or two under that heading, or change the levels of the headings underneath it.

9 Likes

@Johani it seems like link no longer uses DiscoTOC

That preview / link still works for me

Can you please let me know what device / browser you’re using?

2 Likes

Sorry to bother you. It seems that a browser plugin must have stopped it from loading (umatrix). I tried on the same setup without that plugin and it worked!

3 Likes

Is there a way to make the component not generate extra white before the first line of text?
eg

2 Likes

Hi @Ellibereth

I was able to fix it like so:
image

Naturally, that is a change to keep track of in case of update, but maybe someone will add it to the theme itself :slight_smile:

2 Likes

PRs are always accepted :wink:

Have you tried putting the discotoc code at the bottom of your post?

Rather than modify the component itself, which is dangerous as any updates will overwrite your changes, create your own component. Refine the applicable CSS. As Discourse does not officially order CSS placement on a rendered page from components, you may need to use the !important hammer to ensure your styles are applied.

PRs for UI tweaks like this I think are questionable as everyone has their own sense of spacing, sizing, etc.

How would I got about adding a label/title to the ToC. Specifically, I was hoping to just add “Contents” above the actual list. It would seem ideal to have an <li> for this rather than attempt to use something like :before.

Examples of outcome

contents2

contents

P.S. I :heart_eyes: this component. Great job.

1 Like

Is there a way to move the TOC to the left side of the post, rather than the default right side?

1 Like

I think I found a [bug] :beetle:

Expanding a oneboxed internal link of another topic that contains TOC, makes it appear on the side of the topic where it was oneboxed (expected behavior I suppose).

When the expanded onebox is closed back though, the TOC remains on the side and leads to weird behavior.

Steps to reproduce:
  1. Create a topic with a table of contents.
  2. Create a second topic and link the first one inside it => A onebox is created.
  3. Expanding the onebox makes the TOC of the first topic appear in the second one (expected behavior I suppose)
  4. Closing the onebox does not make TOC disappear. Clicking the TOC in this case just scrolls the post down incrementally. (Not expected behaviour)
  5. BONUS: Things look even worse, when the second topic has a TOC as well.
    1. Expanding the onebox in this case does not show the original TOC
    2. Expanding and closing the onebox multiple times though, makes the TOC of second topic gradually shrink and disappear at some point. The width of the post is also affected.

The result of expanding and closing the onebox about 10 times:

1 Like

Feature request: transliteration of HTML ids

It will be nice if you can have good trasliterated urls for achors like the rest of the URL