Order posts by multiple dates specified in frontmatter (creation date and modification date)

[Julianoe]

In my files front-matter I use 2 dates. One at creation called "date" and one called "modification" I update whenever I add new things to my markdown file. Every file as systematically a "date" info, only some of them have a modification date.

I'm not comfortable relying on file dates as these tend to be lost from time to time and I don't want to rely on git. That's why.
Now here is a filter that I managed to make work in Eleventy to order the posts after this rule : most recent modification date first, and fallback to creation date if there is no modification date defined.

    eleventyConfig.addFilter("sortByModificationFirst", (values) => {
        
        var array1 = [];
        var array2 = [];
        
        for (const date in values) {
        if (values[date].data.modification) {
            array1.push(values[date]);
        } else {
            array2.push(values[date]);
        }
        }

        var sorted1 = array1.sort(function(a,b) {
            return (a.data.modification < b.data.modification) ? 1 : -1
        }); 
        
        var sorted2 = array2.sort(function(a,b) {
            return (a.data.date < b.data.date) ? 1 : -1
        }); 
        
        const sorted = sorted1.concat(sorted2);  

        return sorted;
    })

In my template this is used like any other filter

{% for item in collections.posts | sortByModification %}
 ...
{% endfor %}

I'm not the creator of the code, I got help by this StackOverflow to implement this.

Apparently it could be way shorter but I could not make the suggested answer. That's why I used the more verbose one.. that worked for me.
If you manage to make this filter work in this more elegant version, please explain 🙂

        values.sort((a,b) => {
            ( ('data.modification' in b).localeCompare('date.modification' in a) ) 
            || (a.data.modification ?? '').localeCompare(b.data.modification ?? '') 
            || a.data.date - (b.data.date)
        })
        return values;
        // ➡️ results in error "TypeError: ("data.modification" in b).localeCompare is not a function (via Template render error)"

[Julianoe]

The previous answer sorted the posts with modification date first, and then those without modification date. Both were ordered by most recent but if there was a post without modification date that was very recent, it was listed only after the most ancient modification date.

To solve this I rewrote the script. Now the most recent post is shown first, calculating what date is the most recent (creation ou modification).

eleventyConfig.addFilter("sortByModification", (values) => {

// a function that will determine if the element has one or the other date and return the most recent one
function mostRecentDate( obj ) {
    if ( obj.data.date && obj.data.modification ) {
        return Math.max(obj.data.date,obj.data.modification);
    } else if ( obj.data.date && obj.data.modification == null ) {
        return obj.data.date;
    } else if ( obj.data.modification && obj.data.date == null ) {
        return obj.data.modification;
    } else {
        return null;
    }
}
// const sorted = merged.sort(compare);

const tempArr = [];
// parse our data
// determine what is the most recent datetime between date or modification
// and build an array where each post has two entries: most recent date and the data
values.forEach(element => {
    tempArr.push([ mostRecentDate(element), element]);
});

// order by most recent date
// a[0] is the most recent date we defined earlier
tempArr.sort(function(a,b) {
    return (a[0] < b[0]) ? 1 : -1
});

// rebuild a simple array of post items
const sorted = [];
tempArr.forEach( item => {
    sorted.push(item[1]);
})
return sorted;

})

I bet there is a more efficient way to do it. If someone wants to share with us how you'd do it please share it (or answer this stackoverflow)

[pdehaan]

Something like this might work:

/**
 * @typedef {import('@11ty/eleventy/src/UserConfig')} EleventyConfig
 * @typedef {ReturnType<import('@11ty/eleventy/src/defaultConfig')>} EleventyReturnValue
 * @type {(eleventyConfig: EleventyConfig) => EleventyReturnValue}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addFilter("sortByModification", function (values = []) {
    // Sort descending; newest first.
    return values.sort((a, b) => mostRecentDate(b) - mostRecentDate(a));
  });
};

// a function that will determine if the element has one or the other date and return the most recent one
function mostRecentDate(obj = {}) {
  const { date, modification } = obj.data;
  // `date` and `modification` are truthy.
  if (date && modification) {
    return Math.max(date, modification);
  }
  // `date` or `modification` (or both) are falsy.
  return date || modification || null;
}

[Julianoe]

That's way more elegant! Thanks for sharing your knowledge with me! And thanks for helping me with all those question about 11ty. You have a special place in the credits section of my new website :) https://julianoe.eu.org/credits/