Randomize user list on build (#220)

Author: jbampton

.eleventy.js

@@ -23,9 +23,21 @@ module.exports = function(eleventyConfig) {
     }
   });
 
-  // 3. Collection setup
-  eleventyConfig.addCollection("people", function(collectionApi) {
-    return collectionApi.getFilteredByGlob("src/users/*.yaml");
+  // 2. The Randomized Collection
+  eleventyConfig.addCollection("randomPeople", function(collectionApi) {
+    // Grab all yaml files from the users folder
+    const people = collectionApi.getFilteredByGlob("src/users/*.yaml");
+
+    // Create a copy of the array to avoid mutating the original global collection
+    let shuffled = [...people];
+
+    // Fisher-Yates Shuffle
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+
+    return shuffled;
   });
 
   return {

src/index.njk

@@ -54,7 +54,7 @@ layout: false
 
   <main class="max-w-7xl mx-auto px-4 pb-24">
     <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
-      {% for person in collections.people %}
+      {% for person in collections.randomPeople %}
       <div class="user-card group card-glow bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden flex flex-col hover:-translate-y-2 hover:border-indigo-400 dark:hover:border-indigo-500 scroll-mt-32">
 
         <div class="p-8">