:sparkles: created youtube thumbnail grabber | inserting yt thumbs in list

vue-theme/src/pages/list.vue

@@ -9,7 +9,11 @@
         .posts(:class="{ 'is-grid': grid }")
             section(v-for="post in posts" :key="post.slug").shadow.post
                 router-link(:to="`/${type}/${post.slug}`")
-                    p {{ post.featured }}
+                    p(v-if="post.featured") {{ post.featured }}
+                    img(v-else-if="JSON.parse(post.hero).url" :src="getThumbnailFromYt(JSON.parse(post.hero).url)" alt="YouTube")
+                    p(v-else-if="post.hero") {{ post.hero }}
+                    p(v-else) ERROR: no thumbnail
+
                     h4 {{ post.title }} 
                     p(style="font-size: 9px;") {{ post.date }}
 
@@ -29,7 +33,7 @@
 import sidebar from '@/components/sidebars/sidebar'
 import { postTypeGetters, scrollTop } from './mixin-post-types'
 
-import { convertTitleCase, typeFromRoute, sortTypes } from '@/utils/helpers'
+import { convertTitleCase, typeFromRoute, sortTypes, ytThumbnail } from '@/utils/helpers'
 
 export default {
     components: { sidebar },
@@ -68,6 +72,9 @@ export default {
         },
     },
     methods: {
+        getThumbnailFromYt(url) {
+            return ytThumbnail(url, 'medium')
+        },
         setHeroAndGetPosts() {
             let type = convertTitleCase(this.type)
             

vue-theme/src/utils/helpers.js

@@ -51,4 +51,31 @@ const typeFromRoute = route => {
     return type
 }
 
-export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes }
+const ytThumbnail = (url, desiredSize) =>{
+    const remove = [
+        '',
+        'https:',
+        'http:',
+        'youtu.be'
+    ]
+    const videoId = url.split('/').filter(urlSection => !remove.includes(urlSection))
+    
+    let size = '0'
+    switch (desiredSize) {
+        case 'medium':
+            size = 'mqdefault'
+            break
+        case 'large':
+            size = 'hqdefault'
+            break
+        case 'standard':
+            size = 'sddefault'
+            break
+        case 'max':
+            size = 'maxresdefault'
+            break
+    }
+    return `https://img.youtube.com/vi/${videoId[0]}/${size}.jpg`
+}
+
+export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes, ytThumbnail }