load random guides from learn api

Author: jwcooper

_config.yml

@@ -39,6 +39,8 @@ collections:
 jekyll_get_json:
   - data: libraries
     json: "https://adafruit-circuit-python.s3.amazonaws.com/adabot/web/libraries.v2.json"
+  - data: guides
+    json: "https://learn.adafruit.com/api/categories/circuitpython.json?count=10&guides_only=true&random=true"
 
 ### Exclude from processing.
 exclude:

index.html

@@ -18,13 +18,13 @@ <h1>The easiest way to program microcontrollers</h1>
       </div>
     </div>
     <div class="image">
-      <img class="image-headline" alt=""
-                                src="{{ "assets/images/learn/sketch_drawing_toy.jpg" |
-                                        relative_url }}"
+      {% assign guide = site.data.guides | sample %}
+      <img class="image-headline" alt="{{ guide.image_alt_attribute }}"
+                                src="{{ guide.image }}"
         />
       <span class="image-title">
         <span>
-          <p>Sketch Drawing Toy that is really cool and wraps by Ruiz Brothers</p>
+          <p>{{ guide.title }}</p>
         </span>
         <img alt="Made with CircuitPython Logo"
                                   src="{{ "assets/images/made_with_circuitpython.svg" |
@@ -97,10 +97,19 @@ <h3>Serial Console + REPL</h3>
 
   <div class="two-column-content">
     <div class="image">
-      <img class="image-headline" alt=""
-                                src="{{ "assets/images/learn/sketch_drawing_toy.jpg" |
-                                        relative_url }}"
+      {% assign guide = site.data.guides | sample %}
+      <img class="image-headline" alt="{{ guide.image_alt_attribute }}"
+                                src="{{ guide.image }}"
         />
+      <span class="image-title">
+        <span>
+          <p>{{ guide.title }}</p>
+        </span>
+        <img alt="Made with CircuitPython Logo"
+                                  src="{{ "assets/images/made_with_circuitpython.svg" |
+                                          relative_url }}"
+          />
+      </span>
     </div>
     <div class="text">
       <h2>Easily manage and use over 500+ Python libraries.</h2>
@@ -128,19 +137,37 @@ <h2>Supported by all of the best microcontrollers</h2>
       </div>
     </div>
     <div class="image">
-      <img class="image-headline" alt=""
-                                src="{{ "assets/images/learn/sketch_drawing_toy.jpg" |
-                                        relative_url }}"
+      {% assign guide = site.data.guides | sample %}
+      <img class="image-headline" alt="{{ guide.image_alt_attribute }}"
+                                src="{{ guide.image }}"
         />
+      <span class="image-title">
+        <span>
+          <p>{{ guide.title }}</p>
+        </span>
+        <img alt="Made with CircuitPython Logo"
+                                  src="{{ "assets/images/made_with_circuitpython.svg" |
+                                          relative_url }}"
+          />
+      </span>
     </div>
   </div>
 
   <div class="two-column-content">
     <div class="image">
-      <img class="image-headline" alt=""
-                                src="{{ "assets/images/learn/sketch_drawing_toy.jpg" |
-                                        relative_url }}"
+      {% assign guide = site.data.guides | sample %}
+      <img class="image-headline" alt="{{ guide.image_alt_attribute }}"
+                                src="{{ guide.image }}"
         />
+      <span class="image-title">
+        <span>
+          <p>{{ guide.title }}</p>
+        </span>
+        <img alt="Made with CircuitPython Logo"
+                                  src="{{ "assets/images/made_with_circuitpython.svg" |
+                                          relative_url }}"
+          />
+      </span>
     </div>
     <div class="text">
       <h2>CircuitPython libraries on single board computers</h2>