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

.drone.yml

@@ -5,7 +5,6 @@
 
 # push_deploy_key: id_rsa from DRONE host machine
 
-
 ################
 # Build & Test #
 ################
@@ -14,43 +13,43 @@ kind: pipeline
 name: run_tests
 
 steps:
-# Test the vue theme
-- name: test
-  image: node
-  commands:
-  - pwd
-  - cd ./vue-theme
-  - npm install
-  - npm test
-  volumes:
-  # Link node_modules cache from host filesystem into container at the expected location
-  - name: node_cache
-    path: /drone/src/vue-theme/node_modules
+    # Test the vue theme
+    - name: test
+      image: node
+      commands:
+          - pwd
+          - cd ./vue-theme
+          - npm install
+          - npm test
+      volumes:
+          # Link node_modules cache from host filesystem into container at the expected location
+          - name: node_cache
+            path: /drone/src/vue-theme/node_modules
 
-- name: build
-  image: node
-  commands:
-  - cd ./vue-theme
-  - rm -Rf ./build/*
-  - npx browserslist@latest --update-db
-  - npm run build
-  - ls ./build
-  environment:
-    NODE_OPTIONS: --openssl-legacy-provider
-  volumes:
-    # Link node_modules cache from host filesystem into container at the expected location
-    - name: node_cache
-      path: /drone/src/vue-theme/node_modules
     - name: build
-      path: /drone/src/vue-theme/build
+      image: node
+      commands:
+          - cd ./vue-theme
+          - rm -Rf ./build/*
+          - npx browserslist@latest --update-db
+          - npm run build
+          - ls ./build
+      environment:
+          NODE_OPTIONS: --openssl-legacy-provider
+      volumes:
+          # Link node_modules cache from host filesystem into container at the expected location
+          - name: node_cache
+            path: /drone/src/vue-theme/node_modules
+          - name: build
+            path: /drone/src/vue-theme/build
 
 volumes:
-  - name: node_cache
-    host:
-      path: /tmp/cache/drone/node_modules
-  - name: build
-    host:
-      path: /tmp/cache/drone/build
+    - name: node_cache
+      host:
+          path: /tmp/cache/drone/node_modules
+    - name: build
+      host:
+          path: /tmp/cache/drone/build
 ---
 ########################
 # Deploy to Production #
@@ -59,30 +58,32 @@ volumes:
 kind: pipeline
 name: deploy
 depends_on:
-  # Must run after the first pipeline
-  - run_tests
+    # Must run after the first pipeline
+    - run_tests
 trigger:
-  status:
-    # Only runs if the first pipeline was fully successful
-    - success
+    status:
+        # Only runs if the first pipeline was fully successful
+        - success
+    branch:
+        - master
 
 steps:
-# post-receive hook
-- name: push commit
-  image: appleboy/drone-git-push:0.2.0-linux-amd64
-  settings:
-    branch: master
-    remote: maeda@143.110.234.41:/opt/staging/vue-wp.git
-    remote_name: staging
-    force: true
-    ssh_key:
-      # !: id_rsa from DRONE machine
-      from_secret: push_deploy_key
+    # post-receive hook
+    - name: push commit
+      image: appleboy/drone-git-push:0.2.0-linux-amd64
+      settings:
+          branch: master
+          remote: maeda@143.110.234.41:/opt/staging/vue-wp.git
+          remote_name: staging
+          force: true
+          ssh_key:
+              # !: id_rsa from DRONE machine
+              from_secret: push_deploy_key
 
 volumes:
-  - name: node_cache
-    host:
-      path: /tmp/cache/drone/node_modules
-  - name: build
-    host:
-      path: /tmp/cache/drone/build
+    - name: node_cache
+      host:
+          path: /tmp/cache/drone/node_modules
+    - name: build
+      host:
+          path: /tmp/cache/drone/build

plugins/cia-endpoints/cia-end-points.php

@@ -17,6 +17,7 @@
 if ( ! defined( 'WPINC' ) ) { die; }
 
 require_once('includes/all-types.php');
+require_once('includes/class.make-oneofeach.php');
 require_once('includes/class.make-endpoint.php');
 require_once('includes/class.make-terms.php');
 require_once('includes/class.make-sticky.php');
@@ -53,6 +54,12 @@ add_action( 'rest_api_init', function () {
     $sticky_controller = new Make_Sticky_Endpoint();
     $sticky_controller->register_custom_route('sticky');
     
+    /**
+     * OneEach endpoint
+     */
+    $oneeach_controller = new Make_One_Each_Endpoint();
+    $oneeach_controller->register_custom_route('oneofeach');
+    
     /**
      * Terms endpoint
      */

plugins/cia-endpoints/includes/class.make-oneofeach.php

@@ -0,0 +1,63 @@
+<?php
+// include('formats.php');
+
+class Make_One_Each_Endpoint extends WP_REST_Controller {
+    /**
+     * Register the routes for the objects of the controller.
+     */
+    public function register_custom_route($route) {
+        $version = '2';
+        $namespace = 'craft/v' . $version;
+
+        register_rest_route( $namespace, '/' . $route, [
+            array(
+                'methods'  => WP_REST_Server::READABLE,
+                'callback' => array( $this, 'get_all_items' )
+            ),
+        ]);
+    }
+    public function get_all_items( $request ) {
+        $args = array(
+            'numberposts' => 1,
+        );
+
+        return new WP_REST_Response( $this->prepare_all_items_for_response($args), 200 );
+    }
+    public function prepare_all_items_for_response( $args ) {
+        $collection = array();
+        $types = [
+            'artist',
+            'episode',
+            'event',
+            'exhibition',
+            'guide',
+            'object',
+            'publication',
+            'technique',
+            'short',
+            'post',
+        ];
+
+        $q = [];
+        foreach($types as $post_type) {
+            array_push($q, new WP_Query(array(
+                'numberposts' => 1,
+                'post_type' => $post_type,
+                'post_status' => ['publish'],
+            )));
+            array_push($q, $post_type);
+            
+            $found_post = $q[0]->get_posts();
+
+            $formatted = default_post_format( $found_post, false );
+            $formatted['tried'] = $q[1];
+            array_push($collection, $formatted);
+        }
+        wp_reset_postdata();
+
+        return $collection;
+        // return $types;
+    }
+}
+
+?>

plugins/cia-endpoints/includes/reformat-blocks.php

@@ -3,13 +3,13 @@
         $parsed_blocks = array();
         foreach ($blocks as $block) {
             if($block[blockName] === "core/gallery") {
+                // Fix for new style gallery blocks
                 if(count($block[attrs][ids]) < 1) {
                     $gallery_imgs_ids = [];
                     foreach($block[innerBlocks] as $inner) {
                         $inner_id = $inner[attrs][id];
                         array_push($gallery_imgs_ids, $inner_id);
                     }
-                    $block[attrs]['zzz'] = $gallery_imgs_ids;
                     $block[attrs][ids] = $gallery_imgs_ids;
                 } 
                 array_push($parsed_blocks, $block[attrs]);
@@ -34,11 +34,16 @@
 
         foreach ($images as $image) {
             if($image->getAttribute('data-id')) {
-                $parse_images[$image->getAttribute('data-id')] = $image->getAttribute('src');
+                $id = $image->getAttribute('data-id');
             } else {
                 $class_pieces = explode("-", $image->getAttribute('class'));
-                $parse_images[end($class_pieces)] = $image->getAttribute('src');
+                $id = end($class_pieces);
             }
+            // Format for lightbox wants an object
+            $parse_images[$id] = [
+                'src' => $image->getAttribute('src'),
+                'title' => $image->getAttribute('alt'),
+            ];
         }
         return $parse_images;
     }

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

@@ -20,15 +20,16 @@ function register_connections_for($type, $from_types) {
 }
 
 function register_all_one_offs() {
-    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('post', ['post', 'publication']);
+    register_connections_for('artist', ['artist', 'object', 'technique', 'post', 'publication']);
+    register_connections_for('exhibition', ['exhibition','technique', 'post', 'publication']);
+    register_connections_for('event', ['event', 'object', 'guide', 'technique', 'post', 'publication']);
+    register_connections_for('episode', ['episode', 'object', 'guide', 'technique', 'post', 'publication']);
+    register_connections_for('short', ['short', 'exhibition', 'event', 'object', 'guide', 'technique', 'post', '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']);
+    register_connections_for('object', ['object', 'exhibition', 'guide', 'technique', 'post', 'publication']);
+    register_connections_for('publication', ['publication']);
 }
 
 function all_connection_types() {

vue-theme/editor-style.css

@@ -125,5 +125,10 @@ hr .wp-block-separator, .is-style-dots:before {
     position: inherit !important;
     background: none !important;
     color: black !important;
+    max-height: 5% !important;
+    overflow: visible !important;
+    padding: 0 !important;
+    margin-bottom: 0.75em !important;
+
 }
 

vue-theme/functions.php

@@ -387,3 +387,20 @@ function custom_publication_column( $column, $post_id ) {
             break;
     }
 }
+// Add Author to Custom Post Type
+function add_author_support_to_posts() {
+    $args = array(
+       'public'   => true,
+       '_builtin' => false
+    );
+
+    $output = 'names';
+
+    $post_types = get_post_types( $args, $output ); 
+
+    foreach ( $post_types  as $post_type ) {
+        add_post_type_support( $post_type, 'author' );
+    }
+
+}
+add_action( 'init', 'add_author_support_to_posts' );

vue-theme/index.php

@@ -1,10 +1,20 @@
 <!DOCTYPE html>
 <html <?php language_attributes(); ?>>
     <head>
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=AW-10996061145"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'AW-10996061145');
+        </script>
         <title><?php wp_title(); ?></title>
         <meta charset="<?php bloginfo( 'charset' ); ?>">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="prefetch" url="resource-url" />
+
         <?php wp_head(); ?>
     </head>
     <body>

vue-theme/src/app.vue

@@ -36,7 +36,7 @@ html
             /* background-color: green*/
             background-color: $cia_white2
             width: 100%
-            padding: 0 0 3vh 0
+            padding: 0 0 1vh 0
             
             /* :--headings, a */
             a

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

@@ -19,7 +19,8 @@ nav.main.w-max
 
             //- hardcoded menu
             li.f-grow
-            li.t-up PBS Series 
+            li.t-up
+                router-link(to="/episode") PBS Series
                 ul.submenu 
                     li
                         router-link(to="/episode") Episodes
@@ -28,23 +29,26 @@ nav.main.w-max
                     li
                         router-link(to="/technique") Techniques
             li.f-grow
-            li.t-up Artists
+            li.t-up
+                router-link(to="/artist/sorted/by-material") Artists
                 ul.submenu
                     li
                         router-link(to="/artist/sorted/by-alpha") A - Z
                     li
                         router-link(to="/artist/sorted/by-material") By Material
             li.f-grow
-            li.t-up Exhibitions
+            li.t-up 
+                router-link(to="/exhibition/sorted/by-current-and-upcoming") Exhibitions
                 ul.submenu 
                     li
                         router-link(to="/exhibition/sorted/by-current-and-upcoming") Current/Upcoming
                     li
-                        router-link(to="/exhibition/sorted/by-date") Past
+                        router-link(to="/exhibition/sorted/by-past") Past
                     li
                         router-link(to="/object") Explore Craft Objects
             li.f-grow
-            li.t-up Center 
+            li.t-up  
+                router-link(to="/page/center") Center
                 ul.submenu 
                     li
                         router-link(to="/page/center") Info
@@ -55,7 +59,8 @@ nav.main.w-max
                     li
                         router-link(to="/page/library") Library
             li.f-grow
-            li.t-up Education  
+            li.t-up   
+                router-link(to="/guide") Education
                 ul.submenu 
                     li
                         router-link(to="/guide") Education Guides
@@ -71,7 +76,8 @@ nav.main.w-max
                         router-link(to="/page/library") Library
                     
             li.f-grow
-            li.t-up Resources   
+            li.t-up    
+                router-link(to="/page/artists-resources") Resources
                 ul.submenu 
                     li
                         router-link(to="/page/artists-resources") Opportunities
@@ -82,14 +88,16 @@ nav.main.w-max
                     li
                         router-link(to="/page/community-craft-calendar") Community Craft Calendar 
             li.f-grow
-            li.t-up Support   
+            li.t-up    
+                router-link(to="/page/donate") Support
                 ul.submenu 
                     li
                         router-link(to="/page/donate") Donate
                     li
                         router-link(to="/page/shop") Shop 
             li.f-grow
-            li.t-up About    
+            li.t-up    
+                router-link(to="/page/about") About 
                 ul.submenu 
                     li
                         router-link(to="/page/about") Craft in America 
@@ -103,11 +111,11 @@ nav.main.w-max
                         router-link(to="/page/contact") Contact 
             li.f-grow
             li.t-up 
-                a(@click="toggleSearch") search
+                a(@click="toggleSearch") 🔍 
         ul(v-if="isSearchOpen").search.w-max
             li.f-row.w-max
                 input(v-model="searchTerms" @keyup.enter="sendSearch" tabindex="10")
-                button.b-none.bg-none(@click="sendSearch" tabindex="11") 🔍
+                button.b-none.bg-none(@click="sendSearch" tabindex="11") 🔍 search
 
     .mobile-menu
         .f-row.start
@@ -164,7 +172,7 @@ export default {
                 // 'education',
                 // 'resources',
                 // 'support',
-                // 'about',
+                'page/about',
                 '🔍'
             ]
             const ignore = [
@@ -261,6 +269,7 @@ nav.main
                 background-color: $lighter
                 padding: 0 0.5em 0.5em
                 opacity: 0
+                top: 23px
 
                 //- submenu hover
                 &:hover 

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

@@ -6,17 +6,30 @@ aside.sidebar
             h3.t-up sort {{ type }}
             ul.t-up
                 li 
-                    //- ?type=articles //
+                    //- post?type=articles //
                     router-link(v-if="type === 'post' " :to="`/${type}?type=articles`")
                         p in the news
                 li 
-                    //- ?type=releases //
+                    //- post?type=releases //
                     router-link(v-if="type === 'post' " :to="`/${type}?type=releases`")
                         p press releases 
                 li 
-                    //- ?type=talks //
+                    //- event?type=concerts //
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=concerts`")
+                        p concerts 
+                li 
+                    //- event?type=openings //
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=openings`")
+                        p openings 
+                li 
+                    //- event?type=talks //
                     router-link(v-if="type === 'event' " :to="`/${type}?type=talks`")
                         p talks 
+                li 
+                    //- event?type=workshops //
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=workshops`")
+                        p workshops 
+
                     //- by type //
                 li(v-for="option in sortOptions")
                     router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
@@ -24,9 +37,10 @@ aside.sidebar
                 li
                     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
+                //- li
+                //-     router-link(v-if="type === ('event', 'exhibition') " :to="`/${type}/sorted/by-past`")
+                //-         p by past 
+
         
         //- if {{type}} has sorted by-material show material options
         .shadow(v-if="shouldShowMaterialSort.includes(type) && layout !== 'single'")
@@ -46,6 +60,15 @@ aside.sidebar
                         router-link(:to="`/${type}/sorted/by-alpha#${charaSet[0]}`")
                             p.alpha {{ charaSet }}
 
+        //- if type has sorted by-episode show episode options           
+        .shadow(v-if="shouldShowEpisodeSort.includes(type) && layout !== 'single'")
+            h3.t-up {{ type }} episode  
+            ul.t-up
+                li.f-row.start.wrap
+                    template(v-for="episodeSet in episodeSets") 
+                        router-link(:to="`/${type}/sorted/by-episode#${episodeSet}`")
+                            p {{ episodeSet }}  
+
         //- p2p types and related posts
         .shadow(v-if="layout === 'single' && Object.keys(related).length" v-for="p2pPostType in Object.keys(related)")
             related-sidebar(:posts-by-type="related" :post-type="p2pPostType")
@@ -103,16 +126,20 @@ export default {
                 'by artist': `${sortTypes.artist}`,     //:2
                 'by episode': `${sortTypes.episode}`,   //:3
                 'by type': `${sortTypes.subtype}`,      //:4
-                // 'by articles': `articles`,              //:5
+                'by past': `${sortTypes.past}`,         //:5
+                // 'by articles': `articles`,           
                 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'
                 '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'
             ],
+            episodeSets: [
+                'inspiration', 'home', 'jewelery', 'harmony', 'storytellers', 
+                'democracy', 'identity', 'quilts', 'visionaries', 'california', 
+                'neighbors', 'borders', 'nature', 'teachers', 'music', 
+                'celebration', 'service', 'industry', 'holiday', 'forge',
+            ],
             materials: materials,
             shouldShowListSort: [
                 'artist', 'exhibition', 'event', 
@@ -120,9 +147,14 @@ export default {
                 'publication', 'technique', 'post'
             ],
             shouldShowMaterialSort: [
-                'artist', 'exhibition', 'event',
-                'short', 'guide', 'object',
-                'technique',
+                'artist',
+                'short', 'guide',
+                'technique', 'publication',
+            ],
+            shouldShowEpisodeSort: [
+                'artist',
+                'short', 'guide',
+                'technique'
             ],
             shouldShowAlphaSort: [
                 'artist'
@@ -153,12 +185,14 @@ export default {
                     opts = [
                         // Object.keys(this.sortTypes)[4],
                         // Object.keys(this.sortTypes)[1],
+                        Object.keys(this.sortTypes)[5],
                     ]
                     break
                 case 'event':
                     opts = [
                         // Object.keys(this.sortTypes)[4],
                         // Object.keys(this.sortTypes)[1],
+                        Object.keys(this.sortTypes)[5],
                     ]
                     break
                 case 'post':
@@ -213,6 +247,7 @@ aside.sidebar
     position: sticky
     top: 40px
     width: 100%
+    font-size: x-small
     p, h3
         margin: 0
         padding: 0 0 $ms--4 0
@@ -247,6 +282,7 @@ aside.sidebar
         position: sticky
         min-width: 25%
         width: 25%
+        font-size: revert
         > section 
             > * 
                 display: inherit 

vue-theme/src/pages/index.vue

@@ -59,33 +59,42 @@ export default {
             // Limit the amount of posts because we
             // only need the most recent
             const params = { limit: 1 }
-            
+
             // We try and fetch EVERYTHING except
             // for EVENTS and EXHIBITIONS
             if (['event', 'exhibition'].includes(type)) {
                 // Only grab the current or upcoming on load
-                const eventsOrExhibitions = await this.$store.dispatch(
-                    action,
-                    { 
-                        sortType: sortTypes.currentAndUpcoming,
-                        params
-                    }
-                )
+                const eventsOrExhibitions = await this.$store.dispatch(action, {
+                    sortType: sortTypes.currentAndUpcoming,
+                    params,
+                })
                 // If no current or upcoming, get past events
                 // to fill in the blanks
                 if (eventsOrExhibitions.length < 1) {
-                    this.$store.dispatch(action, { sortType: sortTypes.past, params })
+                    this.$store.dispatch(action, {
+                        sortType: sortTypes.past,
+                        params,
+                    })
                 }
-            }
-            else if (!omit.includes(type)){
+            } else if (!omit.includes(type)) {
                 this.$store.dispatch(action, { sortType: null, params })
             }
         }
         if (!this['allPagesLoaded']) {
-            await this.$store.dispatch('getAllPages', { sortType: null, params: null })
+            await this.$store.dispatch('getAllPages', {
+                sortType: null,
+                params: null,
+            })
         }
         await this.checkAndSetHero('welcome')
-        await this.$store.dispatch('getRandomPosts', ['artist', 'guide', 'object', 'technique', 'publication', 'post'])
+        await this.$store.dispatch('getRandomPosts', [
+            'artist',
+            'guide',
+            'object',
+            'technique',
+            'publication',
+            'post',
+        ])
     },
     methods: {
         firstPostOfType(type) {
@@ -97,11 +106,9 @@ export default {
             // We always set a hero no matter what
             // Because the hero component will deal
             // with how to render based on hero.url
-            if(!this.allPages) return console.warn('no pages in state', this)
-            const page = this.allPages.filter(
-                page => page.slug == type,
-            )[0]
-            if(!page) return console.warn(`no page for ${type} found`)
+            if (!this.allPages) return console.warn('no pages in state', this)
+            const page = this.allPages.filter(page => page.slug == type)[0]
+            if (!page) return console.warn(`no page for ${type} found`)
 
             this.$store.commit('SET_HERO', this._setHeroInfo(page))
         },
@@ -131,12 +138,31 @@ export default {
                         max-height: $max-card-img-height
                     p.excerpt
                         -webkit-line-clamp: $card-line-clamp
+                &.flipped
+                    li 
+                        &:nth-of-type(4)
+                            /* p.excerpt, p.read-more
+                                display: none */
+                            header
+                                padding: 0.57em 0 
+                                a
+                                    display: none
             &.max 
                 > ul
                     grid-template-columns: 
                         auto
                     grid-template-rows: 
                         auto
+            &.stickies
+                ul
+                    &.flipped
+                        li
+                            &:nth-of-type(4)
+                                header
+                                    padding: 0 
+                                    a
+                                        display: block
+                
 /* min-width 768px */
 @media (min-width: $medium)
     .page--index 
@@ -146,7 +172,7 @@ export default {
                 ul
                     display: grid
                     grid-template-columns: 
-                        49.5% 24.25% 24.25%
+                        49.5% 24.35% 24.35%
                     grid-template-rows: repeat(2, 1fr)
                     gap: 0 $ms--2
                     li
@@ -178,7 +204,7 @@ export default {
                             grid-column-start: 3
                     &.flipped
                         grid-template-columns: 
-                            24.25% 24.25% 49.5% 
+                            24.35% 24.35% 49.5% 
                         li
                             &:nth-of-type(1)
                                 grid-row-end: 2
@@ -193,11 +219,12 @@ export default {
                         max-height: $max-card-img-height
                 &.stickies
                     .post 
-                        min-width: 24.25%
+                        min-width: 24.35%
+                        max-width: 33%
                     ul
                         &.flipped
                             grid-template-columns: 
-                                24.25% 24.25% 49.5% 
+                                24.35% 24.35% 49.5% 
                             li
                                 &:nth-of-type(1)
                                     grid-row-end: 2
@@ -207,6 +234,11 @@ export default {
                                 &:nth-of-type(5)
                                     grid-row-start: 1
                                     grid-row-end: 3
+                                &:nth-of-type(4)
+                                    header
+                                        padding: 0 
+                                        a
+                                            display: block
                         &[class^="sticky-"]
                             display: flex
                         &.sticky-1
@@ -216,7 +248,7 @@ export default {
                                     width: 100%
                         &.sticky-5
                             grid-template-columns: 
-                                24.25% 24.25% 49.5%
+                                24.35% 24.35% 49.5%
                             grid-template-rows: 
                                 repeat(2, 1fr)
                             gap: 3% 1%

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

@@ -73,6 +73,7 @@ const heroUtils = {
                 post.type == 'page' && post.slug == 'staff' || 
                 post.type == 'page' && post.slug == 'board' || 
                 post.type == 'page' && post.slug == 'donate' || 
+                post.type == 'page' && post.slug == 'shop' || 
                 post.type == 'page' && post.slug == 'library' || 
                 post.type == 'page' && post.slug == 'artists-resources' || 
                 post.type == 'page' && post.slug == 'craft-resources-map' || 

vue-theme/src/pages/single.vue

@@ -202,7 +202,6 @@ export default {
             }
         },
         async singlePost(post) {
-            console.log('---')
             if (!this.$el) return
             const section = this.$el.children[0].querySelector('section')
             await nextTick()
@@ -215,18 +214,11 @@ export default {
                         const activeGallery =
                             post.galleries[this.activeGalleryIndex]
 
-                        console.log(post.galleries)
-                        console.log(activeGallery)
-
                         if (!activeGallery.ids) return
 
                         this.activeImageIndex = activeGallery.ids.indexOf(
                             parseInt(e.target.dataset.id),
                         )
-                        console.log(
-                            `opening gallery: ${this.activeGalleryIndex}.${this.activeImageIndex}`,
-                        )
-                        console.log(e.target.dataset)
                     })
                 })
             })
@@ -263,7 +255,7 @@ export default {
             position: relative
             width: 100% 
             padding-bottom: 56.25%
-            margin-bottom: 7em
+            margin-bottom: $ms-7
             &__wrapper
                 display: contents
             /* TBD if kept- edit ot test */
@@ -274,12 +266,18 @@ export default {
         .wp-block-gallery
             margin: 0 0 0.5em 0
             grid-gap: $ms--5
-            
-            > .wp-block-image     
+            > .wp-block-image  
                 figcaption
                     position: inherit
                     background: none
+                    font-size: $ms--1
                     color: $cia_black
+                    max-height: 9%
+                    overflow: visible 
+                    padding: 0 
+                    margin-bottom: 2.5em
+            figcaption
+                flex-direction: column
 
         /* iframe container 16:9 */
         [class^="iframe-container"]
@@ -339,6 +337,9 @@ export default {
             margin: 0 0.65em 0 0
         &.f-col
             flex-direction: row
-            .wp-block-embed, .is-type-video
-                margin-bottom: $ms-9
+            .wp-block-gallery
+                .wp-block-image  
+                    figcaption
+                        max-height: 5%
+                        margin-bottom: $ms-4            
 </style>

vue-theme/src/sss/_lightbox.sss

@@ -1,8 +1,11 @@
+@import './variables.sss'
+@import './theme.sss'
+
 .vel-fade
     &-enter-active, &-active
         transition: all 0.3s ease
     &-enter-from, &-leave-to
-        opacity: 0
+        opacity: 1
 
 .vel-img
     &-swiper
@@ -14,10 +17,10 @@
         position: absolute
         top: 50%
         transform: translate(-50% -50%)
-        transition: 0.3s linear
-        will-change: transform opacity
-    background-color: rgba(0, 0, 0, 0.7)
-    box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.7)
+        /* transition: 0.3s linear */
+        /* will-change: transform opacity */
+    /* background-color: rgba(0, 0, 0, 0.7) */
+    box-shadow: 0.5px 0.5px 0.5px 0px rgb(0 0 0 / 30%)
     display: block
     max-height: 80vh
     max-width: 80vw
@@ -25,7 +28,7 @@
     transition: transform 0.3s ease-in-out
 
 .vel-modal
-    background: rgba(0, 0, 0, 0.5)
+    background: rgba(255, 255, 255, 0.9)
     bottom: 0
     left: 0
     margin: 0
@@ -33,13 +36,17 @@
     right: 0
     top: 0
     z-index: 10003
+    img
+        transition: none
+        &:hover
+            filter: grayscale(0%) brightness(100%)
 
 .vel-img, .vel-img-wrapper
     user-select: none
 
 .vel-btns-wrapper
     .btn__close, .btn__next, .btn__prev
-        color: #fff
+        color: $cia_black 
         cursor: pointer
         font-size: 32px
         opacity: 0.6
@@ -94,6 +101,7 @@
 
 .vel-modal.is-rtl .vel-img-title
     direction: rtl
+    display: block
 
 .vel-loading
     left: 50%
@@ -166,6 +174,7 @@
     width: 1em
 
 .vel-toolbar
+    display: none
     border-radius: 4px
     bottom: 8px
     display: flex
@@ -176,6 +185,7 @@
     position: absolute
     transform: translate(-50%)
     .toolbar-btn
+        display: none
         color: #fff
         cursor: pointer
         flex-shrink: 0
@@ -188,3 +198,8 @@
 .vel-toolbar, .vel-toolbar .toolbar-btn
     background-color: #2d2d2d
     user-select: none
+
+figcaption
+    position: inherit
+    background: none
+    color: $cia_black

vue-theme/src/sss/variables.sss

@@ -1,6 +1,6 @@
 @import './_ratios.sss'
 
-$transition: 500ms
+$transition: 300ms
 
 $min-width: 20em
 $max-width: 74em

vue-theme/src/utils/api.js

@@ -71,6 +71,17 @@ export default {
                 cb(e)
             })
     },
+    async getOneOfEach(types, cb, random = false) {
+        let posts = []
+        let get = `oneofeach?types=${types.split(',')}`
+        if (random) {
+            get = get + '&orderby=rand'
+        }
+        await axios.get(SETTINGS.API_BASE_PATH + get).then(response => {
+            posts = [...response.data]
+        })
+        cb(posts)
+    },
     async getRandom(types, cb) {
         let randomPosts = []
         for (let type of types) {

vue-theme/src/utils/helpers.js

@@ -75,7 +75,7 @@ const ytThumbnail = (url, desiredSize) => {
 const formatDate = (unix, includeTime) => {
     const d = new Date(parseInt(unix) * 1000)
     return includeTime
-        ? d.toLocaleString('en-US', { timeZone: 'UTC' })
+        ? d.toLocaleString('en-US', { timeZone: 'UTC', dateStyle: 'short', timeStyle: 'short' })
         : d.toLocaleDateString('en-US', { timeZone: 'UTC' })
 }