Add recent talk component for each video

src/assets/css/tailwind.css

@@ -2,4 +2,17 @@
 
 @tailwind components;
 
+.embed-responsive {
+  @apply block relative h-0 p-0 overflow-hidden;
+  padding-bottom: 56.25%
+}
+
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object,
+.embed-responsive video {
+  @apply absolute w-full h-full inset-0 border-0
+}
+
 @tailwind utilities;

src/components/recent-talks/index.vue

@@ -2,12 +2,33 @@
   <section class="py-4">
     <div class="mx-auto px-4">
       <h2 class="text-2xl font-bold uppercase text-center">Recent Talks</h2>
+
+      <div class="mt-2 grid grid-cols-4 gap-8">
+        <recent-talk v-for="(talk, i) in talks" :key="i" :talk="talk"/>
+      </div>
     </div>
   </section>
 </template>
 
 <script>
+import RecentTalk from '@/components/recent-talks/recent-talk'
+import { getTalks } from '@/services/talk-service'
+
 export default {
-  name: 'RecentTalks'
+  name: 'RecentTalks',
+
+  components: {
+    RecentTalk
+  },
+
+  data() {
+    return {
+      talks: []
+    }
+  },
+
+  created() {
+    this.talks = getTalks()
+  }
 }
 </script>

src/components/recent-talks/recent-talk.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col flex-col-reverse justify-end">
+    <div class="mt-5 py-2 text-lg font-bold border-t-2 border-b-2">
+      {{ talk.title }}
+    </div>
+
+    <div class="embed-responsive">
+      <div class="embed-responsive-item">
+        <iframe :src="`https://www.youtube.com/embed/${talk.videoId}`"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RecentTalk',
+
+  props: {
+    talk: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>

src/data/talks.json

@@ -0,0 +1,44 @@
+{
+  "talks": [
+    {
+      "title": "ES6 & JSPM",
+      "videoId": "mIBqsXLXmc0"
+    },
+    {
+      "title": "Libraries.io",
+      "videoId": "2tNH-JLbXGk"
+    },
+    {
+      "title": "Hardware Hacking",
+      "videoId": "a_u3OdqeYvI"
+    },
+    {
+      "title": "Libraries.io",
+      "videoId": "ROUvsRJipUs"
+    },
+    {
+      "title": "Building OS X apps with JavaScript",
+      "videoId": "og6K_3kEfQk"
+    },
+    {
+      "title": "Web Audio API",
+      "videoId": "avEVbuv62U8"
+    },
+    {
+      "title": "Open Source Everyday",
+      "videoId": "XnLMKu-l_do"
+    },
+    {
+      "title": "Style Matters",
+      "videoId": "zYFBptgX9FY"
+    },
+    {
+      "title": "Responsive copy writing & smart formatting",
+      "videoId": "kp1IC_Oi5_8"
+    },
+    {
+      "title": "IndexDB",
+      "videoId": "6vGiCYy0hug"
+    }
+  ]
+}

src/services/talk-service.js

@@ -0,0 +1,5 @@
+import talks from '@/data/talks.json'
+
+export function getTalks() {
+  return talks.talks
+}