Changes default sort on SSG and CMS pages

Author: zachleat

.eleventy.js

@@ -1,3 +1,4 @@
+const lodashGet = require("lodash/get");
 
 module.exports = function(eleventyConfig) {
 
@@ -104,18 +105,34 @@ module.exports = function(eleventyConfig) {
   });
 
   // sort an array of objects by one object key value
-  eleventyConfig.addFilter('sortKey', (arr, key) => {
+  // can also get fancy and do a lodash.get selector string too
+  // see https://lodash.com/docs/4.17.15#get
+  eleventyConfig.addFilter('sortKey', (arr, selector) => {
     return arr.sort((a, b) => {
-      let aKey = a[key].toLowerCase();
-      let bKey = b[key].toLowerCase();
+      let aKey = lodashGet(a, selector).toLowerCase();
+      let bKey = lodashGet(b, selector).toLowerCase();
       if(aKey < bKey) {
         return -1;
       } else if(aKey > bKey) {
         return 1;
       }
       return 0;
-    })
-  })
+    });
+  });
+
+  eleventyConfig.addFilter('sortTools', (arr, githubData) => {
+    return arr.sort((a, b) => {
+      let aKey = githubData[a.data.repo] ? (githubData[a.data.repo].stars || 0) : 0;
+      let bKey = githubData[b.data.repo] ? (githubData[b.data.repo].stars || 0) : 0;
+      if(aKey < bKey) {
+        return 1;
+      } else if(aKey > bKey) {
+        return -1;
+      }
+      return 0;
+    });
+  });
+
 
   // favicons files
   eleventyConfig.addPassthroughCopy("src/site/browserconfig.xml");

package.json

@@ -28,6 +28,7 @@
     "fast-glob": "^3.2.4",
     "gray-matter": "^4.0.2",
     "js-yaml": "^3.13.1",
+    "lodash": "^4.17.20",
     "luxon": "^1.23.0",
     "markdown-it": "^11.0.1",
     "netlify-plugin-minify-html": "^0.2.2",

src/site/generators.njk

@@ -14,7 +14,7 @@ layout: layouts/base.njk
 
 <section class="cards mt-12">
   <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-  {% for item in collections.generators %}
+  {% for item in collections.generators | sortTools(github) %}
     {{ cards.repo(item, loop.index0, github) }}
   {% endfor %}
   </div>

src/site/headless-cms.njk

@@ -14,7 +14,7 @@ layout: layouts/base.njk
 
 <section class="cards mt-12">
   <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-  {% for item in collections.cms %}
+  {% for item in collections.cms | sortTools(github) %}
     {{ cards.repo(item, loop.index0, github) }}
   {% endfor %}
   </div>