chore(site): fix site sorters, make them generalized

site/11ty/sort.filter.js

@@ -1,31 +1,47 @@
 module.exports = (config) => {
-  /** Generic sort njk filter */
-  const createSortFilter = (comparer) => (values) => {
-    if (!Array.isArray(values)) {
-      console.error(`Unexpected values for sort filter: ${values}`);
-      return values;
-    }
-    return [...values].sort(comparer);
-  };
-
-  // Utils
+  /** Resolve date from item */
   const resolveDate = (item) => new Date(item.date).getTime();
+  /** Resolve date from item without fileUpdateDate fallback */
   const resolveMetaDate = (item) => item.data.date ? new Date(item.date).getTime() : Number.POSITIVE_INFINITY;
 
-  /** Comparer composer */
-  const compose = (...cmps) => (a, b) => cmps.reduce((res, cmp) => res || cmp(a, b), 0);
-
-  /** Name metadata comparer */
-  const nameComparer = (a, b) => a.data.name.localeCompare(b.data.name);
-  /** Order metadata comparer */
-  const orderComparer = (a, b) => (a.data.order || 0) - (b.data.order || 0);
   /** Date metadata comparer */
   const dateComparer = (a, b) => resolveDate(a) - resolveDate(b);
   /** Date metadata comparer (will not use file creation date) */
-  const dateComparerStrict = (a, b) => resolveMetaDate(a) - resolveMetaDate(b);
+  const metaDateComparer = (a, b) => resolveMetaDate(a) - resolveMetaDate(b);
+
+  /** Order metadata comparer */
+  const orderComparer = (a, b) => (a.data.order ?? 0) - (b.data.order ?? 0);
 
-  config.addFilter('sortByName', createSortFilter(nameComparer));
-  config.addFilter('sortByNameAndOrder', createSortFilter(compose(orderComparer, nameComparer)));
-  config.addFilter('sortByDate', createSortFilter(dateComparer));
-  config.addFilter('sortByDateStrict', createSortFilter(dateComparerStrict));
+  /** Abstract string comparer */
+  const stringComparer = (field) => (a, b) => {
+    const aField = a.data[field] || '';
+    const bField = b.data[field] || '';
+    return aField.localeCompare(bField, 'en');
+  };
+
+  /** Build comparer for field */
+  const buildComparer = (field) => {
+    switch (field) {
+      case 'date':
+        return dateComparer;
+      case 'meta-date':
+        return metaDateComparer;
+      case 'order':
+        return orderComparer;
+      default:
+        return stringComparer(field);
+    }
+  };
+
+  /** Comparer composer */
+  const compose = (...comparers) => (a, b) => comparers.reduce((res, cmp) => res || cmp(a, b), 0);
+
+  config.addFilter('sortBy', (values, ...fields) => {
+    if (!Array.isArray(values)) {
+      console.error(`Unexpected values for sort filter: ${values}`);
+      return values;
+    }
+    const comparers = fields.map(buildComparer);
+    return [...values].sort(compose(...comparers));
+  });
 };

site/views/_includes/landing/newsline.njk

@@ -1,5 +1,5 @@
 {% from 'landing/newsline-item.njk' import newsitem with context %}
-{% set releasedNews = collections.news | released | sortByDateStrict | reverse %}
+{% set releasedNews = collections.news | released | sortBy('meta-date') | reverse %}
 {% if releasedNews.length %}
   <div class="newsline container">
     <h2>{{ landing.news.title }}</h2>

site/views/_includes/navigation/footer-menu.njk

@@ -8,7 +8,7 @@
              close-on-esc>
     <ul class="footer-list">
       {% if collections[collection] %}
-        {% for item in collections[collection] | exclude('data.hidden') | releasedStrict | sortByNameAndOrder %}
+        {% for item in collections[collection] | exclude('data.hidden') | releasedStrict | sortBy('order', 'name') %}
           <li class="footer-item">
             <a class="footer-link" href="{{ item.url | url }}">{{ item.data.name }}</a>
           </li>

site/views/_includes/navigation/sidebar-item.njk

@@ -37,7 +37,7 @@
              fallback-duration="400">
     <ul class="sidebar-nav-secondary-list">
       <esl-a11y-group targets="::child(li)::find(.sidebar-nav-secondary-link)"></esl-a11y-group>
-      {% for item in items | sortByNameAndOrder %}
+      {% for item in items | sortBy('order', 'name') %}
         {% set isActive = page.url === item.url %}
         {% set isDraft = [].concat(item.data.tags).includes('draft') %}
         {% set isNew = [].concat(item.data.tags).includes('new') %}

site/views/_layouts/collection-grid.njk

@@ -6,7 +6,7 @@ banner:
 <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
 
 <ul class="collection-grid unstyled-list {{ 'collection-grid-column' if list }}">
-  {% for item in collections[collection] | released | exclude('data.hidden') | sortByNameAndOrder %}
+  {% for item in collections[collection] | released | exclude('data.hidden') | sortBy('order', 'name') %}
     {% set isDraft = [].concat(item.data.tags).includes('draft') %}
     {% set isBeta = [].concat(item.data.tags).includes('beta') %}
     {% set isNew = [].concat(item.data.tags).includes('new') %}

site/views/examples/carousel.njk

@@ -18,7 +18,7 @@ eleventyImport:
 <section class="row">
   <div class="col-12">
     <uip-root>
-      {% for sample in collections['carousel-sample'] | sortByNameAndOrder %}
+      {% for sample in collections['carousel-sample'] | sortBy('order', 'title') %}
         <script type="text/html"
                 label=" {{ sample.data.title }}"
                 uip-snippet