Merge pull request #3543 from raspberrypi/apicall

Fetch embedded tutorial data via API

jekyll-assets/_templates/helpers.rb

@@ -1,4 +1,5 @@
 require 'net/http'
+require 'json'
 
 module Slim::Helpers
   def book_link
@@ -21,46 +22,28 @@ def book_image
     return src
   end
 
-  def tutorial_image
-    uri = URI(self.attr 'link')
-    source = Net::HTTP.get(uri)
-    # get the short description
-    desc = ""
-    desc_arr = /<meta[^>]+name="description"[^>]+content="([^>]+)"[^>]*>/.match(source)
-    if desc_arr
-      desc = desc_arr[1]
-    end
-    # get the image source
-    img_src = ""
-    img_arr = /<meta[^>]+property="og:image"[^>]+content="([^>]+)"[^>]*>/.match(source)
-    if img_arr
-      img_src = img_arr[1]
+  def fetch_tutorial_data
+    # hit the api
+    res = Net::HTTP.get_response(URI("https://www.raspberrypi.com/tutorials/api.json"))
+    data = JSON.parse(res.body)
+    record = data.select {|item| item["url"] == (self.attr 'link')}
+    if record.length() > 0
+      {"tutorial_image" => record[0]["featuredImageUrl"], "tutorial_description" => record[0]["excerpt"]}
+    else
+      {"tutorial_image" => "", "tutorial_description" => ""}
     end
-    return '<a href="'+(self.attr 'link')+'" target="_blank" class="image"><div class="tutorialcard"><img src="'+img_src+'"/><p class="caption">'+desc+'</p></div></a>'
+  end
+
+  def tutorial_image
+    return '<a href="'+(self.attr 'link')+'" target="_blank" class="image"><div class="tutorialcard"><img src="'+(self.attr 'tutorial_image')+'"/><p class="caption">'+(self.attr 'tutorial_description')+'</p></div></a>'
   end
 
   def tutorial_image_sidebar
-    uri = URI(self.attr 'link')
-    source = Net::HTTP.get(uri)
-    # get the image source
-    img_src = ""
-    img_arr = /<meta[^>]+property="og:image"[^>]+content="([^>]+)"[^>]*>/.match(source)
-    if img_arr
-      img_src = img_arr[1]
-    end
-    return '<a href="'+(self.attr 'link')+'" target="_blank" class="image"><div class="tutorialcard"><img src="'+img_src+'"/></div></a>'
+    return '<a href="'+(self.attr 'link')+'" target="_blank" class="image"><div class="tutorialcard"><img src="'+(self.attr 'tutorial_image')+'"/></div></a>'
   end
 
   def tutorial_description_sidebar
-    uri = URI(self.attr 'link')
-    source = Net::HTTP.get(uri)
-    # get the short description
-    desc = ""
-    desc_arr = /<meta[^>]+name="description"[^>]+content="([^>]+)"[^>]*>/.match(source)
-    if desc_arr
-      desc = desc_arr[1]
-    end
-    return '<div class="paragraph tutorialdescription"><p>'+desc+'</p></div>'
+    return '<div class="paragraph tutorialdescription"><p>'+(self.attr 'tutorial_description')+'</p></div>'
   end
 
   def section_title

jekyll-assets/_templates/section.html.slim

@@ -34,6 +34,7 @@
               p =book_link
         p class="clear"
       - elsif role? 'tutoriallink'
+        - update_attributes(fetch_tutorial_data)
         div class="openblock float-group"
           div class="content"
             div class="imageblock related thumb left"
@@ -57,6 +58,7 @@
               p =book_link
         p class="clear"
       - elsif role? 'tutoriallink'
+        - update_attributes(fetch_tutorial_data)
         div class="openblock float-group"
           div class="content"
             div class="imageblock related thumb left"

jekyll-assets/_templates/sidebar.html.slim

@@ -14,6 +14,7 @@
 				div
 					=content
 - elsif role? 'tutorial'
+	- update_attributes(fetch_tutorial_data)
 	.sidebarblock id=id class=role
 		.content
 			- if title?

jekyll-assets/css/style.css

@@ -694,6 +694,11 @@ div.videoblock iframe {
   margin-bottom: 0px;
 }
 
+#content .tutoriallink .imageblock.left img,
+#content  .tutoriallink .imageblock.right img {
+  max-width: 400px;
+}
+
 /* DOXYGEN ELEMENTS */
 
 div.memproto {