Posts pagination

[kbariotis]

Is pagination for posts on your plans? It would be a great feature to have.

[elmasse]

@kbariotis yes it is. I have to do some testing, not quite sure yet how that will work but it'll be addressed soon.

[kbariotis]

Yes its tricky but super useful.

Things to consider:

• Should it generate a different page for each posts batch under the blog/page/pageNo path? Phenomic took another approach with the Immutable pagination.
• The path should be configurable so after one migrates from another blog, she should be able to keep her old links
• Pagination should also take in consideration tags/categories pages. (tags/tagName/page/pageNo)

Let me know what you think and if I could help you on that.

[elmasse]

@kbariotis

Thanks for all that information. I'll check Phenomic solution in deep, seems pretty interesting.
Regarding configuration that is still a subject I will love to explore more. Right now the need to configure next thru nextein is solved by the config wrapper. I'd like to explore how can I keep the door open for next config + internal configuration and allow a similar mechanism for nextein.

But this is topic for pagination. I will try to find out some time later this week to play with some possible solutions taking aside configuration by now. I'm more than open to suggestions, so if you have the time and want to contribute I'd love to evaluate alternatives!

Thanks a lot!
Max

[knoebelja]

Here is how I implemented pagination. It may give you inspiration for something more complex.

Wrap your page with both withPost and withPosts to get your current post and all other posts as well. Then find the index of your current post:

  const currentData = post.data;
  const currentIndex = posts.findIndex(post => currentData.url === post.data.url);

Import a component like such:

const PagionationLink = ({ direction, post }) => {
  if (post) {
    return (
      <div>
        <div>{direction}</div>
        <div>
          <NexteinLink {...post}>
            <a>{post.data.title}</a>
          </NexteinLink>
        </div>
      </div>
    );
  } else {
    return <div />;
  }
};

Then pass props to it like such:

<PaginationLink direction="Previous" post={posts[currentIndex - 1]} />
<PaginationLink direction="Next" post={posts[currentIndex + 1]} />

If there's no post at the previous or next index, it returns blank. Otherwise it renders.