:bug: lots of hero fixes and fail-overs

vue-theme/src/components/hero.vue

@@ -9,12 +9,20 @@
         ).embedded
         .blank.f-col(v-else)
             h3(v-if="heroText") {{ heroText }}
+            img(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
             button(v-if="showPlaybutton" @click="isPlaying = true") play
+    .hero--image(v-else-if="heroType === 'image'")
+        .hero--image--overlay.f-col
+            div(v-html="heroText")
+        img(:src="showHero" alt="hero alt image")
     .hero--image(v-else)
-        img(:src="showHero" alt="hero image")
+        .hero--image--overlay.f-col
+            div(v-html="heroText")
+
 </template>
 
 <script>
+import { ytThumbnail } from '@/utils/helpers'
 import { mapState } from 'vuex'
 
 export default {
@@ -39,11 +47,15 @@ export default {
     methods: {
         onResize() {
             this.heroHeight = this.$el.offsetWidth / 1.8
+        },
+        getThumbnailFromYt(url) {
+            return ytThumbnail(url, 'max')
         }
     },
     mounted() {
         this.heroHeight = this.$el.offsetWidth / 1.8
-        this.$nextTick(() => { window.addEventListener('resize', this.onResize) })
+        this.$nextTick(() => { 
+            window.addEventListener('resize', this.onResize) })
     },
     watch: {
         $route() {
@@ -70,8 +82,14 @@ export default {
     min-height: 35%
     width: 100%
     &--image
+        width: 100%
         > img
-            max-width: 100%
+            width: 100%
+        &--overlay
+            color: #ffffff
+            position: absolute
+            top: 30%
+            width: 100%
     .embedded
         height: 100%
         width: 100%

vue-theme/src/pages/list.vue

@@ -77,7 +77,6 @@ export default {
              * so if a sortBy is specified we return it sorted or
              * we fail over to sorted by date
              */
-            console.log(this.sortBy)
             return this.sortBy ? this[`all${type}`] : sortedByRecent
         },
     },
@@ -104,11 +103,15 @@ export default {
             }
             const page = this.allPages[type]
             if(!page) return
+            
             let json = { url: page.featured, heroType: 'image' }
             if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
                 json = JSON.parse(page.hero)
                 json.heroType = 'video'
             }
+            if(page && page.content) {
+                json.text = this.allPages[type].content
+            }
             this.$store.commit('SET_HERO', json)
         },
     },
@@ -126,7 +129,7 @@ export default {
         console.log(`${type} already loaded?:`, this[`all${type}Loaded`])
         
         this.checkAndSetHero(this.type)
-        console.log(this.$store)
+        
         if(!this[`all${type}Loaded`]) this.getPosts()
     }
 }

vue-theme/src/pages/single.vue

@@ -145,6 +145,10 @@ export default {
                 json = JSON.parse(post.hero)
                 json.heroType = 'video'
             }
+            // No featured or youTube
+            if(!json.url) {
+                json.heroType = null
+            }
             this.$store.commit('SET_HERO', json)
         },
         

vue-theme/src/store/index.js

@@ -35,19 +35,24 @@ const mutations = {
         if (!hero) return
 
         if (hero.url) {
-            state.hero.text = state.hero.url = hero.url
-            state.hero.type = hero.type
+            state.hero.text = hero.text
+            state.hero.url = hero.url
+            state.hero.type = hero.heroType
 
-            state.hero.playbutton = hero.type === 'video' ? true : false
+            state.hero.playbutton = hero.heroType === 'video' ? true : false
         } else {
-            state.hero.text = hero
+            console.warn('No hero to set')
+            state.hero.url = hero.url
+            state.hero.type = hero.heroType
+            state.hero.text = ''
+            state.hero.playbutton = false
         }
     },
     CLEAR_HERO(state) {
         state.hero = {
             url: null,
             type: null,
-            text: 'sample hero text',
+            text: '',
             playbutton: false,
         }
     },