generate multi-level menus about headings

[aumouvantsillage]

metalsmith-headings generates a flat data structure :

var headings = [
    { id: "foo1", tag: "h1", text: "foo1 text" },
    { id: "foo11", tag: "h2", text: "foo11 text" },
    { id: "foo12", tag: "h2", text: "foo12 text" },
    { id: "foo2", tag: "h1", text: "foo2 text" },
    { id: "foo3", tag: "h1", text: "foo3 text" }
];

As far as I can see, the list of headings is ordered by tags, like this:

var headings = [
    { id: "foo1", tag: "h1", text: "foo1 text" },
    { id: "foo2", tag: "h1", text: "foo2 text" },
    { id: "foo3", tag: "h1", text: "foo3 text" },
    { id: "foo11", tag: "h2", text: "foo11 text" },
    { id: "foo12", tag: "h2", text: "foo12 text" }
];

To generate a multi-level menu, the list of headings should preserve the ordering.

[oupala]

I'm now sure that the generated html is not always correct.

If you have the following headings :

var headings = [
    { id: "foo1", tag: "h1", text: "foo1 text" },
    { id: "foo2", tag: "h2", text: "foo11 text" }
];

My JSFiddle example will generate the following html :

<!-- toc -->
<div class="col-md-3">
    <div class="sidebar hidden-print affix-top toc" role="complementary">
        <ul class="nav sidenav">
            <li></li><li><a href="#foo1">foo1 text</a></li>
            <li><a href="#foo2">foo2 text</a>
    </div>
</div>

You can notice the useless <li></li> at the beginning of line 5 which should be like :

            <li><a href="#foo1">foo1 text</a></li>

You can also notice the missing </li></ul> at the end of line 6 which should be like :

            <li><a href="#foo2">foo2 text</a></li></ul>

I definetly have to find a smarter way to generate my menu. Any help gladly welcome !

Maybe @hegemonic (who is the author of the pull request that adds the tag level to metadata : #1) has an idea on this...

[oupala]

In addition, the second flaws mentionned in my first comment annoys me a lot :

html is generated by helper whereas it should be generated by the template

I'm pretty sure that I'm using Handlebars helpers the wrong way.

Here again, any help gladly welcome !

[jmjf]

The problem in your JSFiddle seems to be that you're outputting a </li> at the beginning of lines 31 and 37, meaning you assume an open <li> that isn't there for the first item in the list. So you need to skip the </li> for the first item.

And it seems like the headings output should be available somewhere in @options.root, so would be available in a Handlebars partial. That might let you avoid a helper altogether with a recursively called partial.

Hope that helps. If I think of anything else or get a break to look at the issue, I'll follow up. (Or maybe it spurs some ideas for others who can jump in.)

[oupala]

My problem is that I need to close the <li> before opening a new one.

I need to do that because I'm not closing <li> after opening it.

And that's because I need to leave the <li> open in case there is a subitem.

And unfortunately, I don't get your point about @options.root, probably because my knowledge is too weak on handlebars. Can you please give me some more information about that ? (maybe another JSFiddle... ?)

[oupala]

Problem fixed using a fork: xiphiaz/metalsmith-headings (see this message).

This plugin could be fixed when pull request #5 will be merged.

[oupala]

Very good news, thanks a lot!