Pagination on filtered collection?

[cmcknight]

Hi!

I'm using the following filter in my eleventy.js file:

 eleventyConfig.addFilter("byAuthor", function(posts, author) {
        return posts.filter(post => post.data.author === author);
    });

The filter is used in the following Nunjucks template:

 {% for post in posts | byAuthor( author ) %}
          <article>
            <div class='article-header'>
              <h2><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
              <time datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>
            </div>
            <div>
              {% excerpt post %}
              {% include "_lightbox-gallery-section.njk" %}
              <p class="text-right read-more-link">
              <a href="{{ post.url | url}}">Read more...</a>
              </p>
            </div>
          </article>
          {% endfor %}

I have 5 posts with essentially the following frontmatter:

---
title: Blog
permalink: "/authors/john-doe/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}{% endif %}/index.html"
layout: author-posts.njk
author: John Doe
pagination:
  data: collections.posts
  size: 4
  reverse: true
  alias: posts
breadcrumbs:
  - label: Home
    url: /
  - label: Blog
    url: /blog/
  - label: John Doe
---

When I specify a size of 4 for the pagination, I get two pages with one post per page. When I specify a size of 1 for the pagination, I get the following error:

> Having trouble writing template: dist/authors/john-doe/index.html

`TemplateWriterWriteError` was thrown
> (./src/partials_layouts/author-posts.njk)
  Template render error: (/Users/chuck/comml-projects/FFSite.git/src/partials_layouts/_breadcrumbs.njk)
  TypeError: posts.forEach is not a function

`Template render error` was thrown:
    Template render error: (./src/partials_layouts/author-posts.njk)
      Template render error: (/Users/chuck/comml-projects/FFSite.git/src/partials_layouts/_breadcrumbs.njk)
      TypeError: posts.forEach is not a function
        at Object._prettifyError (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/lib.js:36:15)
        at /usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:561:19
        at eval (eval at _compile (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:631:18), <anonymous>:97:12)
        at /usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:569:11
        at Template.root [as rootRenderFunc] (eval at _compile (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:631:18), <anonymous>:53:3)
        at Template.render (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:550:10)
        at eval (eval at _compile (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/nunjucks/src/environment.js:631:18), <anonymous>:96:10)
        at fn (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/a-sync-waterfall/index.js:26:24)
        at /usr/local/lib/node_modules/@11ty/eleventy/node_modules/a-sync-waterfall/index.js:66:22
        at executeSync (/usr/local/lib/node_modules/@11ty/eleventy/node_modules/a-sync-waterfall/index.js:8:15)

Someone suggested using pagination.items instead of posts in the for-loop, but that did not have any effect on the problem.

I am not sure whether I'm just doing something wrong or if there is an actual bug. Any insights are appreciated!

[pdehaan]

Is this a dupe of #1601?

[cmcknight]

It's the same issue. I'm just posting it here as well. :-)

[cmcknight]

Problem solved. The solution is create the frontmatter as a Javascript object and use the before: property to filter the content. From that point, pagination works as expected.

Frontmatter before:

---
title: Blog
permalink: "/authors/john-doe/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}{% endif %}/index.html"
layout: author-posts.njk
author: John Doe
pagination:
  data: collections.posts
  size: 4
  reverse: true
  alias: posts
breadcrumbs:
  - label: Home
    url: /
  - label: Blog
    url: /blog/
  - label: John Doe
---

Frontmatter afterwards:

---js
{
  title: "Blog",
  permalink: "/authors/john-doe/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}{% endif %}/index.html",
  layout: "author-posts.njk",
  author: "John Doe",
  breadcrumbs: [ {label: "Home", url: "/"}, {label: "Blog", url: "/blog/"}, {label: "John Doe"}],
  pagination: {
    data: "collections.posts",
    size: 4,
    reverse: true,
    alias: "posts",
    before: function(data) { return data.filter(x => x.data.author === "John Doe" )}
  }
}
---

The Nunjucks template then goes from:

{% for post in posts | byAuthor( author ) %}
  <article>
    <div class='article-header'>
      <h2><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
      <time datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>
    </div>
    <div>
      {% excerpt post %}
      <p class="text-right read-more-link">
      <a href="{{ post.url | url}}">Read more...</a>
      </p>
    </div>
  </article>
  {% endfor %}

to:

{% for post in posts %}
  <article>
    <div class='article-header'>
      <h2><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>
      <time datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>
    </div>
    <div>
      {% excerpt post %}
      <p class="text-right read-more-link">
      <a href="{{ post.url | url}}">Read more...</a>
      </p>
    </div>
  </article>
{% endfor %}

I'd suggest having the docs call out that using the Javascript frontmatter is the only way to do this sort of thing. None of the templating languages seem to support adding a function as the before: property (which I guess makes sense).

[Ryuno-Ki]

From what I've heard in other discussion items, there seem to be a way to mark a reply as solution.
Could you do so?