Members: allow user to choose what to sort by

src/components/GridMemberList.astro

@@ -13,7 +13,13 @@ const members = await getMembers();
 <div class="grid-member-list">
   <div class="members">
     {sortMembersByDevs(members).map((member) =>
-      <a class="member sneaky" href={`/members/${member.id}`}>
+      <a
+        class="member sneaky"
+        href={`/members/${member.id}`}
+        data-ndevs={member.data.annualReports[0].averageNumberOfDevs}
+        data-join-date={member.data.joinDate}
+        data-name={member.data.name}
+      >
         <div class="main">
           <img src=`/images/members/${member.id}/logo.webp` alt=`The ${member.data.name} logo`>
           <h2>

src/components/TabularMemberList.astro

@@ -22,9 +22,14 @@ const members = await getMembers();
       </th>
     </tr>
   </thead>
-  <tbody>
+  <tbody class="members">
     {sortMembersByDevs(members).map((member) =>
-      <tr>
+      <tr
+        class="member"
+        data-ndevs={member.data.annualReports[0].averageNumberOfDevs}
+        data-join-date={member.data.joinDate}
+        data-name={member.data.name}
+      >
         <td class="name">
           <a class="sneaky" href={`/members/${member.id}`}>
             <img src=`/images/members/${member.id}/logo.webp` alt=`The ${member.data.name} logo`>

src/memberData/common.ts

@@ -63,6 +63,15 @@ export function sortMembersByDevs(members: MemberWithId[]): MemberWithId[] {
   });
 }
 
+/**
+ * Sorts members by join date, newest first.
+ */
+export function sortMembersByJoinDate(members: MemberWithId[]): MemberWithId[] {
+  return [...members].sort((m1, m2) => {
+    return m2.data.joinDate.localeCompare(m1.data.joinDate);
+  });
+}
+
 /**
  * Sorts members by the dollars per dev in their latest annual report.
  */

src/pages/members/[id].astro

@@ -54,6 +54,10 @@ export async function getStaticPaths() {
 
         <a href={member.url}>Learn more →</a>
 
+        <p>
+          <em>Joined on {dayjs(member.joinDate).format('DD MMM YYYY')}.</em>
+        </p>
+
         {member.annualReports.map(report => <section class="annual-report">
           <div>
             <h2>

src/pages/members/index.astro

@@ -34,6 +34,15 @@ import svgList from '../../assets/icons/list.svg?raw';
           <TotalTally />
 
           <div class="controls">
+            <div>
+              Sort by
+              <select class="select sort-selector" autocomplete="off">
+                <option value="ndevs/desc">most devs</option>
+                <option value="ndevs/asc">fewest devs</option>
+                <option value="joinDate/desc">joined most recently</option>
+                <option value="joinDate/asc">joined longest ago</option>
+              </select>
+            </div>
             <div class="button-group">
               <button class="button button--small tabular-trigger">
                 <div class="icon icon--stroked">
@@ -75,7 +84,14 @@ import svgList from '../../assets/icons/list.svg?raw';
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     margin: 1rem 0;
+    @media (max-width: 500px) {
+      justify-content: center;
+      align-items: flex-end;
+      flex-direction: column-reverse;
+    }
   }
   .member-list-container[data-mode='grid'] {
     .tabular-member-list {
@@ -104,11 +120,58 @@ import svgList from '../../assets/icons/list.svg?raw';
 </style>
 
 <script>
+  function sortMembers($memberContainer: Element, sortBy: string) {
+    function sort($a: Element, $b: Element) {
+      if (!($a instanceof HTMLElement) || !($b instanceof HTMLElement)) {
+        return 0;
+      }
+      const aNDevsStr = $a.dataset.ndevs;
+      const bNDevsStr = $b.dataset.ndevs;
+      const aJoinDate = $a.dataset.joinDate;
+      const bJoinDate = $b.dataset.joinDate;
+      const aName = $a.dataset.name;
+      const bName = $b.dataset.name;
+      if (
+        aNDevsStr == undefined || bNDevsStr == undefined ||
+        aJoinDate == undefined || bJoinDate == undefined ||
+        aName == undefined || bName == undefined
+      ) {
+        return 0;
+      }
+      const aNDevs = +aNDevsStr;
+      const bNDevs = +bNDevsStr;
+
+      let diff = 0;
+      if (sortBy == 'ndevs/desc') {
+        diff = bNDevs - aNDevs;
+      } else if (sortBy == 'ndevs/asc') {
+        diff = aNDevs - bNDevs;
+      } else if (sortBy == 'joinDate/desc') {
+        diff = bJoinDate.localeCompare(aJoinDate);
+      } else if (sortBy == 'joinDate/asc') {
+        diff = aJoinDate.localeCompare(bJoinDate);
+      }
+      if (diff == 0) {
+        diff = aName.localeCompare(bName);
+      }
+
+      return diff;
+    }
+
+    const $members = Array.from($memberContainer.querySelectorAll('.member'));
+    const $sortedMembers = $members.sort(sort);
+
+    $sortedMembers.forEach(($member) => {
+      $memberContainer.appendChild($member);
+    });
+  }
+
   const $listContainer = document.querySelector('.member-list-container');
 
   if ($listContainer) {
-    const $tabularTriggers = document.querySelectorAll('.tabular-trigger');
-    const $gridTriggers = document.querySelectorAll('.grid-trigger');
+    const $tabularTriggers = $listContainer.querySelectorAll('.tabular-trigger');
+    const $gridTriggers = $listContainer.querySelectorAll('.grid-trigger');
+    const $sortSelector = $listContainer.querySelectorAll('.sort-selector');
 
     $tabularTriggers.forEach(($trigger) => {
       $trigger.addEventListener('click', () => {
@@ -121,5 +184,14 @@ import svgList from '../../assets/icons/list.svg?raw';
         $listContainer.setAttribute('data-mode', 'grid');
       });
     });
+
+    $sortSelector.forEach(($selector) => {
+      $selector.addEventListener('change', () => {
+        const $memberContainers = $listContainer.querySelectorAll('.members');
+        $memberContainers.forEach(($memberContainer) => {
+          sortMembers($memberContainer, ($selector as HTMLSelectElement).value);
+        });
+      });
+    });
   }
 </script>

src/styles/common.css

@@ -117,6 +117,7 @@ SPDX-License-Identifier: Apache-2.0
 
 * {
   box-sizing: border-box;
+  font-family: Libre Franklin, sans-serif;
 }
 :root {
   --color-bg: #080e17;
@@ -133,7 +134,6 @@ SPDX-License-Identifier: Apache-2.0
   display: none !important;
 }
 html {
-  font-family: Libre Franklin, sans-serif;
   font-size: 20px;
   line-height: 1.6;
   background-color: var(--color-bg);
@@ -412,6 +412,13 @@ blockquote {
     }
   }
 }
+.select {
+  padding: 0.5rem;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1rem;
+}
 section {
   margin: 4rem 0;
   @media (max-width: 800px) {