olavea / gatsby-theme-picture-book

Create a Do-It-Yourself picture book together with a child you know.
https://petra-rabbit.netlify.com
8 stars 2 forks source link

Epic: Use GraphQL sorting and navigation #6

Closed raae closed 5 years ago

raae commented 5 years ago

@olavea has created a solution that uses the file names for navigation. Ie. page 0 calculates the next page with 0+1. However, this makes it hard to know when you are on the last page for instance....

I think the best solution is to sort by filename. This way users of the theme can use whatever naming scheme they would like and it's easy to understand. Then we could also use the GraphQL next/prev and add that to the page template context.

Side note: It looks like the files sort correctly in vs code as they sort 2 before 12. This does not happen however in real life since the string 12 sorts before the string 2. So if this solution is to be used the filenames must have the same number of characters. I.e. "1" should be "01", "2" should be "02" etc.

In this same issue, I think it would be nice to drop the special "coverPage" filename and just treat the first image file in the now sorted query as the page that gets "/" as its slug.

raae commented 5 years ago

This could be a task for Tom Erik and Martin. I cannot add them as they are not in this repo yet.

olavea commented 5 years ago

😸 👍

testower commented 5 years ago

Added a pull request - let me know if you find any issues :)

raae commented 5 years ago

Good job!

I will create some tiny issues for @olavea to make navigation labels so we no longer have "/" in the nav menu.