[PYT-152] Wire up external Ecosystem cards (#45)

Author: brsoff

_ecosystem/detectron.md

@@ -1,13 +1,7 @@
 ---
 layout: ecosystem_detail
 title: Detectron
-slug: detectron
 summary: A Pytorch Implementation of Detectron
-background-class: ecosystem-background
-body-class: ecosystem ecosystem-detail
-call-to-action: Try via CoLab
+external: true
+link: https://github.com/roytseng-tw/Detectron.pytorch
 ---
-
-## Detectron
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

_ecosystem/elf.md

@@ -1,7 +1,6 @@
 ---
 layout: ecosystem_detail
 title: ELF
-slug: elf
 summary: Extensive, Lightweight, and Flexible platform for game research
 background-class: ecosystem-background
 body-class: ecosystem ecosystem-detail

_ecosystem/parlai.md

@@ -1,13 +1,7 @@
 ---
 layout: ecosystem_detail
 title: ParlAI
-slug: parlai
 summary: Framework for dialog AI research, implemented in Python
-background-class: ecosystem-background
-body-class: ecosystem ecosystem-detail
-call-to-action: Try via CoLab
+external: true
+link: http://www.parl.ai/
 ---
-
-## ParlAI
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

_ecosystem/wav2letter.md

@@ -1,7 +1,6 @@
 ---
 layout: ecosystem_detail
 title: Wav2Letter
-slug: wav2letter
 summary: Simple and efficient end-to-end Automatic Speech Recognition (ASR) system from Facebook AI Research
 background-class: ecosystem-background
 body-class: ecosystem ecosystem-detail

_sass/base_styles.scss

@@ -436,20 +436,20 @@ a, .btn {
   background-repeat: no-repeat;
   padding: rem(25px) rem(30px);
 
-  &.detectron {
-    background-image: url($baseurl + "/assets/images/logo-detectron.svg");
-    background-size: 24px 24px;
+  &.external {
     h4 {
       @include external_link_icon
     }
   }
 
+  &.detectron {
+    background-image: url($baseurl + "/assets/images/logo-detectron.svg");
+    background-size: 24px 24px;
+  }
+
   &.elf {
     background-image: url($baseurl + "/assets/images/logo-elf.svg");
     background-size: 29px 25px;
-    h4 {
-      @include external_link_icon
-    }
   }
 
   &.parlai {

ecosystem.html

@@ -67,8 +67,12 @@ <h1>Ecosystem</h1>
         {% for item in site.ecosystem %}
           <div class="col-md-6 ecosystem-card-wrapper" data-categories="{{ item.category | join: "," }}">
             <div class="card ecosystem-card">
-              <a href="{{ site.baseurl }}{{ item.url }}">
-                <div class="card-body {{ item.slug }}">
+              {% if item.external %}
+                <a href="{{ item.link }}" target="_blank">
+              {% else %}
+                <a href="{{ site.baseurl }}{{ item.url }}">
+              {% endif %}
+                <div class="card-body {{ item.title | slugify }} {% if item.external %}external{% endif %}">
                   <h4>{{ item.title }}</h4>
                   <p class="card-summary">{{ item.summary }}</p>
                 </div>

index.html

@@ -61,8 +61,12 @@ <h2>Showcased Projects </h2>
         {% for item in site.ecosystem limit:3 %}
         <div class="col-md-4">
           <div class="card ecosystem-card">
-            <a href="{{ site.baseurl }}{{ item.url }}">
-              <div class="card-body {{ item.slug }}">
+            {% if item.external %}
+              <a href="{{ item.link }}" target="_blank">
+            {% else %}
+              <a href="{{ site.baseurl }}{{ item.url }}">
+            {% endif %}
+              <div class="card-body {{ item.title | slugify }} {% if item.external %}external{% endif %}">
                 <h4>{{ item.title }}</h4>
                 <p class="card-summary">{{ item.summary }}</p>
               </div>