Computed date from 11tydata.js in a directory not used in sorting collection.

[gigamonkey]

Describe the bug

Computed date from 11tydata.js in a directory not used in sorting collection.

To Reproduce

Make two files in the same directory and collection (slides in this case) with the titles Numbers and Booleans and then make a 11tydata.js file like this:

const dates = {
  'Numbers': '2022-08-17',
  'Booleans': '2022-08-15',
};

module.exports = {
  eleventyComputed: {
    date: (data) => dates[data.title]
  }
};

Then put code like this somewhere to iterate over the collection:

<p>
  <ul>
    {%- for deck in collections.slides -%}
    <li><a href="{{deck.url}}">{{ deck.data.title }} ({{ deck.data.date }})</a></li>
    {%- endfor -%}
  </ul>
</p>

Expected behavior

I would expect the items in the list to be sorted by the dates set in slides.11tydata.js.

Instead the items are sorted as if there is no data value even though it is rendered in the output.

If I set the dates in the templates for the pages themselves. If I have date specified in both places for each page the sorting seems to be by the one in the template and the final output seems to come from the 11tydata.js file.

Environment:

• OS and Version: Mac
• Eleventy Version 1.0.1

[pdehaan]

I think what's happening is that Eleventy sorts collections based on "the input file's Created Date", per https://www.11ty.dev/docs/collections/#sorting (but you can override content dates and alter sort order by specifying the date property in the front matter, per Overriding Content Dates).

… but by setting the date via eleventyComputed you're actually setting a date string in the data.date property versus the page.date property (lots of other good info in https://www.11ty.dev/docs/dates/).

Here was my test template:

---
title: Booleans
---

<h1>{{ title }}</h1>
<p>date={{ date }}</p>
<p>{{ page.date }}</p>

This gave me the following output:

<h1>Booleans</h1>
<p>date=2022-07-15</p>
<p>Thu Jul 28 2022 16:15:39 GMT-0700 (Pacific Daylight Saving Time)</p>

So note that the date front matter value is the string from our directory data file's computed property, but the page date is the current date.

One possible workaround is to create a new collection with the same name as the specified collection, and custom sort based on the date front matter key:

  eleventyConfig.addCollection("slides", function (collectionApi) {
    return [...collectionApi.getFilteredByTag("slides")]
      .sort((a, b) => new Date(a.data.date) - new Date(b.data.date));
  });

[gigamonkey]

I guess that makes some sense. Though it certainly went against my mental model that all the different ways of specifying data were eventually merged into the same place. And it halfway works that way, I guess. Anyway, this was only an issue because I was generating the template files from another system and it was a bit of a pain to put the date into the front matter which was why I was doing this in the first place. But I've since sorted that out. So leave it to you all to decide whether the current behavior is desired or not. Cheers!

[pdehaan]

@gigamonkey I guess another solution is to rename your input file to something like /src/slides/2022-08-17-numbers.njk which will set the expected page date and fix your sorting; although that also means your output file would be something like /dest/slides/2022-08-17-numbers/index.html so you'd still end up setting the permalink in the files to /slides/numbers/ if you wanted to retain the slides/numbers/index.html output file structure.
Or in my quick local test, you can override the permalinks in the data directory file:

module.exports = {
  tags: [ "slides" ],
  permalink: "{{ page.filePathStem | url }}/"
};

[11ty] Writing www/slides/Numbers/index.html from ./src/slides/2022-04-17-Numbers.njk
[11ty] Writing www/slides/Booleans/index.html from ./src/slides/2022-07-15-Booleans.njk
[11ty] Writing www/slides/index/index.html from ./src/slides/index.njk
[11ty] Wrote 3 files in 0.05 seconds (v1.0.1)

Where my ./src/slides/2022-07-15-Booleans.njk file looks like this:

---
title: Booleans
---

<h1>{{ title }}</h1>
<p>{{ page.date }}</p>

<h1>Booleans</h1>
<p>Thu Jul 14 2022 17:00:00 GMT-0700 (Pacific Daylight Saving Time)</p>