Eleventy: Change default global sort order for collections (ascending or descending)

[zachleat]

Surfaced in #192 by @paulrobertlloyd https://github.com/11ty/eleventy/issues/194#issuecomment-441702060

By default everything is ascending, expose a global configuration option to sort everything descending.

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[paulrobertlloyd]

Providing additional details here as a use case.

Typically need to have collections sorted in date descending order

The option to reverse pagination arrays in #194 has been a boon, allowing me to simplify the curation of collections using tags in data files, rather than globbing files in the config file. However, in pretty much every instance, I am having to use reverse: true or manipulate collections in Liquid to have collections reversed. It feels as if I’m working against the grain a little.

Difficulty reversing collections correctly in Liquid templates

I have added a post tag to several different directory data files, for which I’m also using different tags to for finer-grained collections. For example, notes are tagged with post and note while articles are tagged with post and article. I then wish to iterate through collections.post in date descending order for my RSS feeds and search index. To achieve this, I tried to use the following Liquid template:

{% for item in collections.post limit: 25 reversed %}
  …
{% endfor %}

Without limiting the number of items returned, items are returned as expected (all items tagged post in date descending order). However, by limiting the array, the 25 oldest items in date descending order are returned, rather than the newest.

To remedy, I have created the following collection within my config file:

eleventy.addCollection('post', collection => {
  return collection.getFilteredByGlob('**/+(articles|bookmarks|notes|photos|presentations|projects)/**/*.md').reverse();
});

That is to say, reversing the array of collections earlier in the build process makes manipulating them much easier within templates. I hope this information proves useful when considering the design of this feature.

[babycourageous]

Thanks @paulrobertlloyd - came across this while having my own reverse filtering in liquid problems. I created a collection via getFilteredByGlob then applying the filter in my HTML with liquid

{% assign posts = collections.posts | reverse %}

This had no effect (for me even without a limit). Posts were still displaying in the default ascending order. I went ahead and opted to reverse them in the config as you have done instead.

Seems that the liquid filter should work tho, no?

[jeremenichelli]

As an input from my Jekyll to Eleventy migration, it would be good if Eleventy behaved as jekyll out-of-the-box to bring them closer and make adoption and migration easier.

As @paulrobertlloyd, I needed to used reversed (for some reason isn't named like liquid reverse one) on my posts collection, but when I apply a limit, then I get the oldest 7, instead of the newest 7 posts.

My work around was to break down the filters in two steps with an assign:

{% assign posts = collections.posts | reverse %}

<ul>
{%- for post in posts limit: 7 -%}
  <li>{{ post.data.title }}</li>
{%- endfor -%}
</ul>

While in Jekyll this is only:

{% for post in site.posts limit: 7 %}
  <li>{{ post.data.title }}</li>
{% endfor %}

If we could bring these two closer, via eleventy or liquidjs it would be awesome as most of the sites built are blogs containing posts and articles, so it's a potential common pitfall in the migration.

Making collections _reversed_ by default, from recent to oldest as in Jekyll might be a good start, though a breaking change.