hide materials in components

[davidmondok]

Is it possible to hide materials in the list of components, but still use them as partials on pages? Or pass in data to partials to overwrite the data from the .yml files?

I'm actually using fabricator as a quick tool for some user testing. For that purpose I like to build pages that look more like real use cases to the customers. So for example I'd like to render cards in a different way on a page, then in my components list.

[LukeAskew]

1. You could create another folder as a sibling to materials/components and it would get parsed and turned into a partial. Something like materials/cards.
2. You can pass context into a partial as either an object or a list of key value pairs.

---
myCard:
  title: "My Card"
  status: "Online"
---

{{> card filename.myCard}}

or

{{> card title="My Card" status="Online"}}

Note that in the first example you have to use dot notation to pass the correct context to the partial. If the file in the first examples was test-page-2.html, the reference would be {{> card test-page-2.myCard}}

[jraeruhl]

@LukeAskew I don't see how this solution hides the material from the view. I believe I am looking for the same solution as @genmacg. I have folders and files within materials that I am purely using as partials and I do not want them to become generated f-item(s).

[paultibbetts]

@jraeruhl @genmacg I don't know how to stop materials from being generated but to to "hide" them you could create a new folder but then modify the menu to not display this folder.

For example, I work with "components", "objects" and "elements" however I did not want the materials under "elements" to be listed in the sidebar of Fabricator and so I have changed f-menu.html from:

{{#each materials}}
  <li>
    <a href="{{@key}}.html" class="f-menu__heading">{{name}}</a>
    <ul>
      {{#each items}}
        <li>
          <a href="{{@../key}}.html#{{@key}}">{{name}}</a>
        </li>
      {{/each}}
    </ul>
  </li>
{{/each}}

to

<li>
  <a href="components.html" class="f-menu__heading">Components</a>
  <ul>
    {{#each materials.components.items}}
      <li>
        <a href="components.html#{{@key}}">{{name}}</a>
      </li>
    {{/each}}
  </ul>
</li>

<li>
  <a href="objects.html" class="f-menu__heading">Objects</a>
    <ul>
      {{#each materials.objects.items}}
        <li>
          <a href="objects.html#{{@key}}">{{name}}</a>
        </li>
      {{/each}}
  </ul>
</li>

<li>
  <a href="elements.html" class="f-menu__heading">Elements</a>
</li>

You could do the same with a /partials folder, just make sure to explicitly call the folders you do want to be displayed in the sidebar.

[davidmondok]

@jraeruhl That's basically the solution I went with. Quick and Easy =)

[LukeAskew]

Yup @ptibbetts is spot-on The menu partial can be manually constructed.

Here's some more info on the context that's fed into the fabricator views: http://fbrctr.github.io/building-a-toolkit/data.html#context

[jraeruhl]

Thanks everyone! I ended up doing something slightly different, but the feedback definitely pointed me in the right direction. I ended up with...

{{#unless materials.navigation.components}}
      {{#each materials}}
            <li>
                <a href="{{@key}}.html" class="f-menu__heading">{{name}}</a>
                <ul>
                    {{#each items}}
                    <li>
                        <a href="{{@../key}}.html#{{@key}}">{{name}}</a>
                    </li>
                    {{/each}}
                </ul>
            </li>
       {{/each}}
{{/unless}}

Thanks again!

[Webtransformer]

I just used the names as css classes and hide them:

` {{#each materials}}

{{name}}

{{#each items}}
• {{name}}
{{/each}}

        {{/each}}

`