docs/components/EditLink.vue
<template>
<div v-if="path" class="edit-link mb-4 pt-4">
<fa :icon="faGithub" />
Want to help?
<repository-link :path="path">
Edit this page on GitHub!
</repository-link>
</div>
</template>
<script>
import get from 'lodash/get'
import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
export default {
props: {
route: {
type: Object,
default: null
}
},
data () {
return {
faGithub
}
},
computed: {
path () {
return get(this.route || this.$route, 'meta.resourcePath')
}
}
}
</script>
<style lang="scss">
@import '../styles/variables.scss';
.edit-link {
max-width: $app-main-max-width;
padding: 0 $spacer;
margin: auto;
opacity: 0.5;
border-top: 1px solid $card-border-color;
&:hover {
opacity: 1;
}
}
</style>