Custom order for material directories / folders

[BobbyBabes]

materials
  `-- 00-foundation
  `-- 10-elements
  `-- 20-parts
  `-- 30-sections

This taxonomy doesn't work for me. The #each loop in the corresponding files in the views directory is not entered at all. So all .hbs files in the above materials directories are excluded.

The directory names above do show up in the menu though (f-menu.html). When clicking on their menu names, a page with only the heading Foundation (or Elements and so on) is displayed.

When I remove the numbered prefix from the directory names. All is OK (except nested @partial-block).

Could someone confirm whether custom ordering of directories in materials is possible? Identical to .html material files as discussed here : https://github.com/fbrctr/fabricator/issues/126 And at 59:05 into this video : https://www.youtube.com/watch?v=fLWhd7OedY0&t=59m05s

Or am I wasting my time getting this to work?

[thetypebeast]

@BobbyBabes, to get custom ordering for directories inside the materials to work similar to ordering the files, you need to pay attention to the paths that your menu template is using to create the url. Note that in the menu template, I use the {{name}} property instead of the {{@key}} helper to get the specific path I need. {{@key}} outputs the file's full string before the file extention, and {{name}} outputs the string without the numeric prefix (##-).

I hope all this answers your question! Please see below:

Using this structure:

materials
|__ 01-foo
|__|__ 01-foo.html
|__|__ 02-abc.html
|__ 02-bar
|__|__ 01-bar.html
|__|__ 02-aaa.html
views
|__ foo.html
|__ bar.html

and this snippet for navigation (f-menu.html):

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

You get this result:

<ul>
    ...
    <li>
        <a href="Foo.html" class="f-menu__heading">Foo</a>
        <ul>
            <li>
                <a href="Foo.html#Foo">Foo</a>
            </li>
            <li>
                <a href="Foo.html#Abc">Abc</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="Bar.html" class="f-menu__heading">Bar</a>
        <ul>
            <li>
                <a href="Bar.html#Bar">Bar</a>
            </li>
            <li>
                <a href="Bar.html#Aaa">Aaa</a>
            </li>
        </ul>
    </li>
    ...
</ul>

Screenshot of ordered material directories:

[BobbyBabes]

Thanks for responding.

But please have a look at the screenshot below. As displayed in the screenshot, everything is picked up and displayed correctly within Fabricator.

The issue is that the {{#each items}} block is never entered when I add a number prefix to the top layer of subdirectories in the materials directory to sequence them. The top layer of subdirectories === elements, foundation, parts, presentational, and sections. Forget about components and structures. Those are the 2 shipped directories. They are unchanged and will be deleted.

With directory names 00-foundation, 10-elements, 20-parts, 30-sections, and 99-presentational nothing inside these directories is accessed (the {{#each items}} block is not entered).

When I replace <a href="{{@../key}}.html#{{@key}}">{{name}}</a> inside the {{#each items}} block, with the hardcoded text "Show me what you got." it is not displayed. When I cut the hardcoded text and paste it right above/outside the {{#each items}} block, it is displayed. When I cut and paste the hardcoded text back inside the {{#each items}} block, and remove the number prefixes from the directories, the hardcoded text is displayed.

(Just for the record, the directories 40-templates and 50-pages in the views directory have the same issue.)

[BobbyBabes]

This repo looks abandoned. Too bad. Unsubscribing and closing.

[Webtransformer]

But it still works very well!

[ekfuhrmann]

While it does seem like the repo is all but abandoned, I believe you can resolve your issue by changing the copy within your each to reflect the new directory.

So in your example your each for the grouping directory would be {{#each materials.04-grouping.items}}. Doing so will serve the content of that directory within your page. I just wish there was a more elegant solution to the pathing as it is silly for it to have a capitalized letter due to using the {{name}} token.