:bug: url parse and check error prevents proper loading

vue-theme/src/pages/list.vue

@@ -6,13 +6,13 @@
             span(v-if="sortBy")
                 h1  sorted by {{ sortBy.replace('-', ' ') }}
 
-        .posts(:class="{ 'is-grid': grid }")
+        .posts(v-if="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}}
                     ul.f-row
                         img(v-if="post.featured" :src="post.featured" alt="post thumbnail")
-                        img(v-else-if="post.hero && JSON.parse(post.hero).url" :src="getThumbnailFromYt(JSON.parse(post.hero).url)" alt="post thumbnail from YouTube")
+                        img(v-else-if="JSON.parse(post.hero) && JSON.parse(post.hero).url" :src="getThumbnailFromYt(JSON.parse(post.hero).url)" alt="post thumbnail from YouTube")
                         p(v-else-if="post.hero") ERROR: {{ post.hero }}
                         p(v-else) ERROR: no thumbnail
                         li.f-col.between
@@ -103,6 +103,7 @@ export default {
     },
     watch: {
         $route(to, from){
+            console.log(this.sidebar)
             let type = convertTitleCase(this.type)
             let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
             

vue-theme/src/utils/helpers.js

@@ -1,5 +1,5 @@
-const convertTitleCase = (type) => {
-    if(typeof type !== 'string') return ''
+const convertTitleCase = type => {
+    if (typeof type !== 'string') return ''
     return type.charAt(0).toUpperCase() + type.slice(1)
 }
 
@@ -37,29 +37,36 @@ const postTypes = [
 const typeFromRoute = route => {
     let type = route.params.type ? route.params.type : route.fullPath.split('/')
 
-    if(!route.params.type) {
+    if (!route.params.type) {
         // Remove blank path sections and match to postTypes array
         type = type
             .filter(pathSection => pathSection != '')
             .filter(pathSection => postTypes.includes(pathSection))
-        
+
         // Only take the first match
         type = type[0]
         console.log(`type derived from route.path: ${type}`)
     }
-    
+
     return type
 }
 
-const ytThumbnail = (url, desiredSize) =>{
+const ytThumbnail = (url, desiredSize) => {
     const remove = [
         '',
         'https:',
         'http:',
-        'youtu.be'
+        'youtu.be',
+        'www.youtube.com',
+        'youtube.com',
+        'embed'
     ]
-    const videoId = url.split('/').filter(urlSection => !remove.includes(urlSection))
-    
+    const videoId = url
+        .split('/')
+        .filter(urlSection => !remove.includes(urlSection))
+        
+    // Uncomment to see what the url transformer is finding
+    // console.log('video:', videoId[0])
     let size = '0'
     switch (desiredSize) {
         case 'medium':
@@ -78,4 +85,11 @@ const ytThumbnail = (url, desiredSize) =>{
     return `https://img.youtube.com/vi/${videoId[0]}/${size}.jpg`
 }
 
-export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes, ytThumbnail }
+export {
+    convertTitleCase,
+    dePluralize,
+    typeFromRoute,
+    sortTypes,
+    postTypes,
+    ytThumbnail,
+}