breadcrumbs.vue

<!--
Gloabal breadcrumbs componemt
-->

<template lang='jade'>

ol.layout-breadcrumbs

  //- The interactive links
  li(
    v-for='crumb in $root.crumbs'
    track-by='url')
    a(
      v-text='crumb.title'
      v-link='crumb.url')
    span.divider(v-if='$index != $root.crumbs.length - 1') /

  //- Structured data for google
  script(
    type='application/ld+json' 
    v-text='microdataString')

</template>

<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->

<script lang='coffee'>
module.exports =

  computed:

    # Massaged crumbs for microdata
    microdata: ->
      '@context': 'http://schema.org'
      '@type': 'BreadcrumbList'
      itemListElement: _.map @$root.crumbs, (crumb, i) ->
        '@type': 'ListItem'
        position: (i + 1)
        item:
          '@id': crumb.url
          name: crumb.title
          image: crumb.image
    
    microdataString: -> JSON.stringify @microdata


</script>

<!-- ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– -->

<style lang='stylus'>

.layout-breadcrumbs
  position absolute
  z-index header-z
  font 'sans medium', 12px
  text-transform uppercase
  white-space nowrap

  // Clear list styles.  Using a list because Google has it in
  // https://developers.google.com/search/docs/data-types/breadcrumbs
  list-style none
  padding 0
  li
    display inline

  // Shrink fonts after a point
  @media (max-width gutter-break)
    font-size 10px

  // Underline the links
  a:not(:last-child)
    display inline-block
    line-height 1em
    border-bottom 1px solid

  // Add divider symbols
  .divider
    display inline-block
    margin 0 rem(10px)

</style>