Smarter nav tree building?

[tylersticka]

If history repeats itself, our patterns will tend to fall into a structure similar to this:

src/patterns/    (includes collections)
├─ components/   (includes collections)
│  ├─ button/    (includes patterns)
│  ├─ dropdown/  (includes patterns)
│  └─ grid/      (includes patterns)
└─ typography/   (includes patterns)

Currently, there does not appear to be a concise way of building that entire nav tree in the desired order without marking up top-level and deeper pattern groups separately, like so:

<ul class="drizzle-Nav-menu">
  {{!-- Top-level patterns --}}
  {{#each drizzle.patterns}}
    {{#if collection}}
      <li>
        <a class="drizzle-Nav-item" href="/patterns/{{@key}}.html">
          {{collection.name}}
        </a>
      </li>
    {{/if}}
  {{/each}}
</ul>
<h5 class="drizzle-Nav-item">Components</h5>
<ul class="drizzle-Nav-menu">
  {{!-- Component patterns --}}
  {{#each drizzle.patterns.components}}
    <li>
      <a class="drizzle-Nav-item drizzle-Nav-item--heading"
       href="/patterns/components/{{@key}}.html">
        {{collection.name}}
      </a>
    </li>
  {{/each}}
</ul>
{{!-- etc. --}}

I'd love if there were a better way of doing this, either a way of looping over all the collections and telling when a parent had started, or some special nav-specific group to loop through that separated stuff out. I dunno, it just seems weird the way it currently is. Maybe it's just me! ¯_(ツ)_/¯

[erikjung]

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

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

[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").

[megnotarte]

Large

[erikjung]

@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?

[tylersticka]

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

[erikjung]

This file is probably the best demonstration:

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

[tylersticka]

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.

[erikjung]

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 https://github.com/cloudfour/drizzle-builder/pull/91

[tylersticka]

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?

[erikjung]

@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>

[tylersticka]

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. 😁

[erikjung]

@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>

[tylersticka]

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.

[tylersticka]

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>

[erikjung]

@tylersticka How closable does this feel with https://github.com/cloudfour/drizzle-builder/pull/95 in place?

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

[tylersticka]

@erikjung Go for it.