Add support for weight/order frontmatter field (or custom frontmatter fields)

[FezVrasta]

I have a script that takes the routes generated by this plugin, and sorts them. I would like to use a sort or weight frontmatter field to give hints to my script on how to sort the routes, but right now only slug and navigationLabel are exposed.

Would you mind adding support for sort or weight, or maybe a way to define custom frontmatter fields to expose?

[PaulieScanlon]

@FezVrasta Hey! is this so you can group menu elements together, would a menu or submenu property be of use? I'm not sure i understand what you mean by sort or weight.

Happy to investigate though if you can provide a little more information?

[FezVrasta]

No it’s just to define their order in the menu. I can point you to the code I use right now in my website tomorrow.

If you want to take a look it’s in the docs folder of github.com/popperjs/popper-core

[PaulieScanlon]

Hey @FezVrasta got ya!

I've just released 0.0.5

There's a new prop called navigationOrder

This can be used as a reference array. If you exclude a navigationLabel from the reference array it'll be sorted first.

If you're happy with this solution i'll close the issue.

[FezVrasta]

Thanks for the reply. With your addition I need to maintain a list, what I was loking for was a frontmatter prop I could use to automatically generate such list

[PaulieScanlon]

Hey @FezVrasta would you be able to provide a bit more detail, I’m afraid I’m not understanding what you’re looking to achieve

[FezVrasta]

Yes I’m sorry I’ll do that as soon I get home

[FezVrasta]

This is what I have now:
https://github.com/popperjs/popper-core/blob/master/docs/src/utils/createTree.js#L39

Each pages defines its order index, and then the createTree function sorts them:
https://github.com/popperjs/popper-core/blob/master/docs/src/pages/docs/v2/index.mdx#L3

[PaulieScanlon]

@FezVrasta have you got an online version of how that looks, I think i understand what you're trying to achieve but it might help if i could see where you're at or maybe a codePen would be an idea?

[FezVrasta]

This is the live website, the left nav menu is powered by that code.
http://popper.js.org/docs/v2/

[PaulieScanlon]

@FezVrasta ah got ya! so, the ability to group menu elements together by a parent menu is what you're after.

I thought that was what you mean after i replied in the first comment.

Yes that would be a good idea. Let me investigate!

[FezVrasta]

No, I'm sorry.

I am grouping them manually using the folder structure already. I'm just looking for a frontmatter property I can use to define the index for each menu entry.

Without it, Gatsby will sort the routes randomly, I want "Home" to be the first, and have a predefined order for all of the menu items.

[PaulieScanlon]

@FezVrasta ok, so i think we're getting somewhere.

First up. I won't be adding any additional support for new frontmatter properties.

The reason for this is because by putting properties in frontmatter they need to be queried by the Gatsby staticQuery graphql string. If the field isn't present in at least one of the files graphql will error.

I am able to type this field and define a type for it if i createSchemaCustomization but it just adds things that might not be required in other use cases.

Gatsby are working on a way to dynamically inject frontmatter vars into a staticQuery and when that work is complete problems such as this will go away as you'll be able to decide what the frontmatter is AND you'll be able to pass it on to a component that's doing the static graphql query.

Until then we're stuck with making what we can out of the smallest amount of frontmatter that will work across 80% of use cases.

That's the background and perhaps i should have explained earlier why i was avoiding your frontmatter request.

My earlier update provides a way for you to pass a reference array to MdxRoutes this reference array will be the the order the routes are returned.

I don't think it will work with your grouped responses as it happens before MdxRoutes returns the routes, so perhaps you could take the same approach after you'v grouped them?

All the navigationOrder prop does is provide little bit of sugar on top of .sort() so perhaps for the time being you could try the same approach?

const navigationOrder = ["Home", "Second Menu", "Third Menu" ]

.sort((a, b) => 
   navigationOrder.indexOf(a.navigationLabel) -
   navigationOrder.indexOf(b.navigationLabel))

I appreciate it means you have to manually type out an array of the order you'd like your navigation but this in my opinion is better than having to put a property into each and every file to determine an order.

What do you think?

[PaulieScanlon]

@FezVrasta Check the readme.

I've done quite a lot of work on this and there's now a nicer nested kinda object to create recursive menus with. it's called menus

The navigationOrder is still an array of strings but until the conditional frontmatter issue is resolved by Gatsby i won't be adding any additional frontmatter queries to the graphql static query.

Hopefully one of the new options will be able to help you get to where you need to be.

Feel free to reach out again if you have any other questions. I'll be closing this issue now. Thanks!

[FezVrasta]

Thanks for the help, I'll check it out!