:sparkles: adding auto-scroll mixing on page mount | cleaning up sort type definitions | altering route matcher to use fullPath

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

@@ -13,7 +13,7 @@ aside.sidebar
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { sortTypes } from '@/utils/helpers'
 
 export default {
     props: {
@@ -27,11 +27,11 @@ export default {
     data() {
         return {
             sortTypes: {
-                'most recent': '',
-                'alphabetized': 'by-alpha',
-                'by material': 'by-material',
-                'by artist': 'by-artist',
-                'by episode': 'by-episode',
+                'most recent': `${sortTypes.recent}`,
+                'alphabetized': `${sortTypes.alpha}`,
+                'by material': `${sortTypes.material}`,
+                'by artist': `${sortTypes.artist}`,
+                'by episode': `${sortTypes.episode}`,
             }
         }
     },
@@ -69,7 +69,7 @@ export default {
 <style lang="postcss">
 aside.sidebar
     position: sticky
-    top: 124px
+    top: 65px
     ul
         list-style: none
 </style>

vue-theme/src/pages/index.vue

@@ -32,14 +32,14 @@
 </template>
 
 <script>
-import { postTypeGetters } from './mixin-post-types'
+import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, postTypes } from '@/utils/helpers'
 
 export default {
-    mixins: [postTypeGetters],
+    mixins: [postTypeGetters, scrollTop],
     created() {
-        console.log(wp)
+        // console.log(wp)
 
         postTypes.forEach(type => {
             const capitalizedType = convertTitleCase(type)

vue-theme/src/pages/list.vue

@@ -9,6 +9,7 @@
         .posts(:class="{ 'is-grid': grid }")
             section(v-for="post in posts" :key="post.slug").shadow.post
                 router-link(:to="`/${type}/${post.slug}`")
+                    p {{ post.featured }}
                     h4 {{ post.title }} 
                     p(style="font-size: 9px;") {{ post.date }}
 
@@ -26,7 +27,7 @@
 
 <script>
 import sidebar from '@/components/sidebars/sidebar'
-import { postTypeGetters } from './mixin-post-types'
+import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, typeFromRoute, sortTypes } from '@/utils/helpers'
 
@@ -37,7 +38,7 @@ export default {
         grid: { type: Boolean },
         sortBy: { type: String }
     },
-    mixins: [postTypeGetters],
+    mixins: [postTypeGetters, scrollTop],
     computed: {
         type() { // Checks for type and fixes Episodes route edge case 
             return typeFromRoute(this.$route)
@@ -54,7 +55,7 @@ export default {
              * We override the API to sort by date
              * because items are returned by ID so
              * we need to resort it by date
-             */ 
+             */
             let unsortedOfType = Object.values(this[`all${type}`])
             let sortedByRecent = unsortedOfType.sort((postA, postB) => new Date(postB.date) - new Date(postA.date))
             
@@ -69,11 +70,13 @@ export default {
     methods: {
         setHeroAndGetPosts() {
             let type = convertTitleCase(this.type)
-
-            let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
             
-            console.log('trying to sort by:', sort)
-            console.log('includes:', Object.values(sortTypes).includes(sort))
+            // Sorting
+            let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
+            if(Object.values(sortTypes).includes(sort)) {
+                console.log('trying to sort by:', sort)
+                console.log(`sortTypes includes ${sort}:`, Object.values(sortTypes).includes(sort))
+            }
 
             // Is this a sort type?
             if(this.type !== sort || !Object.values(sortTypes).includes(sort)) sort = null

vue-theme/src/pages/mixin-post-types.js

@@ -25,5 +25,10 @@ const postTypeGetters = {
         ...mapState(stateHelper)
     }
 }
+const scrollTop = {
+    mounted() {
+        window.scrollTo(0, 0)
+    }
+}
 
-export { postTypeGetters }
+export { postTypeGetters, scrollTop }

vue-theme/src/pages/single.vue

@@ -21,7 +21,7 @@
         //- related artists section example layout
         section
             h2.t-up featured in this episode
-            ul.f-row.f-start
+            ul.f-col.f-start
                 li
                     img(src="https://i1.wp.com/www.craftinamerica.org/wp-content/uploads/2020/09/20200210_133120-e1599254267307.jpg")
                     h2.t-up Julie Schafler Dale
@@ -49,7 +49,7 @@ import block from '@/components/content-block/block'
 // import artists from '@/components/artist'
 import credits from '@/components/credits'
 
-import { postTypeGetters } from './mixin-post-types'
+import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, dePluralize, typeFromRoute } from '@/utils/helpers'
 
@@ -59,7 +59,7 @@ export default {
         sidebar: { type: Boolean },
         id: { type: Number }
     },
-    mixins: [postTypeGetters],
+    mixins: [postTypeGetters, scrollTop],
     data() {
         return {
             // Gallery control

vue-theme/src/router/routes.js

@@ -2,6 +2,8 @@ import indexPage from '@/pages/index.vue'
 import listPage from '@/pages/list.vue'
 import singlePage from '@/pages/single.vue'
 
+import { sortTypes } from '@/utils/helpers'
+
 export default [
     // Home Page
     { path: '/', component: indexPage },
@@ -11,11 +13,26 @@ export default [
         component: listPage,
         props: { sidebar: false, grid: true }
     },
+    { 
+        path: '/artists',
+        component: listPage,
+        props: { sidebar: true, grid: true }
+    },
     { path: '/:type', component: listPage, props: { sidebar: true } },
     // Sorted List Pages 
-    { path: '/:type/by-alpha', component: listPage, props: { sidebar: true, sortBy: 'by-alpha' } },
-    { path: '/:type/recent', component: listPage, props: { sidebar: true, sortBy: 'recent' } },
-    { path: '/:type/by-material', component: listPage, props: { sidebar: true, sortBy: 'by-material' } },
+    { 
+        path: `/artists/${sortTypes.alpha}`,
+        component: listPage,
+        props: { sidebar: true, grid: true, sortBy: `${sortTypes.alpha}` }
+    },
+    { 
+        path: `/artists/${sortTypes.recent}`,
+        component: listPage,
+        props: { sidebar: true, grid: true, sortBy: `${sortTypes.material}` }
+    },
+    { path: `/:type/${sortTypes.alpha}`, component: listPage, props: { sidebar: true, sortBy: `${sortTypes.alpha}` } },
+    { path: `/:type/${sortTypes.recent}`, component: listPage, props: { sidebar: true, sortBy: `${sortTypes.recent}` } },
+    { path: `/:type/${sortTypes.material}`, component: listPage, props: { sidebar: true, sortBy: `${sortTypes.material}` } },
     { path: '/:type/by-episode', component: listPage, props: { sidebar: true, sortBy: 'by-episode' } },
     { path: '/:type/by-artist', component: listPage, props: { sidebar: true, sortBy: 'by-artist' } },
     // Single Pages

vue-theme/src/utils/helpers.js

@@ -7,15 +7,12 @@ const dePluralize = type => {
     return type[type.length - 1] === 's' ? type.slice(0, -1) : type
 }
 
-const typeFromRoute = (route) => {
-    const type = route.params.type ? route.params.type : route.path.slice(1)
-    return type
-}
-
 const sortTypes = {
     alpha: 'by-alpha',
     recent: 'by-recent',
     material: 'by-material',
+    artist: 'by-artist',
+    episode: 'by-episode',
 }
 
 /**
@@ -23,7 +20,7 @@ const sortTypes = {
  * This makes ALL post type modules available for the
  * list and single components to request data
  */
- const postTypes = [
+const postTypes = [
     'episodes',
     'artists',
     'exhibitions',
@@ -32,4 +29,26 @@ const sortTypes = {
     'pages',
 ]
 
+/**
+ * Type assigned from Route :type
+ * In case of failure, tries to derive type
+ * matching pieces to postTypes array
+ */
+const typeFromRoute = route => {
+    let type = route.params.type ? route.params.type : route.fullPath.split('/')
+
+    if(!route.params.type) {
+        // Remove blank path sections and match to postTypes array
+        type = type
+            .filter(pathSection => pathSection != '')
+            .filter(pathSection => postTypes.includes(pathSection))
+        
+        // Only take the first match
+        type = type[0]
+        console.log(`type derived from route.path: ${type}`)
+    }
+    
+    return type
+}
+
 export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes }