Can you paginate on an object on its keys and also create pages of the results?

[tucker-m]

I have an object that will contain keys and I don't know the keys in advance. I'm using pagination to create a page for each key. How can I also paginate those pages?

Let's say I have the following data:

postsByAuthor = {
  alice: ["post_one", "post_two", "post_three"],
  bob: ["post_one", "post_two", "post_three"],
  charlie: ["post_one", "post_two", "post_three"],
}

I'm creating a page for each author like this:

---
pagination:
  data: postsByAuthor
  size: 1
  alias: author
permalink: "authors/{{author}}/posts/"
---

Is it possible to also have the pages for each author be paginated? Basically, can I create the page authors/{{author}}/posts/{{pagination.pagenumber}}/, with a limited number of posts being on each author's page? I haven't been able to find a way of doing this, since I'm already using the pagination feature (with size: 1) in order to create each author's page in the first place.

[dwkns]

You can, but it's not trivial. Take a look at the Collections API. You'll want to create an authors collection (you might already have one). And then a postBy collection for each author.

You can then paginate the authors collection to create a page for each author. And paginate the postBy collectons to chunk the authors posts by however many you want on each author page.

To loop an object you can use Object.entries()

[tucker-m]

Thanks for the reply, @dwkns! I'm still not able to see how I could create the paginated pages for the postBy collections, though.

I see how I could create a collection for each author by looping through an array of the author's names. But I don't see how to create a paginated page for each author's collection, since I don't know what the author's names will be. (The JSON data with the author's names and posts will be fetched from the web.)

For example:

// authorNames is an array of the author's names
authorNames.forEach((name) => {
  eleventyConfig.addCollection(`postsBy${name}`, function() {
    // create collection in here
  })
})

So then I would have collections named postsByAlice, postsByBob, etc. But I don't see how to automatically create a paginated page for each one of them, since I don't know what their names will be. Like, in the pagination: front matter, what would the data: value be? I can't create pages in advance that say:

---
pagination:
  data: collections.postsByAlice # <-- can't do this, I don't know the "postsByName" values
---

[dwkns]

You actually need to create a flattened chunked array of your posts for each author :

[{
  authorName: "bob",
  pageNumber: 0,
  totalPages: 2,
  pageData: ['post-1','post-2'] 
},{
  authorName: "bob",
  pageNumber: 1,
  totalPages: 2,
  pageData: ['post-3'] 
},{
  authorName: "alice",
  pageNumber: 0,
  totalPages: 2,
  pageData: ['post-4','post-5'] 
},{
  authorName: "alice",
  pageNumber: 1,
  totalPages: 2,
  pageData: ['post-6'] 
}
...
]

And then paginate that with something like:

---
pagination:
  data: collections.authorsPosts
  size: 1
  alias: author
permalink: /authors/{{ author.authorName }}/{% if author.pageNumber %}{{ author.pageNumber + 1 }}/{% endif %}
---
<h1>Author: {{ author.authorName }}</h1>

<ul>
  {% for post in author.pageData %}
    <a href="{{post.url}}"><li>{{ post.data.title }}</li></a>
  {% endfor %}
</ul>

<p>page:{{ author.pageNumber + 1}} of {{author.totalPages}}</p>

If your data is coming from the web then you don't necessarily need to create a collection, just the right shaped JS array in a global data file. You can then paginate accross that. Without your exact data structure it's a bit difficult to replicate but here is a repo with the concept working with a collection of posts. You should be able to adapt this to your data structure.

Shout if you need more help.

[tucker-m]

Ahhh, OK thank you! I was thinking that I might need to divide the posts into pages manually, since eleventy will automatically paginate one value for you, and that value will have to be the authors name. This makes sense.

[dwkns]

I'd forgotton that I'd actually done exactly what you asked for some time ago.
This is a slightly more complex version that outputs an object similar the eleventy generated pagination object.
The advantage being it makes it much easier to to create the next/ previous UI for moving between the pages.