:sparkles: adding featured image support for list.vue

vue-theme/src/components/hero.vue

@@ -70,6 +70,9 @@ export default {
     background-color: rebeccapurple
     min-height: 35%
     width: 100%
+    &--image
+        > img
+            max-width: 100%
     .embedded
         height: 100%
         width: 100%

vue-theme/src/components/sidebars/sidebar.vue

@@ -31,6 +31,7 @@ aside.sidebar
 </template>
 
 <script>
+import relatedSidebar from './related'
 import exhibitionsSidebar from './exhibitions'
 import eventsSidebar from './events'
 import { sortTypes } from '@/utils/helpers'
@@ -50,6 +51,7 @@ export default {
     components: {
         exhibitionsSidebar,
         eventsSidebar,
+        relatedSidebar
     },
     data() {
         return {

vue-theme/src/pages/list.vue

@@ -81,12 +81,7 @@ export default {
         },
     },
     methods: {
-        getThumbnailFromYt(url) {
-            return ytThumbnail(url, 'medium')
-        },
         setHeroAndGetPosts() {
-            let type = convertTitleCase(this.type)
-            
             // Sorting
             let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
             
@@ -100,26 +95,35 @@ export default {
             // Don't dispatch if there's no type
             if(this.type) {
                 this.$store.dispatch(this.dispatchName, sort)
+                this.checkAndSetHero()
             }
-            
-            if(this.$store.state.hero.url !== type) this.$store.commit('SET_HERO', type)
-        }
+        },
+        checkAndSetHero() {
+            const page = this.allPages[this.type]
+            if(!page) return
+            let json = { url: page.featured, heroType: 'image' }
+            if(page.hero && JSON.parse(page.hero).url) {
+                json = JSON.parse(page.hero)
+                json.heroType = 'video'
+            }
+            this.$store.commit('SET_HERO', json)
+        },
     },
     watch: {
-        $route(to, from){
+        async $route(to, from){
             // console.log(this.sidebar)
             let type = convertTitleCase(this.type)
             let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
             
-            this.$store.dispatch('getAllPages')    
-            if(!this[`all${type}Loaded`] || sort) this.setHeroAndGetPosts()
+            await this.$store.dispatch('getAllPages')    
+            if(!this[`all${type}Loaded`] && this['allPagesLoaded'] || sort) this.setHeroAndGetPosts()
         }
     },
-    created() {
+    async created() {
         let type = convertTitleCase(this.type)
         // console.log('already loaded ?:', this[`all${type}Loaded`])
-        this.$store.dispatch('getAllPages')
-        if(!this[`all${type}Loaded`]) this.setHeroAndGetPosts()
+        await this.$store.dispatch('getAllPages')
+        if(!this[`all${type}Loaded`] && this['allPagesLoaded']) this.setHeroAndGetPosts()
     }
 }
 </script>

vue-theme/src/pages/single.vue

@@ -134,8 +134,7 @@ export default {
             this.activeImageID = imageInfo.dataset.id ? parseInt(imageInfo.dataset.id) : parseInt(imageInfo.className.split('-').pop())
         },
         closeGallery() {
-            this.activeGalleryIndex = -1
-            this.activeImageID = -1
+            this.activeGalleryIndex = this.activeImageID = -1
         },
         /**
          * Everytime the posts object changes

vue-theme/src/store/modules/page.js

@@ -4,7 +4,6 @@ import api from '../../utils/api'
 const state = {
     all: [],
     loaded: false,
-    singlePage: null,
 }
 
 // getters
@@ -15,21 +14,13 @@ const getters = {
 
 // actions
 const actions = {
-    getAllPages({ commit }, sortType) {
+    async getAllPages({ commit }, sortType) {
         commit('PAGES_LOADED', false)
-        return api.getByType('pages', sortType, pages => {
+        return await api.getByType('pages', sortType, pages => {
             commit('STORE_FETCHED_PAGES', { pages })
             commit('PAGES_LOADED', true)
         })
     },
-    getSinglePage({ commit }, id) {
-        commit('CLEAR_SINGLE_PAGE')
-        commit('PAGES_LOADED', false)
-        api.getSingleType('pages', id, page => {
-            commit('STORE_FETCHED_SINGLE_PAGE', page)
-            commit('PAGES_LOADED', true)
-        })
-    },
 }
 
 // mutations
@@ -37,15 +28,9 @@ const mutations = {
     STORE_FETCHED_PAGES(state, { pages }) {
         state.all = pages
     },
-    STORE_FETCHED_SINGLE_PAGE(state, page) {
-        state.singlePage = page
-    },
     CLEAR_PAGES(state) {
         state.all = []
     },
-    CLEAR_SINGLE_PAGE(state) {
-        state.singlePage = null
-    },
     PAGES_LOADED(state, val) {
         state.loaded = val
     },