:recyle: cleaning up cruft | fixing up home page | adding better comments

vue-theme/src/app.vue

@@ -8,21 +8,14 @@
 </template>
 
 <script>
-import navigation from '@/components/navigation/navigation'
-import hero from '@/components/hero'
-import footer from '@/components/footer'
+import ciaNav from '@/components/navigation/navigation'
+import ciaHero from '@/components/hero'
+import ciaFooter from '@/components/footer'
 
 import '@/sss'
 
 export default {
-    components: {
-        'cia-nav': navigation,
-        'cia-hero': hero,
-        'cia-footer': footer,
-    },
-    data () {
-        return {}
-    }
+    components: { ciaNav, ciaHero, ciaFooter }
 }
 </script>
 

vue-theme/src/pages/index.vue

@@ -3,29 +3,27 @@
 .page--index.f-row.between
     article.f-grow
         .f-row
-            section(v-if="allEpisodesLoaded && allEpisodes.length").shadow
+            section(v-if="allEpisodesLoaded").shadow
                 router-link(:to="`./episodes`")
                     h4.t-cap episodes
-                router-link(:to="{ path: `/episodes/${Object.values(allEpisodes)[0].slug}` }")
-                    p {{ Object.values(allEpisodes)[0].title }}
+                    p(v-if="Object.values(allEpisodes).length > 0") {{ Object.values(allEpisodes)[0].slug }}
+                    p(v-else) no episodes
 
-            section(v-if="allArtistsLoaded && allArtists.length").shadow
+            section(v-if="allArtistsLoaded").shadow
                 router-link(:to="`./artists`")
                     h4.t-cap artists
-                router-link(:to="{ path: `/artists/${Object.values(allArtists)[0].slug}` }")
-                    p {{ Object.values(allArtists)[0].title }}
-                    
-            section(v-if="allPagesLoaded && allPages.length").shadow
+                    p(v-if="Object.values(allArtists).length > 0") {{ Object.values(allArtists)[0].slug}}
+                    p(v-else) no artists
+
+            section(v-if="allPagesLoaded").shadow
                 h4.t-cap pages
-                router-link(:to="{ path: `/pages/${Object.values(allPages)[0].slug}` }")
-                    p {{ Object.values(allPages)[0].title }}
-        
+                    p(v-if="Object.values(allPages).length > 0") {{ Object.values(allPages)[0].slug }}
+                    p(v-else) no pages
         .f-row
-            section(v-if="allPostsLoaded && allPosts.length").shadow
+            section(v-if="allPostsLoaded").shadow
                 router-link(:to="`./posts`")
                     h4.t-cap posts
-                router-link(:to="{ path: `/posts/${Object.values(allPosts)[0].slug}` }")
-                    p {{ Object.values(allPosts)[0].title }}
+                    p(v-if="Object.values(allPosts).length > 0") {{ Object.values(allPosts)[0].slug }}
      
         .f-row
             footer.f-row

vue-theme/src/pages/single.vue

@@ -13,7 +13,7 @@
                     li(v-for="(imageID, j) in post.galleries[block.gallery].ids" :class="`gallery-${i}--image-${j+1}`" :key="`block-${i}-${j}`")
                         img(@click="openGallery(i - 1, imageID)" :src="post.attached[imageID]['thumbnail']")
                         button(@click="openGallery(i - 1, imageID)") gallery: {{ i }} image: {{ imageID }}
-                //- Fullscreen gallery
+                //- Fullscreen gallery component for every gallery block
                 gallery(
                     v-if="activeGalleryIndex == (i - 1)"
                     :activeImageIndex="activeImageIndex"
@@ -21,7 +21,7 @@
                     :images="imagesInGallery"
                 )
 
-            //- Just a regular block
+            //- Just a regular block (html or img)
             .block(v-else v-html="block")
 
     sidebar(v-if="sidebar" :type="`${type}`")
@@ -40,22 +40,17 @@ import { convertTitleCase, typeFromRoute } from '@/utils/helpers'
 
 export default {
     props: {
-        sidebar: {
-            type: Boolean
-        }
+        sidebar: { type: Boolean }
     },
     components: { sidebar, gallery },
     data() {
         return {
-            images: [], 
+            // Gallery control
             activeGalleryIndex: -1,
             activeImageID: -1
         }
     },
     computed: {
-        post() {
-            return this.posts[this.$route.params.slug]
-        },
         ...mapGetters({
             allPages: 'allPages',
             allPagesLoaded: 'allPagesLoaded',
@@ -72,6 +67,18 @@ export default {
         type() { // Checks for type and fixes Episodes route edge case 
             return typeFromRoute(this.$route)
         },
+
+        /**
+         * We get the actual post data using the slug
+         */
+        post() {
+            return this.posts[this.$route.params.slug]
+        },
+        /**
+         * We grab posts using the type derived from
+         * the route (See typeFromRoute() helper) and
+         * create a map keyed by post slug 
+         */
         posts() {
             let type = convertTitleCase(this.type)
             
@@ -83,9 +90,19 @@ export default {
                 return postsMap
             }, {})
         },
+
+        /**
+         * 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 post.attached
+         */
         imagesInGallery() {
             if(!this.activeGalleryIndex < 0) return {}
-            
+            // Create a map of images by their ID
+            // {
+            //     imageId: { 'thumbnail': url, 'large': url }
+            // }
             return this.post.galleries[this.activeGalleryIndex].ids.reduce((imageMap, id) => {
                 imageMap[id] = this.post.attached[id]
                 return imageMap
@@ -96,10 +113,25 @@ export default {
         }
     },
     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 {number} galleryIndex
+         * @param {string} imageID 
+         */
         openGallery(galleryIndex, imageID) {
             this.activeGalleryIndex = galleryIndex
             this.activeImageID = imageID ? imageID : 0
         },
+
+        /**
+         * Everytime the posts object changes
+         * we use this to set a new HERO
+         * in vuex
+         * @param {object} posts 
+         */
         checkAndSetHero(posts) {
             const post = posts[this.$route.params.slug]
             if(!post || !post.hero) return
@@ -110,19 +142,19 @@ export default {
     },
     watch: {
         posts(newVal, oldVal) {
-            // Loads images from the DOM
-            // this.checkForImages(newVal)
-            
             this.checkAndSetHero(newVal)
         }
     },
     created() {
-        let type = convertTitleCase(this.$route.params.type)
-        
-        if(!this[`all{type}Loaded`]) {
+        /**
+         * Conditionally load based on post type
+         * which is derived from the route
+         * !: posts watcher fires when this finishes
+         */
+        let type = convertTitleCase(this.type)
+        if(!this[`all${type}Loaded`]) {
             // console.log('Retrieving...', type)
             this.$store.dispatch(`getAll${type}`)
-            // posts watcher will fire after this
         }
     }
 }

vue-theme/src/store/index.js

@@ -9,7 +9,6 @@ import page from './modules/page'
 import post from './modules/post'
 import artist from './modules/artist'
 import episode from './modules/episode'
-import media from './modules/media'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -45,8 +44,7 @@ const store = new Vuex.Store({
       post,
       page,
       artist,
-      episode,
-      media
+      episode
   },
   strict: debug,
 })

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

@@ -1,35 +0,0 @@
-import api from '../../utils/api'
-
-const state = {
-    all: [],
-    loaded: false,
-}
-
-const getters = {
-    allMedia: state => state.all,
-    allMediaLoaded: state => state.loaded,
-}
-
-const actions = {
-    async getMediaById({ commit }, ids) {
-        commit('CLEAR_MEDIA')
-        commit('MEDIA_LOADED', false)
-        
-        const p = ids.map(async id => {
-            return await api.getSingleMedia(id, media => {
-                commit('STORE_FETCHED_MEDIA', { media })
-            })
-        })
-        console.log(p)
-        await Promise.all(p)
-        commit('MEDIA_LOADED', true) 
-    }
-}
-
-const mutations = {
-    STORE_FETCHED_MEDIA(state, { media }) { state.all.push() },
-    CLEAR_MEDIA(state) { state.all = [] },
-    MEDIA_LOADED(state, val) { state.loaded = val },
-}
-
-export default { state, getters, actions, mutations }

vue-theme/src/utils/post-types.js

@@ -1,4 +0,0 @@
-export default [
-    'posts',
-    'pages'
-]