Skip to content

Instantly share code, notes, and snippets.

@weotch
Last active June 29, 2016 16:18
Show Gist options
  • Save weotch/ccdf05dde63373430461154112007a86 to your computer and use it in GitHub Desktop.
Save weotch/ccdf05dde63373430461154112007a86 to your computer and use it in GitHub Desktop.
<!--
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment