:bug: fixes featured-image or hero loading parse bug | created component for hero vs featured image logic

vue-theme/src/components/featured-image.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+.featured-or-hero-image
+    img(v-if="featured" :src="featured" alt="post thumbnail")
+    img(v-else-if="hero && hero.url" :src="getThumbnailFromYt(hero.url)" alt="post thumbnail from YouTube")
+    
+    //- Errors
+    p(v-else-if="hero && !hero.url") ERROR: hero url undefined
+    p(v-else) ERROR: no featured image or hero
+</template>
+
+<script>
+import { ytThumbnail } from '@/utils/helpers'
+
+export default {
+    props: {
+        post: { required:true }
+    },
+    computed: {
+        featured() {
+            return this.post.featuredImage ? this.post.featuredImage : null
+        },
+        hero() {
+            return this.post.hero && JSON.parse(this.post.hero) ? JSON.parse(this.post.hero) : null
+        }
+    },
+    methods: {
+        getThumbnailFromYt(url) {
+            return ytThumbnail(url, 'medium')
+        }
+    }
+}
+</script>

vue-theme/src/pages/list.vue

@@ -3,25 +3,20 @@
     article.f-grow
         header.f-row.center.t-up
             h1 {{ type }} list
+            h3(v-if="!loaded") loading...
             span(v-if="sortBy")
                 h1  sorted by {{ sortBy.replace('-', ' ') }}
 
-        .posts(v-if="posts" :class="{ 'is-grid': grid }")
+        .posts(v-if="posts && loaded" :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="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
-                            h2.t-up {{ post.title }}
-                            h4 {{ post.date }}
-                            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit in ex pharetra volutpat ac at magna. Duis libero est, imperdiet non sollicitudin vel, eleifend at ante...
+                header
+                    router-link(:to="`/${type}/${post.slug}`")
+                        featured-image(:post="post")
+                        h2.t-up {{ post.title }}
+                article
+                    h4 {{ post.date }}
+                    p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit in ex pharetra volutpat ac at magna. Duis libero est, imperdiet non sollicitudin vel, eleifend at ante...
 
-        //- posts not grid
-        
         footer
             p {{ `${type} count: ${Object.values(posts).length}` }}
             p {{ `show sidebar: ${sidebar}` }}
@@ -35,13 +30,14 @@
 </template>
 
 <script>
+import featuredImage from '@/components/featured-image'
 import sidebar from '@/components/sidebars/sidebar'
 import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, typeFromRoute, sortTypes, ytThumbnail } from '@/utils/helpers'
 
 export default {
-    components: { sidebar },
+    components: { sidebar, featuredImage },
     props: {
         sidebar: { type: Boolean },
         grid: { type: Boolean },
@@ -56,6 +52,11 @@ export default {
             let type = convertTitleCase(this.type)
             return this.sortBy ? `getAll${type.split('/')[0]}` : `getAll${type}`
         },
+        loaded() {
+            let type = convertTitleCase(this.type)
+            if(!type) return
+            return this[`all${type}Loaded`]
+        },
         posts() {
             let type = convertTitleCase(this.type)
             if(!type) return
@@ -85,11 +86,11 @@ export default {
             
             // Sorting
             let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
+            
             if(Object.values(sortTypes).includes(sort)) {
                 console.log('trying to sort by:', sort)
                 console.log(`sortTypes includes ${sort}:`, Object.values(sortTypes).includes(sort))
             }
-
             // Is this a sort type?
             if(this.type !== sort || !Object.values(sortTypes).includes(sort)) sort = null
             
@@ -113,7 +114,6 @@ export default {
     created() {
         let type = convertTitleCase(this.type)
         // console.log('already loaded ?:', this[`all${type}Loaded`])
-        
         if(!this[`all${type}Loaded`]) this.setHeroAndGetPosts()
     }
 }