Smarter nav tree building? about drizzle HOT 16 CLOSED

There was an effort towards a solution like this, but it's only partially implemented: cloudfour/drizzle-builder#71

I'll cross-reference this issue in the builder repo and revisit the WIP to see where things stand.

from drizzle.

One more note related to this: Ideally, this feature would include an update to the default Drizzle UI that nested one or more example components inside of a collection (i.e., "Components/Button" instead of just "Button").

from drizzle.

Large

from drizzle.

@tylersticka

One more note related to this: Ideally, this feature would include an update to the default Drizzle UI that nested one or more example components inside of a collection (i.e., "Components/Button" instead of just "Button").

I agree, and I think this should be encouraged. I can make a PR for that soon.

Aside from this, is there anything else we feel is absolutely required before marking this as complete?

from drizzle.

I don't think so? It's hard to say without seeing the potentially "final" product.

from drizzle.

This file is probably the best demonstration:

https://github.com/cloudfour/drizzle/blob/master/src/templates/drizzle/nav.hbs

from drizzle.

So what about a top-level folder without an index, like "Components"? I'm curious if the departures from my example in the description (<h5>Components</h5>) are intentional choices or not.

from drizzle.

To be clear, an index page is never a requirement, but here's what iterating over the components would look like for a typical project:

{{#each (collections "components")}}
  {{url}}
  {{name}}
{{/each}}

As seen in cloudfour/drizzle-builder#91

from drizzle.

Is there any way of telling if those collections contain any patterns directly, or contain only collections?

I'm basically asking if there's an intelligent way of determining when a folder should be used as an organizational heading or when it should be a link. And to me, that would be determined based on what's inside of it, right?

from drizzle.

@tylersticka

Re-reading this issue, I'm realizing that the current helpers probably aren't going to get us to where we want to be. They all return flat arrays based on the path query.

Is this code an accurate description of what you'd like to do?

<ul>
  {{#each navItems}}
    <li>
      <a href="{{url}}">{{title}}</a>
      {{#if submenu}}
        <h5>{{submenu.heading}}</h5>
        <ul>
          {{#each submenu.items}}
            <li>
              <a href="{{url}}">{{title}}</a>
            </li>
          {{/each}}
        </ul>
      {{/if}}
    </li>
  {{/each}}
</ul>

from drizzle.

Almost. In your example, I'm not sure why we'd output the <a> and the <h5>. I'm not even sure if pages and collections need to be in the same <ul>.

Basically, I want to be able to ape the sort of navigation that Solid does:

Or even that Lightning does:

If you're ever wondering "is the nav meeting Tyler's expectations yet," the answer to that question is the same as "could we recreate Solid's nav?" If the answer is "no," then I still have complaints. 😁

from drizzle.

@tylersticka

We can recreate it currently, but not within one top-level loop. For example:

src/pages
├── colors.md
├── demos
│   ├── demo-example-1.hbs
│   ├── demo-example-2.hbs
│   └── index.hbs
├── docs
│   ├── doc-example-1.md
│   ├── doc-example-2.md
│   └── index.hbs
└── index.hbs

src/patterns
├── components
│   ├── button
│   │   ├── base.hbs
│   │   ├── disabled.hbs
│   │   └── primary.hbs
│   └── grid
│       └── base.hbs
└── typography
    ├── collection.yaml
    ├── headings.hbs
    ├── lists.hbs
    ├── misc.hbs
    └── paragraphs.hbs

{{!-- Top-level pages --}}
<ul class="drizzle-Nav-menu">
  {{#each (pages sortby="order")}}
    <li>
      {{> nav-item label=data.title}}
    </li>
  {{/each}}
</ul>

{{!-- Top-level patterns --}}
<ul class="drizzle-Nav-menu">
  {{#each (collections)}}
    <li>
      {{> nav-item label=name}}
    </li>
  {{/each}}
</ul>

{{!-- Component patterns --}}
<h5 class="drizzle-Nav-item">Components</h5>
<ul class="drizzle-Nav-menu">
  {{#each (collections "components")}}
    <li>
      {{> nav-item label=name}}
    </li>
  {{/each}}
</ul>

{{!-- Demos and docs --}}
<h5 class="drizzle-Nav-item">Other Stuff</h5>
<ul class="drizzle-Nav-menu">
  {{#with (page "demos/index")}}
    <li>
      {{> nav-item label=data.title}}
    </li>
  {{/with}}
  {{#with (page "docs/index")}}
    <li>
      {{> nav-item label=data.title}}
    </li>
  {{/with}}
</ul>

from drizzle.

Yep, that's basically the same way we did this sorta thing in Fabricator.

I'd like to be able to build that sorta nav by checking if "Components" has any immediate children or only collections. That would let me build it with a single loop, and not copy and paste chunks of code every time I add a similar category.

If there's still confusion, we should chat about it with voices.

from drizzle.

In case it's helpful, here's a hypothetical Handlebars template I'd love to write (if it were possible):

<ul>
  {{#each pages}}
    <li><a href="{{url}}">{{label}}</a></li>
  {{/each}}
  {{#each collections}}
    <li>
      {{#if collections}} {{! This collection has nested collections. }}
        {{label}}
        <ul>
          {{#each collections}}
            <li><a href="{{url}}">{{label}}</a></li>
          {{/each}}
        </ul>
      {{else}} {{! Link to this collection directly. }}
        <li><a href="{{url}}">{{label}}</a></li>
      {{/if}}
    </li>
  {{/each}}
</ul>

from drizzle.

@tylersticka How closable does this feel with cloudfour/drizzle-builder#95 in place?

(Keeping in mind that we can reopen it later.)

from drizzle.

@erikjung Go for it.

from drizzle.