Add TSPL Go Further section and resource thumbnails (#227)

Author: kaishin

_data/go_further.yml

@@ -1,24 +1,36 @@
+- title: "A Swift Tour"
+  description: "_The Swift Programming Language_, the authoritative reference for Swift, begins with a tour of the language. The tour gives you an introduction to the fundamental features, concepts, and syntax of Swift. The remainder of the book explains each topic in greater detail."
+  content_type: book
+  content_url: https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html
+  thumbnail_url: #TBD
+  release_date: 2014-08-18
+  featured: true
+  external: true
 - title: "Concurrency"
   description: "Swift has concurrency features built into the language making it easier to write concurrent code with the assistance of the compiler. This video introduces the async/await mechanism, a key part of Swift Concurrency."
   content_type: video
   content_url: https://developer.apple.com/videos/play/wwdc2021/10132/
-  thumbnail_url: #TBD
+  thumbnail_url: /assets/images/getting-started/meet-async-await-thumbnail.jpg
   release_date: 2021-06-08
+  external: true
 - title: "Generics"
   description: "In Swift, generics are a fundamental way to write abstract code. This video walks through the basics of Swift Generics and introducing generics into your code."
   content_type: video
-  content_url: https://developer.apple.com/videos/play/wwdc2021/10132/
-  thumbnail_url: #TBD
+  content_url: https://developer.apple.com/videos/play/wwdc2022/110352/
+  thumbnail_url: /assets/images/getting-started/swift-generics-thumbnail.jpg
   release_date: 2021-06-09
+  external: true
 - title: "Regular Expressions"
   description: "Swift provides first-class regular expression support, commonly known as regex, for effective string processing. This video gives an overview of the power and flexibility of Swift Regex."
   content_type: video
   content_url: https://developer.apple.com/videos/play/wwdc2022/110357/
-  thumbnail_url: #TBD
+  thumbnail_url: /assets/images/getting-started/regular-expression-thumbnail.jpg
   release_date: 2022-06-07
+  external: true
 - title: "Strings Under The Hood"
   description: "Swift strings provide a fast, Unicode-compliant way to work with text. This article provides more detail on how strings are implemented in Swift using UTF-8 and the reasons behind that choice."
   content_type: article
   content_url: /blog/utf8-string/
   thumbnail_url: #TBD
   release_date: 2019-03-20
+  external: false

assets/images/getting-started/article-thumbnail.jpg

@@ -1,24 +1,42 @@
 
-.go-further-list{
+.go-further-list {
+  $grid-breakpoint: 1000px;
   list-style: none;
   padding-left: 0;
   display: grid;
   gap: 1rem;
 
   .resource {
-    border: 1px solid var(--color-fill-gray);
-    padding: 0 1rem;
+    border: 1px solid var(--color-fill-tertiary);
+    padding: 1rem;
     border-radius: 4px;
     display: flex;
     flex-direction: column;
+
+    @media (min-width: $grid-breakpoint) {
+      &.featured {
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
+    }
 
+    h3 {
+      padding-top: 0;
+    }
+
     p {
       flex-grow: 1;
       color: var(--color-secondary-label);
     }
+
+    .thumbnail {
+      border-radius: 8px;
+      border: 1px solid var(--color-fill-gray);
+      margin-bottom: 1rem;
+    }
   }
 
-  @media (min-width: 1000px) {
+  @media (min-width: $grid-breakpoint) {
     grid-template-columns: repeat(2, 1fr);
   }
 }
@@ -30,8 +48,8 @@
   gap: 1rem;
 
   .use-case {
-    border: 1px solid var(--color-fill-gray);
-    padding: 0 1rem;
+    border: 1px solid var(--color-fill-tertiary);
+    padding: 1rem;
     border-radius: 4px;
     display: flex;
     flex-direction: column;
@@ -57,7 +75,6 @@ a.cta-secondary {
   border: 1px solid var(--color-text);
   color: var(--color-text);
   display: block;
-  margin: 1rem 0;
   padding: .5rem 0;
   text-align: center;
 
@@ -70,4 +87,4 @@ a.cta-secondary {
   &.external:after {
     content: " ↗"
   }
-}
+}

assets/images/getting-started/meet-async-await-thumbnail.jpg

@@ -4,17 +4,25 @@ Ready to dive deeper? Here are some hand-picked resources covering about various
 
 <ul class="go-further-list">
   {% for resource in site.data.go_further %}
-  <li class="resource">
+  <li class="resource{% if resource.featured %} featured{% endif %}">
+      {% if resource.thumbnail_url %}
+        <img class="thumbnail" src="{{ resource.thumbnail_url }}"/>
+      {% elsif resource.content_type == "article" %}
+        <img class="thumbnail" src="/assets/images/getting-started/article-thumbnail.jpg"/>
+      {% endif %}
+
       <h3>{{ resource.title }}</h3>
       <p class="description">
-        {{ resource.description }}
+        {{ resource.description | markdownify }}
       </p>
       
-      <a href="{{ resource.content_url }}" class="cta-secondary external" target="_blank">
+      <a href="{{ resource.content_url }}" class="cta-secondary{% if resource.external %} external" target="_blank"{% else %}"{% endif %}>
         {% if resource.content_type == "video" %}
         Watch video
         {% elsif resource.content_type == "article" %}
-        Read article        
+        Read article
+        {% elsif resource.content_type == "book" %}
+        Read book
         {% else %}
         View resource
         {% endif %}