✨ Enhancement: Improve the design of TableOfContent custom tag.

[benjagm]

Is your feature request related to a problem? Please describe

We have a certain number of custom tags that can be used in markdown to enhance the resulting webpage. Most of them are actually documented here: https://json-schema.org/md-style-guide

One of the tags is TableOfContent. This tag generates a table of contents, however the resulting design needs improvement. See: https://json-schema.org/specification-links

Describe the solution you'd like

The resolution of this issue implies:

• Add the documentation of how to use the TableOfContent tag into the guide: https://json-schema.org/md-style-guide
• Enhance the resulting html code to make the resulting table of contents look great in light and dark theme.

Describe alternatives you've considered

No response

Additional context

No response

Are you working on this?

No

[its-VinayKumar]

@benjagm Plz assign me this issue.

[benjagm]

@its-VinayKumar please go ahead.

[vinfinity7]

@its-VinayKumar must be busy with a lot of issues , mind if i take over on thisone @benjagm ?

[its-VinayKumar]

@vinfinity7 if member assign the issue. Please don't ask again. :)

[benjagm]

@vinfinity7 still interested on this issue?

[Adity20]

I am interested @benjagm

[vinfinity7]

@benjagm I am ready to pick this up

[benjagm]

Go ahead @vinfinity7 !

[vinfinity7]

@benjagm how do you wish the new design to be like ?

[vinfinity7]

@benjagm I am thinking maybe we can add borders to each peice and display hierarchy in a more clear way (adding bullets to each point , different kind of bullet to different heir)?

[benjagm]

Feel free to be creative.

[vinfinity7]

@benjagm So i will proceed with bulleting because boxes arent looking good , i am open to anything you suggest

[benjagm]

i will proceed with bulleting because boxes

What about these symbols ▽ ▷

▽ For parents with children ▷ for elements without children.

[vinfinity7]

ohk Ill get that done

[vinfinity7]

@benjagm This is how it looks like

[benjagm]

That does not like great too. We are not improving.

What about this something inspired in this example: https://www.youtube.com/watch?app=desktop&v=VnGOsLoI5MY

[keys-i]

that looks better

[keys-i]

Could we Maybe have the Size of the titles to be Different?

[vinfinity7]

yes @benjagm, the arrow signs weren't adding what was needed, I'll head to the YouTube video idea and finish the work by the night 👍

[keys-i]

@vinfinity7 could we collaborate on this?

[vinfinity7]

@radhesh1 we can collaborate surely but this issue doesn't need 2 people spending their time on this tbh , since We have the design to be implemented , Yes if we had to brainstorm the design ideas , you were more than welcome to collab .

[vinfinity7]

@benjagm Hows this ?

[vinfinity7]

So @benjagm , I have made a PR and we can amend any changes on to that to streamline the process

[benjagm]

This issue is now available for other contributors.