:sparkles: moved breadcumb to its own component

vue-theme/src/components/breadcrumb.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+//- breadcrumb links at top of page, needs link routing
+.breadcrumb.f-row.start.t-up
+    router-link(v-if="['events','exhibitions'].includes(type)" :to="`/${type}/by-current-and-upcoming`")
+        h5.t-up {{ type }}
+    router-link(v-else :to="`/${type}`")
+        h5.t-up {{ type }}
+    h5 &#62;
+    router-link(:to="`/${type}/${post.slug}`")
+        h5 {{ post.title }}
+</template>
+
+<script>
+export default {
+    props: {
+        type: { type: String },
+        post: { type: Object }
+    }
+}
+</script>
+
+<style lang="postcss">
+@import '../sss/variables.sss'
+@import '../sss/theme.sss'
+.breadcrumb
+    h5
+        font-size: $ms--1
+</style>

vue-theme/src/pages/single.vue

@@ -8,17 +8,8 @@
     article(v-else).w-max.f-grow.shadow
         header
             //- breadcrumb links at top of page, needs link routing
-            breadcrumb.f-row.start.t-up
-                router-link(v-if="['events','exhibitions'].includes(type)" :to="`/${type}/by-current-and-upcoming`")
-                    h5.t-up {{ type }}
-                router-link(v-else :to="`/${type}`")
-                    h5.t-up {{ type }}
-                //- h5 •
-                h5 >
-                router-link(:to="`/${type}/${post.slug}`")
-                    h5 {{ post.title }}
+            breadcrumb(:type="type" :post="post")
             
-            //- h1 {{ type }}:{{ $route.params.slug }} {{ post.title }}
             h1.t-b  {{ post.title }}
             //- p(v-if="post.categories") categories: {{ post.categories }}
             //- p(v-if="post.type") type: {{ post.type }}
@@ -52,13 +43,14 @@ import card from '@/components/card.vue'
 import sidebar from '@/components/sidebars/sidebar'
 import gallery from '@/components/gallery/'
 import credits from '@/components/credits'
+import breadcrumb from '@/components/breadcrumb'
 
 import { postTypeGetters, scrollTop } from './mixin-post-types'
 
 import { convertTitleCase, dePluralize, typeFromRoute } from '@/utils/helpers'
  
 export default {
-    components: { sidebar, gallery, credits, card },
+    components: { sidebar, gallery, credits, card, breadcrumb },
     props: {
         sidebar: { type: Boolean },
         id: { type: Number }
@@ -150,9 +142,9 @@ export default {
          * @param {object} posts
          */
         checkAndSetHero(post) {
-            // console.log(post)
             if(!post) return
-            let json = { url: post.featured, heroType: 'image' }
+
+            const json = { url: post.featured, heroType: 'image' }
             if(post.hero && JSON.parse(post.hero) && JSON.parse(post.hero).url) {
                 json = JSON.parse(post.hero)
                 json.heroType = 'video'
@@ -161,6 +153,9 @@ export default {
             if(!json.url) {
                 json.heroType = null
             }
+            // Set the hero text to the post title
+            json.text = post.title
+            
             this.$store.commit('SET_HERO', json)
         },