[Feature] Nested ToC for semantic correct HTML

[LukaHarambasic]

Is your feature request related to a problem? Please describe.

I want to generate semantic correct table of contents. With the currently provided toc you can display it so that the ToC has indents thanks to the depth. But from my point of view a nested ToC which can be rendered recursively would be preferred.

Describe the solution you'd like

Generate based on the given ToC with depths per item a nested ToC.

Current ToC (.toc)

[
  {
    text: "Lorem Ipsum",
    id: "lorem-ipsum",
    depth: 1,
  },
  {
    text: "More Ipsum",
    id: "more-ipsum",
    depth: 2
  }
]

Nested ToC (.tocNested)

[
  {
    text: "Lorem Ipsum",
    id: "lorem-ipsum",
    depth: 1,
    children: [
      {
        text: "More Ipsum",
        id: "more-ipsum",
        depth: 2,
      }
    ]
  }
]

With the nested ToC you can create HTML like this:

<ul>
  <li>
    Lorem Ipsum
    <ul>
      <li>More Ipsum</li>
    </ul>
  </li>
</ul>

Describe alternatives you've considered

Indent items by depth, e.g. margin-left: depth * 1rem. It is even an example in the snippets page: https://content.nuxtjs.org/snippets#table-of-contents

Additional context

As my implementation seems to work I would be happy to provide a PR implementing this, I would keep the current implementation as it is and provide a new property called tocNested on Markdown documents. See: https://github.com/LukaHarambasic/harambasic.de/pull/49/files#diff-1f446ce9f57e369443414a225b343c359bb99352e091ee163168491c39d7be13

What do you think about this?