feat: breaking out sidebar comp

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

@@ -0,0 +1,44 @@
+<template lang="pug">
+aside.shadow.b-radius
+    header
+        h4 this is an aisde for {{ type }}
+    section
+        slot
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    props: {
+        sidebar: {
+            type: Boolean
+        },
+        type: {
+            type: String
+        }
+    },
+    computed: {
+        ...mapGetters({
+            allArtists: 'allArtists',
+            allArtistsLoaded: 'allArtistsLoaded',
+
+            allEpisodes: 'allEpisodes',
+            allEpisodesLoaded: 'allEpisodesLoaded',
+        }),
+        posts() {
+            let type = this.$route.params.type
+            type = type.charAt(0).toUpperCase() + type.slice(1)
+
+            // Return list keyed by slug
+            return Object.values(this[`all${type}`]).reduce((postsMap, post) => { 
+                postsMap[post.slug] = post
+                return postsMap
+            }, {})
+        },
+    },
+    mounted() {
+        // TODO: this should be conditional after checking vuex stat
+    }
+}
+</script>

vue-theme/src/index.js

@@ -12,9 +12,12 @@ import IndexPage from '@/pages/index.vue'
 const router = new VueRouter({
     mode: 'history',
     routes: [
+        // Home Page
         { path: '/', component: IndexPage },
+        // List Pages
         { path: '/episodes', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: false } },
         { path: '/:type', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        // Single Pages
         { path: '/:type/:slug', component: () => import(/* webpackChunkName: "pages-single" */ './pages/single.vue'), props: { sidebar: true } },
     ]
 })

vue-theme/src/pages/episodes.vue

@@ -1 +0,0 @@
-// Episodes has a unique layout

vue-theme/src/pages/list.vue

@@ -10,15 +10,13 @@
         section(v-for="post in posts")
             router-link(:to="`./${type}/${post.slug}`")
                 h4 {{ post.title }}
-    //- COMPONENT: Make this with a prop
-    aside(v-if="sidebar").shadow.b-radius
-        header
-            h4 this is some other stuff
-
+    sidebar(v-if="sidebar" :type="`${type}`")
+        h1 slots
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import sidebar from '@/components/sidebar/sidebar'
 
 export default {
     props: {
@@ -26,6 +24,9 @@ export default {
             type: Boolean
         }
     },
+    components: {
+        sidebar: sidebar
+    },
     computed: {
         ...mapGetters({
             allArtists: 'allArtists',

vue-theme/src/pages/single.vue

@@ -6,15 +6,12 @@
         section
             h4 {{ posts[$route.params.slug].title }}
             .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
-    //- COMPONENT: Make this with a prop
-    aside(v-if="sidebar").shadow.b-radius
-        header
-            h4 this is some other stuff
-
+    sidebar(v-if="sidebar" :type="`${type}`")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import sidebar from '@/components/sidebar/sidebar'
 
 export default {
     props: {
@@ -22,6 +19,9 @@ export default {
             type: Boolean
         }
     },
+    components: {
+        sidebar: sidebar
+    },
     computed: {
         ...mapGetters({
             allArtists: 'allArtists',
@@ -30,9 +30,11 @@ export default {
             allEpisodes: 'allEpisodes',
             allEpisodesLoaded: 'allEpisodesLoaded',
         }),
+        type() { // Checks for type and fixes Episodes route edge case 
+            return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
+        },
         posts() {
-            let type = this.$route.params.type
-            type = type.charAt(0).toUpperCase() + type.slice(1)
+            let type = this.type.charAt(0).toUpperCase() + this.type.slice(1)
 
             // Return list keyed by slug
             return Object.values(this[`all${type}`]).reduce((postsMap, post) => {