Tag posts grouped by year

[robindotis]

I see a similar question was asked a few days ago, but I think this is slightly different. I have a page which lists all posts of a tag (tagged.njk), it is based on this quick tip on the eleventy site.

I am trying group all the posts on that page by year. The code in tagged.njk looks like this:

---
layout: layouts/page.njk
pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - all
    - nav
    - post
    - posts
    - tagList
  addAllPagesToCollections: true
eleventyComputed:
  title: Posts tagged “{{ tag }}”
permalink: /archive/tagged/{{ tag | slug }}/
---
{% set postslist = collections[ tag ] %}

{% for year, yearPosts in postslist | groupByYear %}
  <h2 class="all-posts-list">{{ year }}</h2>
  <p>Posts: {{ yearPosts.length }} </p>
  <ul class="postlist">
    {% for post in yearPosts | reverse %}
      <li class="custom-{{post.data.theme}}">
        <a href="{{ post.url | url }}" class="post-title">{{ post.data.title }}</a>
        <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
      </li>
    {% endfor %}
  </ul>
{% endfor %}

And the groupByYear filter looks like this in eleventy.js:

  eleventyConfig.addFilter("groupByYear", (collection) => {
    return _.chain(collection)
      .groupBy((post) => post.date.getFullYear())
      .toPairs()
      .reverse()
      .value();
  });

On a usual collection this works, but using the above "tag" based collection, I get this error:

[11ty] 1. Having trouble rendering njk template ./src/archive/tagged.njk (via TemplateContentRenderError)
[11ty] 2. (./src/archive/tagged.njk)
[11ty]   TypeError: Cannot read property 'getFullYear' of undefined (via Template render error)
[11ty]
[11ty] Original error stack trace: Template render error: (./src/archive/tagged.njk)
[11ty]   TypeError: Cannot read property 'getFullYear' of undefined

As far as I can tell, this is telling me I can't call "getFullYear" on the date of these tagged collections. But I don't understand why or if I am doing something wrong.

Thanks for any help,
Robin

[robindotis]

I managed to get this working by changing the filter to this:

  eleventyConfig.addFilter("groupByYear", (collection) => {
    return _.chain(collection)
      .groupBy((post) => DateTime.fromJSDate(post.date).year)
      .toPairs()
      .reverse()
      .value();
  });

I do not understand why with the tagged collection I apparently need to create the "post.date" value as a date object, but in the other collections I do not.

[pdehaan]

re: TypeError: Cannot read property 'getFullYear' of undefined,

If I’m reading correctly it’s saying one or more post.date values are undefined.
I’d probably try converting the groupBy to a 2-line function and console log each post’s date and title/url and see if something looks irregular. Curious that date parsing w/ luxon would fix it unless that method is returning null/undefined silently. Or converting a potentially an undefined date into the current date and returning the current year for some posts.

[robindotis]

I don't think it's related to the data of the posts, although I will check using your suggestion.

I display a list of posts in two ways. One is using the method described in my original post to show all posts of a given tag (using directly the method from the eleventy site). The other is on an archive page listing all the posts. There I have the following front matter in archive.md:

---
layout: layouts/archive.njk
title: Archive
menuLocation: top
pagination:
  data: collections.posts
  size: 9999999
  alias: posts
eleventyNavigation:
  key: Archive
  order: 300
permalink: "/archive/"
---

and the following code in archive.njk

---
layout: layouts/base.njk
---

<article>
  <header>
    <h1>{{ title }}</h1> 
  </header>
  {{ content | safe }}  

  {% set postslist = posts %}

  {% for year, yearPosts in postslist | groupByYear %}
    <h2 class="all-posts-list">{{ year }} <span>({{ yearPosts.length }} posts)</span></h2>
    <ul class="postlist">
      {% for post in yearPosts | reverse %}
        <li class="custom-{{post.data.theme}}">
          <a href="{{ post.url | url }}" class="post-title">{{ post.data.title }}</a>
          <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
        </li>
      {% endfor %}
    </ul>
  {% endfor %}
</article>

This works fine and lists all my posts, so I don't think there is a data issue. The tagged page is essentially a subset of this archive page. So if there is a data issue on the tagged page I would expect it to happen on the archive page as well. To me it seems like an issue in the way the collections are created.

Anyway, I have a work around now, but I will see if I can find a data issue somewhere using the console log method. Thanks.