What's the correct way to get data to a layout so I can do a "groupby" on it?

[davidrhoden]

My site is https://davidrhoden.com, and the page in question is https://davidrhoden.com/timeline-unpaginated (it is paginated, but that's part of the question). The repo is https://github.com/davidrhoden/davidrhoden-basic-netlify.

What I'm trying to do is:
get all posts in chronological order,
group them by the year,
print the year (once, at the start of the group) and print the image from each post (with a link to the post). A visual timeline, basically.

I already have a paginated index of all my posts in chronological order, so I tried to adapt that for this purpose. I set the pagination value very high (300), and the images do appear in (reverse) chronological order, as they do in my other index of posts.

However, the posts are not grouping on the date value of the posts. It appears to be grouping by the date on the .md file that refers to the .njk layout file. So it is grouping, it just groups all posts into that one date. I must have something syntactically wrong in the way I've written it, or else my method of collecting all the posts is not the best.

Here's the .njk code (timeline-unpaginated.njk)

---
layout: layouts/base.njk
section: timeline-unpaginated
---
<article class="flex flex-wrap">
{% for year, posts in posts | groupby("date.year") %}
  justYear: {{ date | justYear }},
  date.year: {{ date.year }},
  year: {{ year }}:
  {% for post in posts %}
    <div class="left">
      {{ post.data.date.year }}
      <a href="{{ post.url | url }}">
        {% if post.data.image %}
        <img class="tiny-thumbnail" src="{{ post.data.image }}?nf_resize=smartcrop&h=32&w=32">
        {% endif %}
      </a>
    </div>
  {% endfor %}
{% endfor %}
</article>

And the .md file: (timeline-unpaginated.md):

---
layout: layouts/timeline-unpaginated.njk
title: Timeline of all posts
date: 2020-07-15
permalink: "/timeline-unpaginated/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
pagination:
  data: collections.post
  size: 300
  alias: posts
  reverse: true
---

You can see the output at https://davidrhoden.com/timeline-unpaginated/. "justYear" is a filter I made to output just the year part of the date. {{ post.data.date.year }} is in there just to test if it would return a value, and it doesn't.

Can anyone with more experience suggest where I'm going wrong? My feeling is that passing the data through the .md file's front matter is wrong, but I've tried a lot of variations, and this was the way it comes closest to working.

[davidrhoden]

The method I found here worked for me: How do you list all posts grouped by year? #1284

[edwardhorsford]

Here's how I do it using two custom collections.