From fefb986d1769235c9e840614dfd6f962ae1df4ec Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 8 Sep 2020 21:01:03 +0100
Subject: [PATCH] Add recent talk component for each video

---
 src/assets/css/tailwind.css                 | 13 ++++++
 src/components/recent-talks/index.vue       | 23 ++++++++++-
 src/components/recent-talks/recent-talk.vue | 26 ++++++++++++
 src/data/talks.json                         | 44 +++++++++++++++++++++
 src/services/talk-service.js                |  5 +++
 5 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/components/recent-talks/recent-talk.vue
 create mode 100644 src/data/talks.json
 create mode 100644 src/services/talk-service.js

diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 7f39374..3a3a0b3 100644
--- a/src/assets/css/tailwind.css
+++ b/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;
diff --git a/src/components/recent-talks/index.vue b/src/components/recent-talks/index.vue
index 71f486f..74941f1 100644
--- a/src/components/recent-talks/index.vue
+++ b/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>
diff --git a/src/components/recent-talks/recent-talk.vue b/src/components/recent-talks/recent-talk.vue
new file mode 100644
index 0000000..ab0d8d1
--- /dev/null
+++ b/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>
diff --git a/src/data/talks.json b/src/data/talks.json
new file mode 100644
index 0000000..7b2db5e
--- /dev/null
+++ b/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"
+    }
+  ]
+}
diff --git a/src/services/talk-service.js b/src/services/talk-service.js
new file mode 100644
index 0000000..3330d21
--- /dev/null
+++ b/src/services/talk-service.js
@@ -0,0 +1,5 @@
+import talks from '@/data/talks.json'
+
+export function getTalks() {
+  return talks.talks
+}