select and show the libraries based on label

assets/javascript/contributing.js

@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', function() {
+  var issueSelect = document.querySelector(".open-issues select");
+  issueSelect.onchange = issueSelectHandler;
+}, false);
+
+function issueSelectHandler(event) {
+  var selectedOption = this.options[this.selectedIndex].value;
+
+  // hide all elements first
+  [].forEach.call(document.querySelectorAll('.issues-list li'), function (element) {
+    element.style.display = 'none';
+    element.parentElement.closest('li').style.display = 'none';
+  });
+
+  // show the selected options
+  var items = document.querySelectorAll(`.issues-list .${selectedOption}`);
+  items.forEach(function(item) {
+    item.style.display = 'block'
+    item.parentElement.closest('li').style.display = 'block';
+  });
+}
+

libraries/contributing.html

@@ -52,20 +52,17 @@ permalink: /libraries/contributing
         create labels array by looping through labels of each issue
         ensuring unique for select list
       {% endcomment %}
-      {% assign labels = "" | split: "," %}
+      {% assign labels = "All" | split: "," %}
       {% for library in site.data.libraries.open_issues %}
         {% for issue in library[1] %}
             {% for label in issue.labels %}
-              {% if label == "None" %}
-                {% continue %}
-              {% endif %}
               {% assign labels = labels | push: label | uniq %}
             {% endfor %}
         {% endfor %}
       {% endfor %}
       <select>
         {% for label in labels %}
-          <option value='{{ label }}'>{{ label }}</option>
+          <option value='{{ label | downcase | replace: ' ', '-' }}'>{{ label | capitalize }}</option>
         {% endfor %}
       <select>
       <h3>Open Issues</h3>
@@ -73,9 +70,14 @@ permalink: /libraries/contributing
        {% for library in site.data.libraries.open_issues %}
          <li>
            {{library[0]}}
-           <ul>
+           <ul class="issues-list">
            {% for issue in library[1] %}
-              <li><a href="{{ issue.url }}">{{ issue.title }}</a></li>
+            {% capture classes %}
+              {% for label in issue.labels %}
+                {{ label | downcase | replace: ' ', '-' }}
+              {% endfor %}
+            {% endcapture %}
+            <li class="{{ classes | strip }}"><a href="{{ issue.url }}">{{ issue.title }}</a></li>
            {% endfor %}
            </ul>
          </li>