metalsmith/headings

A Metalsmith plugin that extracts headings from HTML files and attaches them to the file's metadata.

metalsmith-headings

A Metalsmith plugin that extracts headings from HTML files and attaches them to the file's metadata.

Installation

$ npm install metalsmith-headings

Example

var Metalsmith = require('metalsmith');
var headings = require('metalsmith-headings');

Metalsmith(__dirname)
  .use(headings('h2'))
  .build();

License

MIT

headings's Issues

Tests always pass

Please correct me if I'm wrong, but it seems the test cases provided will never fail.
This is because you're calling the done() callback with any errors, thus suppressing a possible failed test case.

For example, the following test passes:

it('should preserve order with multiple selectors', function(done){
    Metalsmith('test/fixture')
      .use(markdown())
      .use(headings({ selectors: ['h1', 'h2']}))
      .build(function(err, files){
        if (err) return done(err);
        expect(1).toEqual(2)
        done();
      });
  });

I'd suggest just letting any error through.

examples of how to use are welcome

It is not obvious to understand how to use this plugin on the template side.

At least, a simple example in the README file would be welcome.

Test Cases Use Markdown instead of HTML

This plugin is supposed to run after markdown has been run on the input. However, all of the src data in the test/fixture directory are .md files.

Shouldn't they be .html files?

generate multi-level menus

There are many examples on the web on how to generate multi-level menus with handlebars. The problem is that they are often based on the following data structure :

var headings = [
    { id: "foo1", tag: "h1", text: "foo1 text", items: [
        { 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 you can see, submenus are embedded in their parent menu.

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" }
];

It is then harder to generate a correct menu with handlebars.

I'd like to get something like this in html :

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

As you can see, sublist ul is embedded in its parent li.

I manage to start something that works a little bit. But there is large flaws to improve. I'm not an expert in js, nor in handlebars. You can see a working test the following JSFiddle example.

Mains flaws are :

• I'm not sure the generated html would be correct in any cases
• html is generated by helper whereas it should be generated by the template

Feel free to share your thinking, to improve my solution, and to discuss about the data structure that metalsmith-headers should generate.

merge hegemonic's pull request

Hey,

is there any chance you can merge in hegemonic's pull request? It seems, that the metalsmith-headings plugin requires this functionality to allow building multi level navs.