feat: video static thumbnails (#164)

Closes #163 

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>

data/videos.yaml

@@ -5,7 +5,10 @@ icon: stroke_speaker
 content:
   - title: IPFS Alpha - Why we must redistribute the web
     website: https://www.youtube.com/watch?v=skMTdSEaCtA
+    picture: /images/ipfs-alpha.jpg
   - title: Juan Benet at Stanford 2015
     website: https://www.youtube.com/watch?v=HUVmypx9HGI
+    picture: /images/stanford-2015.jpg
   - title: Juan Benet at Fullstack Fest 2016
     website: https://www.youtube.com/watch?v=jONZtXMu03w
+    picture: /images/fullstack-fest-2016.jpg

scripts/make-data.js

@@ -8,13 +8,9 @@ const contentDir = path.join(__dirname, '../src/content')
 const indexesDir = path.join(__dirname, '../src/layouts/partials/indexes')
 
 const processDataType = (data) => {
-  const content = data.content.map((info, index) => {
+  const content = data.content.map(info => {
     const { website, ...more } = info
 
-    if (data.title === 'Videos' && website.includes('youtube')) {
-      more.youtube = website.replace('https://www.youtube.com/watch?v=', '')
-    }
-
     return {
       website: website,
       categories: [data.title.toLowerCase()],

src/layouts/partials/list.html

@@ -39,17 +39,9 @@
 
         {{- if isset .Params "picture" -}}
         <div class="mt2 mw5">
+          <a target="_blank" class="no-underline charcoal" href="{{ if .Params.website }}{{ .Params.website }}{{ else if .Params.source }}{{ .Params.source }}{{ else if .Params.demo }}{{ .Params.demo }}{{ end }}">
             <img class="br2" src="{{ .Site.BaseURL }}{{ .Params.picture }}" >
-        </div>
+          </a>
-        {{ end }}
-
-        {{- if isset .Params "youtube" -}}
-        <div class="relative mt2 mw5" style="height: 0; padding-bottom: 56.25%">
-          <iframe class="absolute top-0 left-0 w-100 h-100"
-            type="text/html"
-            src="https://www.youtube.com/embed/{{ .Params.youtube }}"
-            allowfullscreen
-            frameborder="0"></iframe>
         </div>
         {{ end }}