styled buttons for library downloads, update content

assets/javascript/libraries.js

@@ -6,28 +6,35 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   function buildReleaseLinks(data) {
-    console.log(data);
     let releaseList = document.querySelector('.release-list');
 
     data.assets.forEach(function(asset) {
       let name = asset.name;
 
       if (name.slice(-6) === 'ignore') {
+        // any .ignore files in the assets list
         return;
       }
 
       let versionId = name.replace(/(-[\d]+.zip$)/, '');
+      let versionElement = document.getElementById(versionId);
 
-      console.log(name);
+      if (!versionElement) {
+        // likely an older version we don't want to link to, such as 2.x
         return;
-      let divElement = document.createElement('div');
+      }
+
+      let iconElement = document.createElement('i');
+      iconElement.className = "fas fa-download";
+
       let linkElement = document.createElement('a');
-      linkElement.title = asset.name;
+      linkElement.title = "Library Bundle Download";
       linkElement.href = asset.browser_download_url;
+      linkElement.className = "purple-button-link";
       let linkText = document.createTextNode(asset.name);
       linkElement.appendChild(linkText);
-      liElement.appendChild(linkElement);
-      releaseList.appendChild(liElement);
+      linkElement.appendChild(iconElement);
+      versionElement.appendChild(linkElement);
     });
   }
 

assets/sass/base/_base.scss

@@ -19,3 +19,17 @@ h1, h2, h3, h4, h5 {
   max-width: 100%;
   height: auto;
 }
+
+a.purple-button-link {
+  display: inline-block;
+  width: auto;
+  padding: 15px 30px 15px 30px;
+  color: #fff;
+  border-radius: 5px;
+  border: none;
+  background-color: $purple;
+
+  i {
+    padding-left: 10px;
+  }
+}

libraries/contributing.html

@@ -63,8 +63,8 @@ permalink: /libraries/contributing
       Every repo should have a <code>libraryname_simpletest.py</code> file in the examples folder at a
       minimum. Any other included examples should be prefixed with <code>libraryname_</code> so all
       examples found in any given repo folder start with the library name followed by an underscore.
-      The GitHub end of things is a simple fix, however, please be aware <b>many examples are linked in
-      Learn guides</b>. You should mention in your pull request that it is possible that guides will
+      The GitHub end of things is a simple fix, however, please be aware many examples are linked in
+      Learn guides. You should mention in your pull request that it is possible that guides will
       require updating to match the new example name.
     </p>
     <!-- The rest of the script info goes here -->

libraries/index.html

@@ -21,7 +21,7 @@ permalink: /libraries
     <p>
       The full list of all the CircuitPython libraries contained in the following bundles
       can be found on the
-      <a href="https://circuitpython.readthedocs.io/projects/bundle/en/latest/drivers.html">libraries page</a>.
+      <a href="https://circuitpython.readthedocs.io/projects/bundle/en/latest/drivers.html" title="">libraries page</a>.
     <h2>Download and Installation Instructions</h2>
     <p>
       The libraries in each release are compiled to .mpy for all recent major versions
@@ -32,7 +32,7 @@ permalink: /libraries
       .mpy library bundle!
     </p>
     <p>
-      To install, download the appropriate bundle for your version of CircuitPython.
+      <b>To install</b>, download the appropriate bundle for your version of CircuitPython.
       Unzip the file, open the resulting folder and find the lib folder. Open the lib
       folder and find the library files you need to load. Create a lib folder on your
       CIRCUITPY drive. Copy the individual library files you need to the lib folder
@@ -80,13 +80,20 @@ permalink: /libraries
       If you'd like to contribute to the CircuitPython project, the CircuitPython
       libraries are a great way to begin. Everyone is welcome to contribute!
       Regardless of your experience level, we have many resources to get you
-      started. Check out the link below for more detailed information about how
-      you can contribute to CircuitPython libraries!
+      started. Check out the Contributing page for detailed information!
+    </p>
+    <p>
+      Find out more about how you can
+      <a href="{{ "/libraries/contributing" | relative_url  }}" title="Contributing Page">contribute to CircuitPython libraries</a>.
     </p>
     <!-- (can we even include the date like this?) -->
     <h2>Library Activity for Week of  {{ site.data.libraries.updated_at | date: "%a, %b %d, %Y" }}</h2>
     <p>
-      Thank you to this week's contributors!
+      Thank you to this week's contributors:
+      {% for contributor in site.data.libraries.contributors %}
+        <a href="https://github.com/{{contributor}}" title="Contributor Name">{{contributor}}</a>{% if forloop.last != true %}, {% endif %}
+
+      {% endfor %}
     </p>
     <!-- pull the first section of the script report into this spot - (the PR's merged authors/reviewers and Issues opened/closed bit) -->
     <p>
@@ -96,7 +103,7 @@ permalink: /libraries
       <h3>New Libraries</h3>
       <ul>
       {% for library in site.data.libraries.library_updates.new %}
-        <li><a href="{{library[1]}}">{{library[0]}}</a></li>
+        <li><a href="{{library[1]}}" title="New Library Location">{{library[0]}}</a></li>
       {% endfor %}
       </ul>
     </div>
@@ -104,14 +111,10 @@ permalink: /libraries
       <h3>Updated Libraries</h3>
       <ul>
       {% for library in site.data.libraries.library_updates.updated %}
-        <li><a href="{{library[1]}}">{{library[0]}}</a></li>
+        <li><a href="{{library[1]}}" title="Updated Library Location">{{library[0]}}</a></li>
       {% endfor %}
       </ul>
     </div>
-    <p>
-      Find out more about how you can
-      <a href="{{ "/libraries/contributing" | relative_url  }}">contribute to CircuitPython libraries</a>.</p>
-    </p>
   </div>
 </div>