feat: sidebar loading based on prop | feat: list pages based on route name

vue-theme/src/components/navigation/navigation.vue

@@ -9,6 +9,8 @@ nav.main
             p  
         li
             a(href="/") home
+        li
+            a(href="/artists") artists
         li
             a(href="/lazy") lazy
 </template>

vue-theme/src/index.js

@@ -8,12 +8,18 @@ import App from '@/app.vue'
 import store from '@/store'
 
 import IndexPage from '@/pages/index.vue'
+import ListPage from '@/pages/list'
 
 const router = new VueRouter({
     mode: 'history',
     routes: [
         { path: '/', component: IndexPage },
-        { path: '/lazy', component:  () => import(/* webpackChunkName: "pages-lazy" */ './pages/lazy.vue') }
+        {
+            path: '/:type',
+            component: ListPage,
+            props: { sidebar: true }
+        },
+        { path: '/lazy', component:  () => import(/* webpackChunkName: "pages-lazy" */ './pages/lazy.vue') },
     ]
 })
 

vue-theme/src/pages/list.vue

@@ -1,2 +1,54 @@
 // Artists/Exhibitions/Events/search-results
-// Optional sidebar
+// Optional sidebar
+<template lang="pug">
+.page--list.f-row.between
+    article.f-grow
+        header
+            h1 {{ site }}: {{ $route.params.type }} list
+        section
+            h4 {{ $route.params.type }}
+            p {{ Object.values(allArtists).length }}
+            p {{ sidebar }}
+    //- COMPONENT: Make this with a prop
+    aside(v-if="sidebar").shadow.b-radius
+        header
+            h4 this is some other stuff
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    props: {
+        sidebar: {
+            type: Boolean
+        }
+    },
+    computed: {
+        ...mapGetters({
+            allArtists: 'allArtists',
+            allArtistsLoaded: 'allArtistsLoaded',
+            allEpisodes: 'allEpisodes',
+            allEpisodesLoaded: 'allEpisodesLoaded',
+        }),
+    },
+    data() {
+        return {
+            loaded: false,
+            site: wp.site_name,
+        }
+    },
+    mounted() {
+        switch (this.$route.params.type) {
+            case 'artists':
+                this.$store.dispatch('getAllArtists')
+                break
+            case 'episodess':
+                this.$store.dispatch('getAllEpisodes')
+                break
+        }
+        
+    }
+}
+</script>

vue-theme/src/pages/single.vue

@@ -1,2 +1,77 @@
 // Single page for single episode/artist/page/edu-guide
-// Optional sidebar
+// Optional sidebar
+// Homepage grid
+<template lang="pug">
+.page--index.f-row.between
+    article.f-grow.shadow.b-radius
+        header
+            h1 {{ site }}: index
+        section(v-if="allEpisodesLoaded")
+            h4 Episodes
+            p {{ Object.values(allEpisodes).length }}
+        section(v-if="allArtistsLoaded")
+            h4 artists
+            p {{ Object.values(allArtists).length }}
+        section(v-if="allPagesLoaded")
+            h4 pages
+            p {{ Object.values(allPages).length }}
+        section(v-if="allPostsLoaded")
+            h4 posts
+            p {{ Object.values(allPosts).length }}
+        section
+            //- COMPONENT: Looping component
+            .post(v-for="post in allPosts")
+                h4.post--title {{ post.slug }}
+                ul.post--content
+                    li.post--content--block(v-for="block in post.blocks" v-html="block")
+        footer.f-row
+            p icon
+
+    //- COMPONENT: Make this with a prop
+    aside.shadow.b-radius
+        header
+            h4 this is some other stuff
+        section(v-if="allPostsLoaded")
+            //- COMPONENT: See above
+            .post(v-for="post in allPosts")
+                h4.post--title {{ post.slug }}
+                ul.post--content
+                    li.post--content--block(v-for="block in post.blocks" v-html="block")
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+    computed: {
+        ...mapGetters({
+            somePages: 'somePages',
+            allPages: 'allPages',
+            allPostsLoaded: 'allPostsLoaded',
+            allPosts: 'allPosts',
+            allPagesLoaded: 'allPagesLoaded',
+            allArtists: 'allArtists',
+            allArtistsLoaded: 'allArtistsLoaded',
+            allEpisodes: 'allEpisodes',
+            allEpisodesLoaded: 'allEpisodesLoaded',
+        }),
+    },
+    data() {
+        return {
+            site: wp.site_name,
+        }
+    },
+    mounted() {
+        console.log('routes: ', wp.routes)
+        console.log('rest url: ', wp.rest)
+        console.log('template: ', wp.template)
+
+        this.$store.dispatch('getAllPages')
+        this.$store.dispatch('getAllPosts')
+
+        this.$store.dispatch('getAllArtists')
+        this.$store.dispatch('getAllEpisodes')
+    }
+}
+</script>