nodejs.dev
nodejs.dev copied to clipboard
nodejs
Introduce Pagination on the Blog Page
Summary
Currently, our /blog page doesn't support pagination, hence every single posted post from every category will be shown there.
Since we separate blog posts per category within /blog we could take the approach to show the last 3-4 entries of each category and add a "Show more" button.
We have two opportunities with this button:
- Querying GraphQL through a Hook and dynamically rendering the more entries for that category (Always load X more items)
- Redirect to the category page for that category (eg.:
/blog/{categoryName}) which would show X amount of entries.
- This would mean that then we would have pagination within the
/blog/{categoryName}entry. In other words, some pagination buttons (Page 1, Page 2, Page 3...)- Question: Should the buttons show the first previous page link (if exists) and then the current page, and the next 2 pages?
- The pagination could be done as a query string
/blog/{categoryName}?page=X- Question: Would this be SEO friendly?
- An alternative would be
/blog/{categoryName}/page/X- Would possibly require us to manually register every page on Gatsby (Through a loop/for within the
gatsby-nodes.js
- Would possibly require us to manually register every page on Gatsby (Through a loop/for within the
Motivation
One of the motivations behind this feature is having an uncluttered blog landing page that shows only the last X posts of every category, allowing then the user to go to the category they wish to see recent or older posts.
cc/ @benhalverson
From a user's standpoint, I think it'd be better to implement both, i.e. show a list of posts from all categories on the '/blog' page and then if user needs to view category specific posts, then inside the '/blog/{respective-category}', we'd have to add pagination to show X number of posts.
Hi, I would like to contribute to this issue. I'm going to use pagination component from Figma Design. I will implement second approach and this SEO strategy. Please assign this issue to me.
Hey @shlommo we do not assign issues here, but feel free to work on the task 😄
Note.: Recent PRs implemented the backend part of pagination.
Pagination itself now is working 👀 we just need to make the Frontend components to make it be actually usable now 🌈
Note.: Recent PRs implemented the backend part of pagination.
Pagination itself now is working 👀 we just need to make the Frontend components to make it be actually usable now 🌈
Oh, what a great news. Thank you 🎉 I already work on it
Oh, what a great news. Thank you 🎉 I already work on it
Nice! Let me know once you have a PR open 😄