Merge pull request #3082 from raspberrypi/iss-3060

Custom template for tutorial sections
raspberrypi · Aug 25, 2023 · 21d3294 · 21d3294
2 parents 1cb55e5 + 786b251
commit 21d3294
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/jekyll-assets/_templates/helpers.rb b/jekyll-assets/_templates/helpers.rb
@@ -1,3 +1,5 @@
+require 'net/http'
+
 module Slim::Helpers
   def book_link
     case (self.attr 'booktype')
@@ -19,6 +21,24 @@ 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]
+    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 section_title
     if caption
       captioned_title

diff --git a/jekyll-assets/_templates/section.html.slim b/jekyll-assets/_templates/section.html.slim
@@ -32,6 +32,13 @@
             =content
             div class="paragraph"
               p =book_link
+      - elsif role? 'tutoriallink'
+        div class="openblock float-group"
+          div class="content"
+            div class="imageblock related thumb right"
+              div class="content"
+                =tutorial_image  
+            =content
       - else
         =content
     - else
@@ -46,5 +53,12 @@
             =content
             div class="paragraph"
               p =book_link
+      - elsif role? 'tutoriallink'
+        div class="openblock float-group"
+          div class="content"
+            div class="imageblock related thumb right"
+              div class="content"
+                =tutorial_image  
+            =content
       - else
         =content
diff --git a/jekyll-assets/css/style.css b/jekyll-assets/css/style.css
@@ -647,6 +647,20 @@ div.videoblock iframe {
   margin-bottom: 10px;
 }
 
+/* TUTORIAL BLOCKS */
+
+#content .tutorialcard {
+  max-width: 400px;
+  border: 1px solid #dedede;
+  border-radius: 5px;
+}
+
+#content .tutorialcard p.caption {
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 0.9em;
+}
+
 /* DOXYGEN ELEMENTS */
 
 div.memproto {