Add navigation buttons at the bottom of the page for related pages.
sidtr0 opened this issue · 6 comments
At the bottom of certain pages, it could be easier to implement a navigation button which takes you to the next related document or the previous page.
Example: the http-project guide. It seems unintuitive to open the nav bar to go to the next page so it would be super nice here.
Yes 100%.
What I'm thinking: Have the button navigate to either the next sibling (page), or the next directory.
I've prepared a simple design for it
https://www.figma.com/file/Yz2t51GRnlcPPRujlTj3ggLl/tph-sketch?node-id=2028%3A68
I don’t know anything about React or Gatsby but here goes my idea: in the Markdown Frontmatter for each of the pages, we would add two new labels: project_label which would be the name of the project like “DIY HTTP Server” and page_number which would be a number. How I thought it would work is it would look for pages with the same label and add the links in an array which would be used to switch pages.
Let me know how this sounds and if it is possible.
@woojiahao has already implemented a similar paging system in his personal site! We can use that as reference.
The repo of the site.
Edit: Upon researching the source! If we have a way to sort the resources we get from the grahpql we can use the allFile.edges.next and allFile.edges.previous and also allMdx.edges.next and allMdx.edges.previous are available.
Edit-2: We can also try useTree function to identify the next item and previous item.