:sparkles: adding lightbox

vue-theme/package.json

     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.12.11",
     "@vue/compiler-sfc": "^3.0.5",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "babel-loader": "^8.2.2",
     "css-loader": "^3.6.0",
     "file-loader": "^6.2.0",
     "chokidar": "^3.5.1",
     "compression-webpack-plugin": "^3.1.0",
     "vue": "^3.0.5",
+    "vue-easy-lightbox": "^1.8.2",
     "vue-router": "^4.0.2",
     "vuex": "^4.0.0-rc.2"
   },

vue-theme/src/index.js

 import router from '@/router'
 import store from '@/store'
 
+// in this path vue-easy-lightbox/dist/external-css/*.js
+import VueEasyLightbox from 'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js'
+
 import App from '@/app.vue'
 
 const craft = createApp(App)
 
-craft.use(router).use(store).mount('#wp-app')
+craft.use(router).use(store).use(VueEasyLightbox).mount('#wp-app')

vue-theme/src/pages/single.vue

 <template lang="pug">
 .page--single.f-col.between
-    gallery(v-if="activeGalleryIndex >= 0" :activeImageIndex="activeImageIndex" :images="imagesInGallery" @close="closeGallery")
-
     article.w-max.f-grow.shadow(v-if="!singlePost || loading")
         header
             p loading...
         header
             //- breadcrumb links at top of page, needs link routing
             breadcrumb(:type="type" :post="singlePost")
-            
-            h1.t-b {{ singlePost.title }}
-            //- p(v-if="singlePost.categories") categories: {{ singlePost.categories }}
-            //- p(v-if="singlePost.type") type: {{ singlePost.type }}
-            //- p(v-if="singlePost.subtypes") subtypes: {{ singlePost.subtypes }}
 
+            h1.t-b {{ singlePost.title }}
             .date-info.t-cntr(v-if="['exhibition', 'event'].includes(type)")
                 //- for events display: date, time-time
                 h4(v-if="singlePost.start, singlePost.end && type == 'event'") {{ dateFrom(singlePost.start, type == 'event') }} - {{ dateFrom(singlePost.end, type == 'event').split(',')[1] }}
                 //- else for single, exhibition: date-date
                 h4(v-else-if="singlePost.start, singlePost.end") {{ dateFrom(singlePost.start, type == 'event') }} - {{ dateFrom(singlePost.end, type == 'event') }}
+        
         //- WP main content
         section.content(v-html="singlePost.content")
 
         //- related artists section for episodes
-        section(v-if="type === 'episode' && post").related-artists
-            h2.t-up featured in this episode
-            ul
-                li.f-row.between(v-for="artist in p2pPostsByType['artist']")
-                    card(:content="artist" type="artist" :wide="true" :hide-type="true")
+        template(v-if="type === 'episode' && post")
+            section.related-artists
+                h2.t-up featured in this episode
+                ul
+                    li.f-row.between(v-for="artist in p2pPostsByType['artist']")
+                        card(:content="artist" type="artist" :wide="true" :hide-type="true")
 
-        credits(v-if="type === 'episode' && singlePost" :post="singlePost")
+            credits(:post="singlePost")
 
         //- end of article icon
         footer.f-col
             img(src="../star.svg")
 
+        vue-easy-lightbox(
+            :visible="activeGalleryIndex >= 0"
+            :imgs="activeGalleryImages"
+            :index="activeImageIndex"
+            @hide="activeGalleryIndex = -1"
+        )
+
     sidebar(:type="`${type}`" layout="single" :related="p2pPostsByType")
 </template>
 
 import { postTypeGetters, scrollTop, heroUtils } from './mixin-post-types'
 
 import { postTypes, convertTitleCase, formatDate } from '@/utils/helpers'
-
-const TIMEOUT = 1
+import { nextTick } from '@vue/runtime-core'
 
 export default {
     components: { sidebar, gallery, credits, card, breadcrumb },
     mixins: [postTypeGetters, scrollTop, heroUtils],
     data() {
         return {
-            // Gallery control
             activeGalleryIndex: -1,
-            activeImageID: -1,
-            loading: true
+            activeImageIndex: 0,
+            loading: true,
         }
     },
     computed: {
         type() {
-            return postTypes.includes(this.$route.params.type) ? this.$route.params.type : 'post'
+            return postTypes.includes(this.$route.params.type)
+                ? this.$route.params.type
+                : 'post'
         },
         slug() {
             return this.$route.params.slug
          * Careful with name collisions with vuex helpers
          */
         singlePost() {
-            const postType = this.type == 'blog' ? 'post': this.type
+            const postType = this.type == 'blog' ? 'post' : this.type
             if (!this[postType]) return
 
             // State not a getter!
             const singleOfTypeFromState =
                 this[postType][`single${convertTitleCase(postType)}`]
 
-            if (!singleOfTypeFromState) return
-
-            return singleOfTypeFromState
+            return singleOfTypeFromState ? singleOfTypeFromState : {}
         },
-
-        idsForGallery() {
-            if (!this.singlePost || this.activeGalleryIndex < 0) return []
-            return this.singlePost.galleries[this.activeGalleryIndex].ids
-        },
-        /**
-         * We need a convenient way to get all the images
-         * broken down by gallery. We use the active gallery
-         * image IDs to create a map. We match the ID to the
-         * image size and url information returned by singlePost.attached
-         */
-        imagesInGallery() {
-            if (!this.activeGalleryIndex < 0) return {}
-
-            return this.idsForGallery.reduce((imageMap, id) => {
-                imageMap[id] = this.singlePost.attached[parseInt(id)]
-                return imageMap
-            }, {})
+        singlePostGalleries() {
+            if (!this.singlePost.galleries) return
+            const galleries = []
+            this.singlePost.galleries.forEach(gallery => {
+                const withImages = {}
+                gallery.ids.forEach(imageId => {
+                    withImages[imageId] = this.singlePost.attached[imageId]
+                })
+                galleries.push(withImages)
+            })
+            return galleries
         },
-        activeImageIndex() {
-            return Object.keys(this.imagesInGallery).indexOf(
-                this.activeImageID.toString(),
+        activeGalleryImages() {
+            if (!this.singlePostGalleries || this.activeGalleryIndex < 0)
+                return []
+            return Object.values(
+                this.singlePostGalleries[this.activeGalleryIndex],
             )
         },
         p2pPostsByType() {
         },
     },
     methods: {
-        /**
-         * We set the active gallery to the index.
-         * Everything kicks off when activeGallery
-         * is set. We also need to set the activeImageID
-         * to the image clicked
-         * @param {string} imageInfo
-         */
-        openGallery(imageInfo) {
-            const byIndex = this.singlePost.galleries.reduce(
-                (byIndex, gallery, index) => {
-                    byIndex[index] = gallery.ids
-                    return byIndex
-                },
-                {},
-            )
-            let matchingIndex = 0
-            Object.keys(byIndex).forEach(galleryIndex => {
-                if (
-                    byIndex[galleryIndex].includes(
-                        parseInt(imageInfo.dataset.id)
-                    )
-                )
-                    matchingIndex = galleryIndex
-            })
-            this.activeGalleryIndex = matchingIndex
-            this.activeImageID = imageInfo.dataset.id
-                ? parseInt(imageInfo.dataset.id)
-                : parseInt(imageInfo.className.split('-').pop())
-        },
-        closeGallery() {
-            this.activeGalleryIndex = this.activeImageID = -1
-        },
         // _setHeroInfo(post) {} from mixin
         // _clearHero(store) {} from mixin
         /**
              * which is derived from the route
              */
             // modules are NOT plural because module key
-            const postType = this.type == 'blog' ? 'post': this.type
+            const postType = this.type == 'blog' ? 'post' : this.type
             if (!this.$store.state[postType]) return
             const allPostsOfTypeInStore = this.$store.state[postType].all
 
 
             // Look if it exists before you try and load everything!
             if (!singlePostData) {
-                console.warn('Could not find single post in store; Fetching everything...')
+                console.warn(
+                    'Could not find single post in store; Fetching everything...',
+                )
                 const res = await this.$store.dispatch(
                     `getAll${convertTitleCase(postType)}s`,
-                    { sortType: null, params: null }
+                    { sortType: null, params: null },
                 )
-                singlePostData = res.filter(
-                    post => post.slug == this.slug,
-                )[0]
+                singlePostData = res.filter(post => post.slug == this.slug)[0]
             }
 
             /**
              */
             try {
                 this.checkAndSetHero(singlePostData)
-                await this.$store.dispatch(
+                this.$store.dispatch(
                     `getSingle${convertTitleCase(postType)}`,
                     singlePostData.id,
                 )
         slug(newSlug, oldSlug) {
             // ONLY load post data when navigating TO a single page
             // OR when navigating TO a single page from a single page
-            if(newSlug && !oldSlug || newSlug && oldSlug) {
+            if ((newSlug && !oldSlug) || (newSlug && oldSlug)) {
                 this._clearHero(this.$store)
                 this.loadPostData()
             }
         },
+        async singlePost(post) {
+            console.log('---')
+            const content = this.$el.children[0].querySelector('section')
+            await nextTick()
+            const galleries = content.querySelectorAll('.wp-block-gallery')
+            const cb = e => {
+                this.activeGalleryIndex = parseInt(e.target.dataset.gallery)
+                const galleryImages = Object.keys(
+                    this.singlePostGalleries[this.activeGalleryIndex],
+                )
+                this.activeImageIndex = parseInt(
+                    galleryImages.indexOf(e.target.dataset.id),
+                )
+                console.log(
+                    `opening gallery: ${this.activeGalleryIndex}.${this.activeImageIndex}`,
+                )
+                console.log(e.target.dataset)
+            }
+            galleries.forEach((gal, galleryIndex) => {
+                gal.querySelectorAll('img').forEach(image => {
+                    image.dataset.gallery = galleryIndex
+                    if (image.addEventListener) {
+                        image.addEventListener('click', cb, false)
+                    } else {
+                        image.attachEvent('onclick', cb)
+                    }
+                })
+            })
+        },
     },
     created() {
-       this.loadPostData()
+        this.loadPostData()
     },
+    beforeDestroy() {},
 }
 </script>
 
 // prettier-ignore
 @import '../sss/variables.sss'
 @import '../sss/theme.sss'
+
 .page--single
     article
         background-color: white
         &.f-col
             flex-direction: row
             .wp-block-embed, .is-type-video
-                margin-bottom: $ms-9 
-
+                margin-bottom: $ms-9
 </style>

vue-theme/src/sss/_lightbox.sss

+.vel-fade
+    &-enter-active, &-active
+        transition: all 0.3s ease
+    &-enter-from, &-leave-to
+        opacity: 0
+
+.vel-img
+    &-swiper
+        display: block
+        position: relative
+    &-wrapper
+        left: 50%
+        margin: 0
+        position: absolute
+        top: 50%
+        transform: translate(-50% -50%)
+        transition: 0.3s linear
+        will-change: transform opacity
+    background-color: rgba(0, 0, 0, 0.7)
+    box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.7)
+    display: block
+    max-height: 80vh
+    max-width: 80vw
+    position: relative
+    transition: transform 0.3s ease-in-out
+
+.vel-modal
+    background: rgba(0, 0, 0, 0.5)
+    bottom: 0
+    left: 0
+    margin: 0
+    position: fixed
+    right: 0
+    top: 0
+    z-index: 10003
+
+.vel-img, .vel-img-wrapper
+    user-select: none
+
+.vel-btns-wrapper
+    .btn__close, .btn__next, .btn__prev
+        color: #fff
+        cursor: pointer
+        font-size: 32px
+        opacity: 0.6
+        outline: none
+        position: absolute
+        top: 50%
+        transform: translateY(-50%)
+        transition: 0.15s linear
+        user-select: none
+        &:hover
+            opacity: 1
+        &.disable, &.disable:hover
+            cursor: default
+            opacity: 0.2
+    .btn__next
+        right: 12px
+    .btn__prev
+        left: 12px
+    .btn__close
+        right: 10px
+        top: 24px
+
+@media (max-width: 750px)
+    .vel-img
+        max-height: 95vh
+        max-width: 85vw
+    .vel-btns-wrapper
+        .btn__next, .btn__prev
+            font-size: 20px
+        .btn__close
+            font-size: 24px
+        .btn__next
+            right: 4px
+        .btn__prev
+            left: 4px
+    .vel-modal.is-rtl .vel-btns-wrapper
+        .btn__next
+            left: 4px
+            right: auto
+        .btn__prev
+            left: auto
+            right: 4px
+
+.vel-modal.is-rtl
+    .vel-btns-wrapper
+        .btn__next
+            left: 12px
+            right: auto
+        .btn__prev
+            left: auto
+            right: 12px
+
+.vel-modal.is-rtl .vel-img-title
+    direction: rtl
+
+.vel-loading
+    left: 50%
+    position: absolute
+    top: 50%
+    -webkit-transform: translate(-50%, -50%)
+    transform: translate(-50%, -50%)
+    .ring
+        display: inline-block
+        height: 64px
+        width: 64px
+        &:after
+            animation: ring 1.2s linear infinite
+            border-color: hsla(0, 0%, 100%, 0.7) transparent
+            border-radius: 50%
+            border-style: solid
+            border-width: 5px
+            content: ' '
+            display: block
+            height: 46px
+            margin: 1px
+            width: 46px
+
+@-webkit-keyframes ring
+    0%
+        transform: rotate(0deg)
+    to
+        transform: rotate(1turn)
+
+@keyframes ring
+    0%
+        transform: rotate(0deg)
+    to
+        transform: rotate(1turn)
+    
+
+.vel-on-error
+    left: 50%
+    position: absolute
+    top: 50%
+    transform: translate(-50%, -50%)
+    .icon
+        color: #aaa
+        font-size: 80px
+
+.vel-img-title
+    bottom: 60px
+    color: #ccc
+    cursor: default
+    font-size: 12px
+    left: 50%
+    line-height: 1
+    max-width: 80%
+    opacity: 0.8
+    overflow: hidden
+    position: absolute
+    text-align: center
+    text-overflow: ellipsis
+    transform: translate(-50%)
+    transition: opacity 0.15s
+    white-space: nowrap
+    &:hover
+        opacity: 1
+
+.vel-icon
+    fill: currentColor
+    height: 1em
+    overflow: hidden
+    vertical-align: -0.15em
+    width: 1em
+
+.vel-toolbar
+    border-radius: 4px
+    bottom: 8px
+    display: flex
+    left: 50%
+    opacity: 0.9
+    overflow: hidden
+    padding: 0
+    position: absolute
+    transform: translate(-50%)
+    .toolbar-btn
+        color: #fff
+        cursor: pointer
+        flex-shrink: 0
+        font-size: 20px
+        outline: none
+        padding: 6px 10px
+        &:active, &:hover
+            background-color: #3d3d3d
+
+.vel-toolbar, .vel-toolbar .toolbar-btn
+    background-color: #2d2d2d
+    user-select: none

vue-theme/src/sss/index.js

 // Include all your *.sss Sugarss files
-import "./_reset.sss";
-import "./_ratios.sss";
-import "./_helpers.sss";
-import "./_typography.sss";
+import './_reset.sss'
+import './_ratios.sss'
+import './_helpers.sss'
+import './_typography.sss'
+import './_lightbox.sss'
 
-import "./theme.sss";
-import "./variables.sss";
+import './theme.sss'
+import './variables.sss'

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

     all: [],
     loaded: false,
     singleArtist: null,
-    seenTitles: []
+    seenTitles: [],
 }
 
 const getters = {
     getAllArtists({ commit }, { sortType, params }) {
         commit('CLEAR_ARTISTS')
         commit('ARTISTS_LOADED', false)
-        const storeFetch = (artists => {
+        const storeFetch = artists => {
             let repacked = repackBySort(artists, sortType)
             commit('STORE_FETCHED_ARTISTS', { artists: repacked })
             commit('ARTISTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'artist',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
     },
     getMoreArtists({ commit }, { sortType, params }) {
-        const storeFetch = (artists => {
+        const storeFetch = artists => {
             let repacked = artists
-            if(sortType == sortTypes.alpha) {
+            if (sortType == sortTypes.alpha) {
                 repacked = repackBySort(artists, sortType, state.seenTitles)
             }
             commit('ADD_TO_FETCHED_ARTISTS', { artists: repacked })
             commit('ARTISTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'artist',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'artist', sort: sortType, params, cb: storeFetch })
     },
     getSingleArtist({ commit }, id) {
         commit('CLEAR_SINGLE_ARTISTS')
         commit('ARTISTS_LOADED', false)
 
-        api.getSingleType('artist', id, artist => {
+        return api.getSingleType('artist', id, artist => {
             commit('STORE_FETCHED_SINGLE_ARTIST', artist)
             commit('ARTISTS_LOADED', true)
         })

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

     allEvents: state => state.all,
     allEventsLoaded: state => state.loaded,
     pastEvents: state => state.all.filter(event => parseInt(event.end) > now),
-    upcomingAndCurrentEvents: state => state.all.filter(event => parseInt(event.end) <= now),
+    upcomingAndCurrentEvents: state =>
+        state.all.filter(event => parseInt(event.end) <= now),
 }
 
 const actions = {
     getAllEvents({ commit }, { sortType, params }) {
         commit('CLEAR_EVENTS')
         commit('EVENTS_LOADED', false)
-        const storeFetch = (events => {
+        const storeFetch = events => {
             commit('STORE_FETCHED_EVENTS', { events })
             commit('EVENTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'event',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'event', sort: sortType, params, cb: storeFetch })
     },
     getMoreEvents({ commit }, { sortType, params }) {
-        const storeFetch = (events => {
+        const storeFetch = events => {
             commit('ADD_TO_FETCHED_EVENTS', { events })
             commit('EVENTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'event',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'event', sort: sortType, params, cb: storeFetch })
     },
     getSingleEvent({ commit }, id) {
         commit('CLEAR_SINGLE_EVENTS')
         commit('EVENTS_LOADED', false)
-        api.getSingleType('event', id, event => {
+        return api.getSingleType('event', id, event => {
             commit('STORE_FETCHED_SINGLE_EVENT', event)
             commit('EVENTS_LOADED', true)
         })

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

 const getters = {
     allExhibitions: state => state.all,
     allExhibitionsLoaded: state => state.loaded,
-    pastExhibitions: state => state.all.filter(exhibition => parseInt(exhibition.end) > now),
-    upcomingAndCurrentExhibitions: state => state.all.filter(exhibition => parseInt(exhibition.end) <= now)
+    pastExhibitions: state =>
+        state.all.filter(exhibition => parseInt(exhibition.end) > now),
+    upcomingAndCurrentExhibitions: state =>
+        state.all.filter(exhibition => parseInt(exhibition.end) <= now),
 }
 
 const actions = {
-    getAllExhibitions({ commit },{ sortType, params }) {
+    getAllExhibitions({ commit }, { sortType, params }) {
         commit('CLEAR_EXHIBITIONS')
         commit('EXHIBITIONS_LOADED', false)
-        const storeFetch = (exhibitions => {
+        const storeFetch = exhibitions => {
             commit('STORE_FETCHED_EXHIBITIONS', { exhibitions })
             commit('EXHIBITIONS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'exhibition',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'exhibition', sort: sortType, params, cb: storeFetch })
     },
     getMoreExhibitions({ commit }, { sortType, params }) {
-        const storeFetch = (exhibitions => {
+        const storeFetch = exhibitions => {
             commit('ADD_TO_FETCHED_EXHIBITIONS', { exhibitions })
             commit('EXHIBITIONS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'exhibition',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'exhibition', sort: sortType, params, cb: storeFetch })
     },
     getSingleExhibition({ commit }, id) {
         commit('CLEAR_SINGLE_EXHIBITIONS')
         commit('EXHIBITIONS_LOADED', false)
-        api.getSingleType('exhibition', id, exhibition => {
+        return api.getSingleType('exhibition', id, exhibition => {
             commit('STORE_FETCHED_SINGLE_EXHIBITION', exhibition)
             commit('EXHIBITIONS_LOADED', true)
         })

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

     getAllGuides({ commit }, { sortType, params }) {
         commit('CLEAR_GUIDES')
         commit('GUIDES_LOADED', false)
-        const storeFetch = (guides => {
+        const storeFetch = guides => {
             let repacked = repackBySort(guides, sortType)
             commit('STORE_FETCHED_GUIDES', { guides: repacked })
             commit('GUIDES_LOADED', true)
+        }
+        return api.getByType({
+            type: 'guide',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'guide', sort: sortType, params, cb: storeFetch })
     },
     getMoreGuides({ commit }, { sortType, params }) {
-        const storeFetch = (guides => {
+        const storeFetch = guides => {
             let repacked = guides
             commit('ADD_TO_FETCHED_GUIDES', { guides: repacked })
             commit('GUIDES_LOADED', true)
+        }
+        return api.getByType({
+            type: 'guide',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'guide', sort: sortType, params, cb: storeFetch })
     },
     getSingleGuide({ commit }, id) {
         commit('CLEAR_SINGLE_GUIDES')
         commit('GUIDES_LOADED', false)
 
-        api.getSingleType('guide', id, guide => {
+        return api.getSingleType('guide', id, guide => {
             commit('STORE_FETCHED_SINGLE_GUIDE', guide)
             commit('GUIDES_LOADED', true)
         })

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

     getAllObjects({ commit }, { sortType, params }) {
         commit('CLEAR_OBJECTS')
         commit('OBJECTS_LOADED', false)
-        const storeFetch = (objects => {
+        const storeFetch = objects => {
             let repacked = repackBySort(objects, sortType)
             commit('STORE_FETCHED_OBJECTS', { objects: repacked })
             commit('OBJECTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'object',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'object', sort: sortType, params, cb: storeFetch })
     },
     getMoreObjects({ commit }, { sortType, params }) {
-        const storeFetch = (objects => {
+        const storeFetch = objects => {
             let repacked = objects
             commit('ADD_TO_FETCHED_OBJECTS', { objects: repacked })
             commit('OBJECTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'object',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'object', sort: sortType, params, cb: storeFetch })
     },
     getSingleObject({ commit }, id) {
         commit('CLEAR_SINGLE_OBJECTS')
         commit('OBJECTS_LOADED', false)
 
-        api.getSingleType('object', id, object => {
+        return api.getSingleType('object', id, object => {
             commit('STORE_FETCHED_SINGLE_OBJECT', object)
             commit('OBJECTS_LOADED', true)
         })

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

             cb: pages => {
                 commit('STORE_FETCHED_PAGES', { pages })
                 commit('PAGES_LOADED', true)
-            }
+            },
         })
     },
     getSinglePage({ commit }, id) {
         commit('CLEAR_SINGLE_PAGE')
         commit('PAGES_LOADED', false)
-        api.getSingleType('page', id, page => {
+        return api.getSingleType('page', id, page => {
             commit('STORE_FETCHED_SINGLE_PAGE', page)
             commit('PAGES_LOADED', true)
         })

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

     postsList.forEach(post => {
         const subtypes = post.categories
         subtypes.forEach(type => {
-            if(!byType[type]) byType[type] = []
+            if (!byType[type]) byType[type] = []
             byType[type].push(post)
         })
     })
     async getAllPosts({ commit }, { sortType, params }) {
         commit('CLEAR_POSTS')
         commit('POSTS_LOADED', false)
-        const storeFetch = (posts => {
+        const storeFetch = posts => {
             let repacked = posts
-            if(sortType == sortTypes.subtype) {
+            if (sortType == sortTypes.subtype) {
                 repacked = _arrangeByType(posts)
             }
             commit('STORE_FETCHED_POSTS', { posts: repacked })
             commit('POSTS_LOADED', true)
-        }) 
-        return await api.getByType({ type: 'post', sort: sortType, params, cb: storeFetch })
+        }
+        return await api.getByType({
+            type: 'post',
+            sort: sortType,
+            params,
+            cb: storeFetch,
+        })
     },
     getMorePosts({ commit }, { sortType, params }) {
-        const storeFetch = (posts => {
+        const storeFetch = posts => {
             commit('ADD_TO_FETCHED_POSTS', { posts })
             commit('POSTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'post',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'post', sort: sortType, params, cb: storeFetch })
     },
     getSinglePost({ commit }, id) {
         commit('CLEAR_SINGLE_POSTS')
         commit('POSTS_LOADED', false)
-        api.getSingleType('post', id, post => {
+        return api.getSingleType('post', id, post => {
             commit('STORE_FETCHED_SINGLE_POST', post)
             commit('POSTS_LOADED', true)
         })

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

     getAllPublications({ commit }, { sortType, params }) {
         commit('CLEAR_PUBLICATIONS')
         commit('PUBLICATIONS_LOADED', false)
-        const storeFetch = (publications => {
+        const storeFetch = publications => {
             let repacked = repackBySort(publications, sortType)
             commit('STORE_FETCHED_PUBLICATIONS', { publications: repacked })
             commit('PUBLICATIONS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'publication',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'publication', sort: sortType, params, cb: storeFetch })
     },
     getMorePublications({ commit }, { sortType, params }) {
-        const storeFetch = (publications => {
+        const storeFetch = publications => {
             let repacked = publications
             commit('ADD_TO_FETCHED_PUBLICATIONS', { publications: repacked })
             commit('PUBLICATIONS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'publication',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'publication', sort: sortType, params, cb: storeFetch })
     },
     getSinglePublication({ commit }, id) {
         commit('CLEAR_SINGLE_PUBLICATIONS')
         commit('PUBLICATIONS_LOADED', false)
 
-        api.getSingleType('publication', id, publication => {
+        return api.getSingleType('publication', id, publication => {
             commit('STORE_FETCHED_SINGLE_PUBLICATION', publication)
             commit('PUBLICATIONS_LOADED', true)
         })

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

     getAllShorts({ commit }, { sortType, params }) {
         commit('CLEAR_SHORTS')
         commit('SHORTS_LOADED', false)
-        const storeFetch = (shorts => {
+        const storeFetch = shorts => {
             let repacked = repackBySort(shorts, sortType)
             commit('STORE_FETCHED_SHORTS', { shorts: repacked })
             commit('SHORTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'short',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'short', sort: sortType, params, cb: storeFetch })
     },
     getMoreShorts({ commit }, { sortType, params }) {
-        const storeFetch = (shorts => {
+        const storeFetch = shorts => {
             let repacked = shorts
             commit('ADD_TO_FETCHED_SHORTS', { shorts: repacked })
             commit('SHORTS_LOADED', true)
+        }
+        return api.getByType({
+            type: 'short',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'short', sort: sortType, params, cb: storeFetch })
     },
     getSingleShort({ commit }, id) {
         commit('CLEAR_SINGLE_SHORTS')
         commit('SHORTS_LOADED', false)
 
-        api.getSingleType('short', id, short => {
+        return api.getSingleType('short', id, short => {
             commit('STORE_FETCHED_SINGLE_SHORT', short)
             commit('SHORTS_LOADED', true)
         })

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

     getAllTechniques({ commit }, { sortType, params }) {
         commit('CLEAR_TECHNIQUES')
         commit('TECHNIQUES_LOADED', false)
-        const storeFetch = (techniques => {
+        const storeFetch = techniques => {
             let repacked = repackBySort(techniques, sortType)
             commit('STORE_FETCHED_TECHNIQUES', { techniques: repacked })
             commit('TECHNIQUES_LOADED', true)
+        }
+        return api.getByType({
+            type: 'technique',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'technique', sort: sortType, params, cb: storeFetch })
     },
     getMoreTechniques({ commit }, { sortType, params }) {
-        const storeFetch = (techniques => {
+        const storeFetch = techniques => {
             let repacked = techniques
             commit('ADD_TO_FETCHED_TECHNIQUES', { techniques: repacked })
             commit('TECHNIQUES_LOADED', true)
+        }
+        return api.getByType({
+            type: 'technique',
+            sort: sortType,
+            params,
+            cb: storeFetch,
         })
-        return api.getByType({ type: 'technique', sort: sortType, params, cb: storeFetch })
     },
     getSingleTechnique({ commit }, id) {
         commit('CLEAR_SINGLE_TECHNIQUES')
         commit('TECHNIQUES_LOADED', false)
 
-        api.getSingleType('technique', id, technique => {
+        return api.getSingleType('technique', id, technique => {
             commit('STORE_FETCHED_SINGLE_TECHNIQUE', technique)
             commit('TECHNIQUES_LOADED', true)
         })

vue-theme/src/utils/api.js

     API_MEDIA_PATH: '/wp-json/wp/v2/media/',
 }
 
-const constructQuery = (params) => {
+const constructQuery = params => {
     let query = ''
-    
-    if(!params) return query
 
-    if(params.limit && params.page && params.s) {
+    if (!params) return query
+
+    if (params.limit && params.page && params.s) {
         query = `?s=${params.s}&limit=${params.limit}&p=${params.page}`
-    } else if(params.limit && params.page && !params.s && params.type) {
+    } else if (params.limit && params.page && !params.s && params.type) {
         query = `?type=${params.type}&limit=${params.limit}&p=${params.page}`
-    } else if(params.limit && params.page && !params.s) {
+    } else if (params.limit && params.page && !params.s) {
         query = `?limit=${params.limit}&p=${params.page}`
-    } else if(params.limit && !params.page) {
+    } else if (params.limit && !params.page) {
         query = `?limit=${params.limit}`
     }
     return query
         }
     },
     async getSingleType(type, id, cb) {
-        await axios
+        return await axios
             .get(SETTINGS.API_BASE_PATH + `${type}/${id}`)
             .then(response => {
                 cb(Object.values(response.data)[0])
     },
     async getRandom(types, cb) {
         let randomPosts = []
-        for(let type of types) {
+        for (let type of types) {
             await axios
                 .get(SETTINGS.API_BASE_PATH + `${type}?orderby=rand&limit=1`)
                 .then(response => {
             .catch(e => {
                 cb(e)
             })
-    }
+    },
 }

vue-theme/src/utils/helpers.js

 
 const sortTypes = {
     alpha: 'by-alpha',
-u    material: 'by-material',
+    material: 'by-material',
     artist: 'by-artist',
     episode: 'by-episode',
     upcoming: 'by-upcoming',

vue-theme/style.css

 Version: 1.0.0
 License: MIT
 Contributors: Sagar Bhatt, Pradeep Sonawane
-*/
+*/