Add support for navs from parent components to child components

[gpleiss]

On the styleguide @stubbornella and I are building, we'd love to add a nav at the beginning of every parent component with links to each child components.

For example, if we had a "buttons" component with subcomponents of "full-width buttons" and "primary buttons", we'd like generate the following styleguide:

...
<h1 id="button">Buttons</h1>
<ul>
  <li><a href="#full-width-buttons">Full Width Buttons</a></li>
  <li><a href="#primary-buttons">Primary Buttons</a></li>
</ul>
...
<h2 id="#full-width-buttons">Full Width Buttons</h2>
...
<h2 id="#primary-buttons">Primary Buttons</h2>
...

I looked into creating a hologram plugin for this, but the current plugin interface doesn't support building a feature like this. Would you be open to this being an optional feature built directly into hologram? If so we are willing to make a PR.

[jdcantrell]

I'm not sure about how this could be done cleanly. In our styleguide we have a sidebar navigation that is generated like this:

 <% if !blocks.empty? %>
    <div class="componentMenu box boxBasic backgroundBasic">
      <div class="boxBody pan">
        <ul class="componentList listBorderedHover man lvn lhn">
          <% for section in blocks %>
            <% if section[:parent].nil? %>
              <li><a class="pas" href="#<%= section[:name] %>"><%= section[:title] %></a></li>
            <% end %>
          <% end %>
        </ul>
      </div>
    </div>
<% end %>

If you removed the check for section[:parent].nil? you could at least generate an overall index of the sections on the page. It wouldn't get you the inline navigation you're looking for (though that could be done with some js magic). This code lives in our header template.

I'm open to seeing how it could be done within hologram, but I don't see a nice way for it at this moment.

[gpleiss]

This issue was closed by #156