Add ability to sort ecosystem cards by title

Author: Brandon Green

_includes/ecosystem_sort.html

@@ -20,6 +20,14 @@
       <li>
         <a class="ecosystem-filter" id="sortDateOld">Date Added - Oldest</a>
       </li>
+
+      <li>
+        <a class="ecosystem-filter" id="sortTitleHigh">Title - A-Z</a>
+      </li>
+
+      <li>
+        <a class="ecosystem-filter" id="sortTitleLow">Title - Z-A</a>
+      </li>
     </ul>
   </div>
 </div>

assets/filter-hub-tags.js

@@ -4,7 +4,7 @@ var displayCount = Number(filterScript.attr("display-count"));
 var pagination = filterScript.attr("pagination");
 
 var options = {
-  valueNames: ["github-stars-count-whole-number", { data: ["tags", "date-added"] }],
+  valueNames: ["github-stars-count-whole-number", { data: ["tags", "date-added"] }, { data: ["tags", "title"] }],
   page: displayCount
 };
 
@@ -92,3 +92,11 @@ $("#sortDateNew").on("click", function() {
 $("#sortDateOld").on("click", function() {
   hubList.sort("date-added", { order: "asc" });
 });
+
+$("#sortTitleLow").on("click", function() {
+  hubList.sort("title", { order: "desc" });
+});
+
+$("#sortTitleHigh").on("click", function() {
+  hubList.sort("title", { order: "asc" });
+});

ecosystem/ecosystem.html

@@ -34,7 +34,7 @@ <h1>
           {% assign ecosystem = site.ecosystem  | sort_natural: "title" %}
 
           {% for item in ecosystem %}
-            <div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}" data-date-added="{{ item.date-added }}">
+            <div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}" data-date-added="{{ item.date-added }}" data-title="{{ item.title }}">
               <div class="card ecosystem-card">
                 <a href="{{ item.link }}" target="_blank">
                   <div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">