Expose a generic file iterator method on locals

[thomastuts]

This will allow us to iterate any file tree, making it easier to write your own styleguide navigation (hardcoded) instead of relying on the funky category thing we have right now.

[thomastuts]

This is also related to #104: the core template would have to be overwritten to make your own navigation appear.

[Wolfr]

Is this still relevant? @thomastuts

[Wolfr]

What we want is to create custom layouts for style guides.

This means the current logic is not good enough. The file tree and style guide looks the same for every project, whereas we want to customize this for different project.

For example, to make the dropdowns in this design have the correct info, we should be able to loop through documentation categories within a dropdown component.

Another example would be that we will want a style guide where next to the bare HTML/CSS code we also document the React component.

It seems we need to have some kind templating system to be able to have variance in style guides for several projects.

[Wolfr]

It is possible now to do your own layouts but it's not documented well.

Basically you can take styleguide/index.pug, styleguide/doc.pug and styleguidecomponent-group.pug and bring those to /content.

Bedrock will then read those and you can start building your own layout.

Here is some example code.

h1 Custom styleguide - index page

h2 Basic nav with all components and their categories
nav
    ul
        li Basics
            ul
                each doc in docs.byCategory['Basics']
                    li: a(href=`/styleguide/docs/${doc.attributes.href}.html`)= doc.attributes.title
        li Design Patterns
            ul
                each doc in docs.byCategory['Design Patterns']
                    li: a(href=`/styleguide/docs/${doc.attributes.href}.html`)= doc.attributes.title
        li Components
            ul
                each category, categoryName in components.byCategory
                    if Object.keys(components.byCategory).length > 1
                    li= categoryName
                        ul
                            each group in category
                                - var groupName = group.docs ? group.docs.attributes.title || group.group.id : group.group.id
                                li
                                    a(href=`/styleguide/${group.group.id}.html`)
                                        |  #{groupName}

h2 Advanced nav with all components in top level, looped by category
nav
    ul
        li Basics
            ul
                each doc in docs.byCategory['Basics']
                    li: a(href=`/styleguide/docs/${doc.attributes.href}.html`)= doc.attributes.title
        li Design Patterns
            ul
                each doc in docs.byCategory['Design Patterns']
                    li: a(href=`/styleguide/docs/${doc.attributes.href}.html`)= doc.attributes.title
        each category, categoryName in components.byCategory
            if Object.keys(components.byCategory).length > 1
            li= categoryName
            ul
                each group in category
                    - var groupName = group.docs ? group.docs.attributes.title || group.group.id : group.group.id
                    li
                        a(href=`/styleguide/${group.group.id}.html`)
                            |  #{groupName}

h2 Advanced nav with specific top-level component category
nav
    ul
        li Basics
            ul
                each doc in docs.byCategory['Basics']
                    li: a(href=`/styleguide/docs/${doc.attributes.href}.html`)= doc.attributes.title
        li Design Patterns
            ul
                each doc in docs.byCategory['Design Patterns']
                    li: a(href=`/styleguide/docs/${doc.attributes.href}.html`)= doc.attributes.title
        li Material Design components
            ul
                each group in components.byCategory['Material Design components']
                    - var groupName = group.docs ? group.docs.attributes.title || group.group.id : group.group.id
                    li
                        a(href=`/styleguide/${group.group.id}.html`)
                            |  #{groupName}