Comments (14)
@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?
from gatsby-mdx-routes.
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
from gatsby-mdx-routes.
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.
from gatsby-mdx-routes.
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
from gatsby-mdx-routes.
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
from gatsby-mdx-routes.
Yes I’m sorry I’ll do that as soon I get home
from gatsby-mdx-routes.
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
from gatsby-mdx-routes.
@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?
from gatsby-mdx-routes.
This is the live website, the left nav menu is powered by that code.
http://popper.js.org/docs/v2/
from gatsby-mdx-routes.
@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!
from gatsby-mdx-routes.
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.
from gatsby-mdx-routes.
@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?
from gatsby-mdx-routes.
@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!
from gatsby-mdx-routes.
Thanks for the help, I'll check it out!
from gatsby-mdx-routes.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-mdx-routes.