Merge branch 'dev' of craft-in-america/vue-wp into master

plugins/cia-post-types/includes/custom-taxonomies.php

 <?php
     function create_materials_taxonomy() {
         $post_types_that_show_materials = [
-            'artist', 'guide', 'short',
+            'artist', 'exhibition', 'event', 'guide', 'short',
             'object', 'publication', 'technique'
         ];
         register_taxonomy('material', $post_types_that_show_materials, ['label' => 'Materials']);

plugins/cia-post-types/includes/p2p-mappings.php

 }
 
 function register_all_one_offs() {
-    register_connections_for('object', ['object', 'exhibition', 'guide', 'technique', 'post']);
-    register_connections_for('artist', ['artist', 'object', 'technique']);
-    register_connections_for('short', ['technique', 'short', 'object', 'guide', 'technique']);
-    register_connections_for('technique', ['technique', 'post']);
-    register_connections_for('guide', ['technique', 'exhibition', 'post']);
-    register_connections_for('exhibition', ['technique']);
-    register_connections_for('event', ['event', 'object', 'guide', 'technique']);
-    register_connections_for('episode', ['object', 'episode', 'guide', 'technique']);
+    register_connections_for('object', ['object', 'exhibition', 'guide', 'technique', 'post', 'publication']);
+    register_connections_for('artist', ['artist', 'object', 'technique', 'publication']);
+    register_connections_for('short', ['short', 'exhibition', 'event', 'object', 'guide', 'post', 'technique', 'publication']);
+    register_connections_for('technique', ['technique', 'post', 'publication']);
+    register_connections_for('guide', ['technique', 'exhibition', 'post', 'publication']);
+    register_connections_for('exhibition', ['exhibition','technique', 'publication']);
+    register_connections_for('event', ['event', 'object', 'post', 'guide', 'technique', 'publication']);
+    register_connections_for('episode', ['episode', 'object', 'guide', 'technique', 'publication']);
+    register_connections_for('post', ['post']);
 }
 
 function all_connection_types() {

vue-theme/editor-style.css

     /* leave underline to show links when editing */
     /* text-decoration: none; */
 }
-a &:hover {
+a:hover {
     cursor: pointer;
     color: black;
 }
 }
 
 /* separator types */
+.editor-styles-wrapper, .wp-block-separator {
+    border: none;
+    /* height: 0.8em; */
+    text-align: center
+}
+
 hr .wp-block-separator, .is-style-default {
-    height: 1px;
     width: 15vw;
+    border-top: 3px solid !important;
+    border-bottom: 0 !important;
 }
 
+
 hr .wp-block-separator, .is-style-wide {
-    height: 3px;
     width: 50vw;
+    border-top: 3px solid;
+    border-bottom: 0;
 }
 
 hr .wp-block-separator, .is-style-dots:before {
     letter-spacing: 4em;
     padding-left: 4em;
-}
+}
+    
+.wp-block-image figcaption {
+    position: inherit !important;
+    background: none !important;
+    color: black !important;
+}
+

vue-theme/functions.php

 function set_custom_edit_artist_columns($columns) {
     $date = $columns['date'];
     unset( $columns['date'] );
-    $columns['artist_type'] = __('Artist Type', 'my-text-domain' );
-    $columns['material'] = __('Material', 'my-text-xx' );
+    $columns['artist_type'] = __('Artist Type' );
+    $columns['material'] = __('Material' );
     $columns['date'] = $date;
     return $columns;
 }
 function set_custom_edit_event_columns($columns) {
     $date = $columns['date'];
     unset( $columns['date'] );
-    $columns['event_type'] = __('Event Type');
+    $columns['event_type'] = __('Event Type' );
+    $columns['material'] = __('Material' );
     $columns['date'] = $date;
     return $columns;
 }
             $terms = get_the_term_list( $post_id , 'event_type' , '' , ', ' , '' );
             echo is_string( $terms ) ? $terms : '—';
             break;
+            // display a list of material terms assigned to the post 
+        case 'material' :
+            $terms = get_the_term_list( $post_id , 'material' , '' , ', ' , '' );
+            echo is_string( $terms ) ? $terms : '—';
+            break;
+    }
+}
+
+// Add the custom columns for EXHIBITION:
+add_filter( 'manage_exhibition_posts_columns', 'set_custom_edit_exhibition_columns' );
+function set_custom_edit_exhibition_columns($columns) {
+    $date = $columns['date'];
+    unset( $columns['date'] );
+    $columns['material'] = __('Material');
+    $columns['date'] = $date;
+    return $columns;
+}
+// Add the data to the custom columns for EXHIBITION:
+add_action( 'manage_exhibition_posts_custom_column' , 'custom_exhibition_column', 10, 2 );
+function custom_exhibition_column( $column, $post_id ) {
+    switch ( $column ) {
+        case 'material' :
+            $terms = get_the_term_list( $post_id , 'material' , '' , ', ' , '' );
+            echo is_string( $terms ) ? $terms : '—';
+            break;
     }
 }
 

vue-theme/src/components/card.vue

         padding: $ms--3
         margin: 0
     h1
-        font-size: $ms-0
+        font-size: $ms-1
         padding: 0
         line-height: initial
         display: -webkit-box

vue-theme/src/components/footer.vue

 <template lang="pug">
 .footer-wrapper.t-up.t-sans
     footer.main.w-max.f-row.between
-        ul.f-col.start
+        ul.f-col
             //- address contact   
             li
                 h4 Craft in America
                     a(href="https://visitor.r20.constantcontact.com/d.jsp?llr=fyb4y9cab&p=oi&m=fyb4y9cab&sit=olvymhdeb&f=ee3616e1-10de-4a59-b451-1a882111b1f5", target="_blank") Join email list
                             
         //- menu links
-        ul.f-col.start
+        ul.f-col
             li
                 h5 
-                router-link(to="/episode") PBS Series
+                    router-link(to="/episode") PBS Series
                 ul.f-col.start 
                     li 
                         router-link(to="/episode") &nbsp; Episodes
             li 
                 h5
                     router-link(to="/artist") Artists
-                    ul.f-col.start
-                        li
-                            router-link(to="/artist/sorted/by-alpha") &nbsp; A-Z
-                        li
-                            router-link(to="/artist/sorted/by-material") &nbsp; by Material
+                ul.f-col
+                    li
+                        router-link(to="/artist/sorted/by-alpha") &nbsp; A-Z
+                    li
+                        router-link(to="/artist/sorted/by-material") &nbsp; by Material
 
             li
                 h5 
-                router-link(to="/exhibition") Exhibitions
-                ul.f-col.start
+                    router-link(to="/exhibition") Exhibitions
+                ul.f-col
                     li
                         router-link(to="/exhibition/sorted/by-current-and-upcoming") &nbsp; Current/Upcoming
                     li
 
             li
                 h5
-                router-link(to="/event") Center 
-                ul.f-col.start
+                    router-link(to="/page/center") Center 
+                ul.f-col
+                    li
+                        router-link(to="/page/center") &nbsp; Info
                     li
                         router-link(to="/exhibition") &nbsp; Exhibitions
                     li 
                         router-link(to="/event/sorted/by-current-and-upcoming") &nbsp; Events 
                     li
-                        router-link(to="/event/sorted/by-type&talks") &nbsp; Talks &amp; Interviews
+                        router-link(to="/event?type=talks") &nbsp; Talks &amp; Interviews
             li
                 h5
-                router-link(to="") Education 
-                ul.f-col.start
+                    router-link(to="") Education 
+                ul.f-col
                     li
                         router-link(to="/guide") &nbsp; Guides 
                     li 
                         router-link(to="/publication") &nbsp; Publications 
+                    li 
+                        router-link(to="/page/library") &nbsp; Library 
 
 
             li
                 h5
-                router-link(to="") News
-                ul.f-col.start
+                    router-link(to="") News
+                ul.f-col
                     li
                         router-link(to="/blog") &nbsp; Blog Posts  
                     li 
-                        router-link(to="/blog/sorted/by-type&releases") &nbsp; Press Releases 
+                        router-link(to="/posts?type=releases") &nbsp; Press Releases 
                     li 
-                        router-link(to="/blog/sorted/by-type&articles") &nbsp; In the News 
+                        router-link(to="/posts?type=articles") &nbsp; In the News 
 
     .sub-footer.f-col.start
         h6 Craft in America &copy; 2010&ndash;{{ today }} 
     footer.main
         display: flex
         flex-wrap: wrap
+        align-items: flex-start 
+
         min-width: $min-width
         /* background-color: $cia_red */
         // ALL <ul> tags
                 width: 100%
         // OUTER <ul> tags
         > ul
-            padding: 0 $ms-0
+            padding: $ms-0
             &:nth-child(n+2)
-                padding: 0 $ms-0 $ms-3 $ms-0
+                /* padding: 0 $ms-0 $ms-3 $ms-0 */
             > li
                 color: $cia_white
-                padding: $ms-0 0 0
-                h5
-                    color: $cia_white
-                    margin: $ms-0 0 $ms--1
+                padding: 0 0 $ms--6
+                h4
+                    margin: $ms-0 0 $ms--3
+                h5 
+                    /* margin: $ms-0 0 $ms--1 */
+                    margin: $ms-0 0 0
                 a, a:link, a:visited
                     color: $cia_white
                     text-decoration: none
             /* background-color: rebeccapurple */
             background-color: $cia_red
             &:nth-child(n+2)
-                margin: 0 0 $ms-2 0
+                /* margin: 0 0 $ms-2 0 */
                 > li
                     width: 43%
     /* 1200px */

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

                     li
                         router-link(to="/event/sorted/by-current-and-upcoming") Events Current/Upcoming
                     li
-                        router-link(to="/event/sorted/by-type") Talks & Interviews
+                        router-link(to="/event?type=talks") Talks & Interviews
                     li
                         router-link(to="/page/library") Library
             li.f-grow

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

         .shadow(v-if="shouldShowListSort.includes(type) && layout !== 'single'")
             h3.t-up sort {{ type }}
             ul.t-up
+                li 
+                    //- ?type=articles //
+                    router-link(v-if="type === 'post' " :to="`/${type}?type=articles`")
+                        p in the news
+                li 
+                    //- ?type=releases //
+                    router-link(v-if="type === 'post' " :to="`/${type}?type=releases`")
+                        p press releases 
+                li 
+                    //- ?type=talks //
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=talks`")
+                        p talks 
+                    //- by type //
                 li(v-for="option in sortOptions")
                     router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
                         p {{ option }}
                 li
-                    router-link(:to="`/${type}`")
-                        p by all
-                li
-                    router-link(v-if="shouldShowDateSort.includes(type) && layout !== 'single'" :to="`/${type}/sorted/by-current-and-upcoming`")
+                    router-link(v-if="shouldShowDateSort.includes(type) " :to="`/${type}/sorted/by-current-and-upcoming`")
                         p by current and upcoming
+                li
+                    router-link(:to="`/${type}/sorted/by-date`")
+                        p by all
         
-        //- if {{type}} sorted by-material show material options
+        //- if {{type}} has sorted by-material show material options
         .shadow(v-if="shouldShowMaterialSort.includes(type) && layout !== 'single'")
             h3.t-up {{ type }} by material
             ul.t-up
                         router-link(:to="`/${type}/sorted/by-material#${material}`")
                             p {{ material }}
 
-        //- if artist sorted by-alpha show alpha options           
+        //- if artist has sorted by-alpha show alpha options           
         .shadow(v-if="['artist'].includes(type) && layout !== 'single'")
             h3.t-up {{ type }} alpha 
             ul.t-up
-                li
+                li.f-row.start.wrap
                     template(v-for="charaSet in charaSets") 
                         router-link(:to="`/${type}/sorted/by-alpha#${charaSet[0]}`")
-                            p {{ charaSet }}
+                            p.alpha {{ charaSet }}
 
         //- p2p types and related posts
         .shadow(v-if="layout === 'single' && Object.keys(related).length" v-for="p2pPostType in Object.keys(related)")
     data() {
         return {
             sortTypes: {
-                alphabetized: `${sortTypes.alpha}`,       //:0
-                'by material': `${sortTypes.material}`,   //:1
-                'by artist': `${sortTypes.artist}`,       //:2
-                'by episode': `${sortTypes.episode}`,     //:3
+                alphabetized: `${sortTypes.alpha}`,     //:0
+                'by material': `${sortTypes.material}`, //:1
+                'by artist': `${sortTypes.artist}`,     //:2
+                'by episode': `${sortTypes.episode}`,   //:3
+                'by type': `${sortTypes.subtype}`,      //:4
+                // 'by articles': `articles`,              //:5
+                subtype: 'by-type',
             },
             charaSets: [
-                '0 a b', 'c d e', 'f g h',
-                'i j k', 'l m n', 'o p q',
-                'r s t', 'u v w', 'x y z'
+                // '0 a b', 'c d e', 'f g h',
+                // 'i j k', 'l m n', 'o p q',
+                // 'r s t', 'u v w', 'x y z'
+                '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 
+                'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
             ],
             materials: materials,
             shouldShowListSort: [
                 'publication', 'technique', 'post'
             ],
             shouldShowMaterialSort: [
-                'artist', 
+                'artist', 'exhibition', 'event',
                 'short', 'guide', 'object',
                 'technique',
             ],
             ],
             shouldShowTypeSort: [
                 'short', 'guide', 'object',
-                'publication', 'technique', 'post'
+                'publication', 'technique', 'post', 'event'
             ]
         }
     },
                         Object.keys(this.sortTypes)[0],
                         Object.keys(this.sortTypes)[3],
                         Object.keys(this.sortTypes)[1],
-                        `by ${this.type} type`,
+                        Object.keys(this.sortTypes)[4],
+                        // `by ${this.type} type`,
+                    ]
+                    break
+                case 'exhibition':
+                    opts = [
+                        // Object.keys(this.sortTypes)[4],
+                        // Object.keys(this.sortTypes)[1],
+                    ]
+                    break
+                case 'event':
+                    opts = [
+                        // Object.keys(this.sortTypes)[4],
+                        // Object.keys(this.sortTypes)[1],
                     ]
                     break
                 case 'post':
                     opts = [
-                        `by ${this.type} type`,
+                        Object.keys(this.sortTypes)[4],
+                        // `by ${this.type} type`,
+                        // Object.keys(this.sortTypes)[5],
+                        // `by articles`
                     ]
                     break
                 case 'short':
 @import '../../sss/theme.sss'
 aside.sidebar
     /* need to solve for mobile as the sticky creates scroll issues */
-    /* position: sticky */
+    position: sticky
     top: 40px
     width: 100%
     p, h3
         > *
             padding: $ms-0
             margin: 0 0 $ms-0 0
+            display: table-cell
         > .post
             /* background-color: blue */
     ul
         flex-direction: column
         flex-wrap: wrap 
         li
-            padding: 0 0 $ms-0 0
+            /* padding: 0 0 $ms-0 0 */
             img
-                width: 100%
+                display: none
+                padding: $ms-0 0 $ms--4 0
+            p.alpha 
+                padding: 0 $ms--4
+
     .shadow
         background-color: white
 
+
 /* width larger than $medium  */
 @media (min-width: $medium)
     aside.sidebar
+        position: sticky
         min-width: 25%
         width: 25%
+        > section 
+            > * 
+                display: inherit 
         ul
             flex-direction: column
+            li 
+                img
+                    display: block  
+                    width: 100%
+
 </style>

vue-theme/src/pages/list.vue

 
         header.center.t-up
             .title.f-row
-                h3(v-if="!isSearch") {{ type }}s 
+                h3(v-if="!isSearch && !hasSubtype") {{ type }}s 
+                h3(v-else-if="hasSubtype") {{ type }}s: {{ $route.query.type }} 
                 h3(v-else) Search results for: {{$route.query.s }} 
                 span(v-if="sortBy")
                     h3 {{ sortBy.replace('-', ' ') }}
     },
     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'
+        },
+        hasSearchTerm() {
+            return this.$route.query.s
+        },
+        hasSubtype() {
+            return this.$route.query.type
         },
         sortBy() {
             return this.$route.params.sortBy
             return !sansSidebarTypes.includes(this.type)
         },
         pType() {
-            if(!this.type) return
+            if (!this.type) return
             return `${convertTitleCase(this.type)}s`
         },
         loaded() {
             if (!this.pType) return
-            return this.isSearch ? this['allSearchResultsLoaded'] : this[`all${this.pType}Loaded`]
+            return this.isSearch
+                ? this['allSearchResultsLoaded']
+                : this[`all${this.pType}Loaded`]
         },
         posts() {
             if (!this.pType) return
-            return this.isSearch ? this['allSearchResults'] : this[`all${this.pType}`]
+            return this.isSearch
+                ? this['allSearchResults']
+                : this[`all${this.pType}`]
         },
         shouldLoadAllAtOnce() {
-            return this.type == 'episode' ||
+            return (
+                this.type == 'episode' ||
                 this.sortBy == sortTypes.subtype ||
                 this.sortBy == sortTypes.material ||
                 this.sortBy == sortTypes.episode
-        }
+            )
+        },
     },
     methods: {
         async loadMoreSearchResults() {
-            if(!this.keepFetching) return console.warn('Nothing left to fetch...')
+            if (!this.keepFetching)
+                return console.warn('Nothing left to fetch...')
             const getPosts = async params => {
-                return await this.$store.dispatch(`getMoreSearchResults`, { params })
+                return await this.$store.dispatch(`getMoreSearchResults`, {
+                    params,
+                })
             }
             try {
                 this.loadingFetched = true
                 this.page++
-                const res = await getPosts(
-                    {
-                        limit: this.perPage,
-                        page: this.page,
-                        s: this.searchTerm
-                    }
-                )
+                const res = await getPosts({
+                    limit: this.perPage,
+                    page: this.page,
+                    s: this.searchTerm,
+                })
                 this.loadingFetched = false
                 // Stop trying to load more posts
-                if(res && !res.length) {
+                if (res && !res.length) {
                     this.keepFetching = false
-                    if(!res.length) console.warn(`Empty response for search results:`, res.length)
+                    if (!res.length)
+                        console.warn(
+                            `Empty response for search results:`,
+                            res.length,
+                        )
                 }
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
         },
         async loadMorePosts(shouldClear) {
-            if(!this.keepFetching) return console.warn('Nothing left to fetch...')
+            if (!this.keepFetching)
+                return console.warn('Nothing left to fetch...')
 
-            const getPosts = async  (params, dispatchType) => {
-                if(!this.type) throw `post type: ${this.type} not found...`
+            const getPosts = async (params, dispatchType) => {
+                if (!this.type) throw `post type: ${this.type} not found...`
                 console.log(`Getting more ${this.type} posts`)
                 // We always grab all pages on hero init so no need to do it here
-                return this.pType && this.type != 'page' ? await this.$store.dispatch(
-                    `get${dispatchType}${this.pType}`,
-                    { sortType: this.sortBy, params }
-                ) : []
+                return this.pType && this.type != 'page'
+                    ? await this.$store.dispatch(
+                          `get${dispatchType}${this.pType}`,
+                          { sortType: this.sortBy, params },
+                      )
+                    : []
             }
 
-            if(shouldClear) {
+            if (shouldClear) {
                 this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
-                
+
                 // Clear any state needed to track title inbetweens
                 const hasInbetweens = ['artist']
-                if(hasInbetweens.includes(this.type)) {
+                if (hasInbetweens.includes(this.type)) {
                     this.$store.commit(`CLEAR_${this.pType.toUpperCase()}_SEEN`)
                 }
             }
             try {
                 this.loadingFetched = true
                 this.page++
-                console.log('shouldLoadAll :', this.shouldLoadAllAtOnce, this.type)
+                // console.log('shouldLoadAll :', this.shouldLoadAllAtOnce, this.type)
+                const params = {
+                    limit: this.shouldLoadAllAtOnce ? -1 : this.perPage,
+                    page: this.page,
+                }
+                if (this.hasSubtype) {
+                    params.type = this.$route.query.type
+                }
                 const res = await getPosts(
-                    {
-                        limit: this.shouldLoadAllAtOnce ? -1 : this.perPage,
-                        page: this.page
-                    },
-                    this.shouldLoadAllAtOnce ? 'All' : 'More'
+                    params,
+                    this.shouldLoadAllAtOnce ? 'All' : 'More',
                 )
                 this.loadingFetched = false
 
                 // Stop trying to load more posts
-                if(res && !res.length || this.shouldLoadAllAtOnce) {
+                if ((res && !res.length) || this.shouldLoadAllAtOnce) {
                     this.keepFetching = false
-                    if(!res.length) console.warn(`Empty response for ${this.type}:`, res.length)
-                    if(this.shouldLoadAllAtOnce) console.warn(`Fetched all responses for ${this.type}:`, res.length)
+                    if (!res.length)
+                        console.warn(
+                            `Empty response for ${this.type}:`,
+                            res.length,
+                        )
+                    if (this.shouldLoadAllAtOnce)
+                        console.warn(
+                            `Fetched all responses for ${this.type}:`,
+                            res.length,
+                        )
                 }
-            } catch (err) { console.error(err) }
+            } catch (err) {
+                console.error(err)
+            }
         },
         async getPage(type) {
             await this._getAllIfNotLoaded('page', this.$store)
-            if(!this.allPages) throw 'no pages in state'
+            if (!this.allPages) throw 'no pages in state'
             const page = this.allPages.filter(page => page.slug == `${type}`)[0]
-            if(!page) throw `No page: ${type} found. Cannot set hero.`
+            if (!page) throw `No page: ${type} found. Cannot set hero.`
             return page
         },
         // _setHeroInfo(post) {} from mixin
         // _clearHero(store) {} from mixin
         async checkAndSetHero(type) {
+            // console.log('hero type :', type)
             this._clearHero(this.$store)
             try {
                 const page = await this.getPage(type)
                 // We always set a hero no matter what
                 // Because the hero component will deal
                 // with how to render based on hero.url
-                this.$store.commit('SET_HERO', this._setHeroInfo(page))
-            } catch (err) { console.error(err) }
+                const heroJson = this._setHeroInfo(page)
+                heroJson.subtype = this.$route.query.type
+                console.log(heroJson)
+                this.$store.commit('SET_HERO', heroJson)
+            } catch (err) {
+                console.error(err)
+            }
         },
         setIntersectionLoader(cb) {
             // KeepFetching is UNSET for certain post types and sort types in `loadMorePosts()`
-            if(!this.keepFetching) return console.warn('Cannot setup intersection handler keepFetching is set false')
-            
+            if (!this.keepFetching)
+                return console.warn(
+                    'Cannot setup intersection handler keepFetching is set false',
+                )
+
             // Always unset before setting the intersection loader
             this.unsetIntersectionLoader()
 
             // console.warn('Setting interesection loader...')
-            this.observer = new IntersectionObserver(entries => {
-                entries.forEach(entry => {
-                    if (!entry.isIntersecting || this.loadingFetched) return
-                    setTimeout(cb, TIMEOUT)
-                })
-            }, { threshold: 0.80 })
+            this.observer = new IntersectionObserver(
+                entries => {
+                    entries.forEach(entry => {
+                        if (!entry.isIntersecting || this.loadingFetched) return
+                        setTimeout(cb, TIMEOUT)
+                    })
+                },
+                { threshold: 0.8 },
+            )
             this.observer.observe(document.querySelector(INTERSECT_SELECTOR))
         },
         unsetIntersectionLoader() {
             const footerEl = document.querySelector(INTERSECT_SELECTOR)
             try {
-                if(!footerEl) throw `Cannot unset intersection handler missing el: ${footerEl}`
-                if(!this.observer) return 
+                if (!footerEl)
+                    throw `Cannot unset intersection handler missing el: ${footerEl}`
+                if (!this.observer) return
                 this.observer.unobserve(footerEl)
                 this.observer.disconnect()
-            } catch (error) { console.error(error) }
+            } catch (error) {
+                console.error(error)
+            }
         },
         initPostList() {
             this.page = 0
             this.keepFetching = true
 
-            if(this.isSearch) {
+            if (this.isSearch) {
                 this.checkAndSetHero(`search`)
                 this.$store.commit(`CLEAR_SEARCH_RESULTS`)
                 this.loadMoreSearchResults()
                 this.loadMorePosts(true)
                 this.setIntersectionLoader(this.loadMorePosts)
             }
-        }
-    },
-    beforeRouteUpdate(to, from) {
-        // !: Only fires between two searches
-        if(!to.query || to.query.s == from.query.s) return
-        console.log('between route search')
-        // Set the search term for impending callback fire
-        this.searchTerm = to.query.s
-        this.initPostList()
+        },
     },
     watch: {
+        // Fires no matter what
+        hasSearchTerm(newTerm, oldTerm) {
+            this.searchTerm = newTerm
+            if (newTerm && newTerm != oldTerm) {
+                this.initPostList()
+            }
+        },
+        hasSubtype(newSubtype, oldSubtype) {
+            if (newSubtype && newSubtype != oldSubtype) {
+                this.initPostList()
+            }
+            if (!newSubtype && oldSubtype) {
+                this.initPostList()
+            }
+        },
         // This only fires navigating from a list page, to another list page
         type(newType) {
-            if(!postTypes.includes(newType)) return console.warn('Type not valid...')
+            if (!postTypes.includes(newType))
+                return console.warn('Type not valid...')
 
             // Ignore some types with presorts so the sortBy watcher can handle them
-            const ignore = ['artist', 'event', 'exibition']
-            if(ignore.includes(newType)) return
+            const ignore = ['artist']
+            if (ignore.includes(newType)) {
+                return
+            }
+            // Reset the search term betweem loads
+            // so we initPostList() works correctly when
+            // navigating from search result to a type list page
+            this.searchTerm = this.$route.query.s
             this.initPostList()
         },
         // Fires when navigating between pages with different sorts
         sortBy(newSort) {
-            // console.log('sort changed :', newSort)
-            if(!Object.values(sortTypes).includes(newSort)) return
+            if (!Object.values(sortTypes).includes(newSort)) return
             this.initPostList()
         },
     },
     },
     beforeUnmount() {
         this.unsetIntersectionLoader()
-    }
+    },
 }
 </script>
 

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

 const heroUtils = {
     methods: {
         _setHeroInfo(post) {
-            let json = { url: post.featured, heroType:'image' }
+            let json = { url: post.featured, heroType: 'image' }
             if (
                 post.hero &&
                 JSON.parse(post.hero) &&
             }
            
             // post.type == 'page' && post.slug == 'thing' || post.type == 'page' && post.slug == 'otherthing'
-
             return json
         },
         _clearHero(store) {

vue-theme/src/pages/single.vue

         background-color: white
         padding: $ms-0
         h1
-            color: $cia_black
+            /* color: $cia_black */
             margin: 0 0 $ms--3 0
         > ul
             /* grid-gap: $ms-0 */
                 position: absolute
                 top: 100%
 
+        .wp-block-gallery
+            margin: 0 0 0.5em 0
+            grid-gap: $ms--5
+            
+            > .wp-block-image     
+                figcaption
+                    position: inherit
+                    background: none
+                    color: $cia_black
+
         /* iframe container 16:9 */
         [class^="iframe-container"]
             position: relative
             margin: $ms-2 auto
             &.is-style
                 &-default
-                    height: 1px
                     width: 15vw
                 &-wide
-                    height: 3px
                     width: 50vw
                 &-dots::before
                     outline-style: none

vue-theme/src/sss/_typography.sss

         font-family: $mono
 
 a
-    /* text-decoration: none,  leave for now to show links underlined */
+    text-decoration: none  // comment out to show underline
     &:hover
         cursor: pointer
 
-h1, h2, h3, h4, h5, h6 /* common */
+h1, h2, h3, h4, h5, h6 //common attributes
     /* font-weight: 400 */
     display: block
     margin-left: 0

vue-theme/src/sss/variables.sss

 $max-card-img-height: 420px
 $card-line-clamp: 3
 
-$ratio: $minor-third
-/* $ratio = 1.2 from _ratios.sss */
-
-$ms-0: calc($base)
-$ms--1: calc($ms-0 / $ratio)
-$ms--2: calc($ms--1 / $ratio)
-$ms--3: calc($ms--2 / $ratio)
-$ms--4: calc($ms--3 / $ratio)
-$ms--5: calc($ms--4 / $ratio)
-$ms--6: calc($ms--5 / $ratio)
-$ms--7: calc($ms--6 / $ratio)
-
-$ms-1: calc($ms-0 * $ratio)
-$ms-2: calc($ms-1 * $ratio)
-$ms-3: calc($ms-2 * $ratio)
-$ms-4: calc($ms-3 * $ratio)
-$ms-5: calc($ms-4 * $ratio)
-$ms-6: calc($ms-5 * $ratio)
-$ms-7: calc($ms-6 * $ratio)
-$ms-8: calc($ms-7 * $ratio)
-$ms-9: calc($ms-8 * $ratio)
+$ratio: $minor-third // $ratio = 1.2 from _ratios.sss
+
+$ms-0: calc($base) // 0.95em
+$ms--1: calc($ms-0 / $ratio) // 0.79
+$ms--2: calc($ms--1 / $ratio) // 0.66
+$ms--3: calc($ms--2 / $ratio) // 0.55
+$ms--4: calc($ms--3 / $ratio) // 0.45
+$ms--5: calc($ms--4 / $ratio) // 0.38
+$ms--6: calc($ms--5 / $ratio) // 0.31
+$ms--7: calc($ms--6 / $ratio) // 0.27
+
+$ms-1: calc($ms-0 * $ratio) // 1.14
+$ms-2: calc($ms-1 * $ratio) // 1.368
+$ms-3: calc($ms-2 * $ratio) // 1.6416
+$ms-4: calc($ms-3 * $ratio) // 1.9699
+$ms-5: calc($ms-4 * $ratio) // 2.3639
+$ms-6: calc($ms-5 * $ratio) // 2.8366
+$ms-7: calc($ms-6 * $ratio) // 3.4040
+$ms-8: calc($ms-7 * $ratio) // 4.0848
+$ms-9: calc($ms-8 * $ratio) // 4.9018
 
 /* Fonts */
 $sans: 'Questrial', sans-serif

vue-theme/src/store/index.js

             state.hero.playbutton = false
         } else {
             // console.warn('Setting hero', hero)
-            state.hero.text = hero.text
+            state.hero.text = hero.subtype ? hero.subtype : hero.text
             state.hero.url = hero.url
             state.hero.type = hero.heroType
 

vue-theme/src/utils/api.js

 
     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) {
+        query = `?type=${params.type}&limit=${params.limit}&p=${params.page}`
     } else if(params.limit && params.page && !params.s) {
         query = `?limit=${params.limit}&p=${params.page}`
     } else if(params.limit && !params.page) {
     getByType({ type, sort, params, cb }) {
         const query = constructQuery(params)
         if (sort && Object.values(sortTypes).includes(sort)) {
-            console.log('---')
+            console.log(params)
+            // console.log('---')
             return axios
                 .get(SETTINGS.API_BASE_PATH + `sort/${type}/${sort}${query}`)
                 .then(response => {

vue-theme/src/utils/helpers.js

     return type.charAt(0).toUpperCase() + type.slice(1)
 }
 
-const materials = [
-    'clay',
-    'fiber',
-    'glass',
-    'metal',
-    'paper',
-    'wood'
-]
+const materials = ['clay', 'fiber', 'glass', 'metal', 'paper', 'wood']
 
 const sortTypes = {
     alpha: 'by-alpha',
-    recent: 'by-recent',
     material: 'by-material',
     artist: 'by-artist',
     episode: 'by-episode',
     upcoming: 'by-upcoming',
     current: 'by-current',
     subtype: 'by-type',
+    date: 'by-date',
     currentAndUpcoming: 'by-current-and-upcoming',
     past: 'by-past',
 }
 
 const formatDate = (unix, includeTime) => {
     const d = new Date(parseInt(unix) * 1000)
-    return includeTime ? d.toLocaleString('en-US', { timeZone: 'UTC' }) : d.toLocaleDateString('en-US', { timeZone: 'UTC' })
+    return includeTime
+        ? d.toLocaleString('en-US', { timeZone: 'UTC' })
+        : d.toLocaleDateString('en-US', { timeZone: 'UTC' })
 }
 
 export {
     sortTypes,
     postTypes,
     ytThumbnail,
-    formatDate
+    formatDate,
 }