185 lines
3.7 KiB
Vue
185 lines
3.7 KiB
Vue
<template>
|
|
<v-app>
|
|
|
|
<v-toolbar clipped-left app scroll-off-screen>
|
|
|
|
<v-toolbar-title class="align-center">
|
|
<span class="title"><router-link to="/">LBRY.tech</router-link></span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items class="hidden-sm-and-down">
|
|
<v-btn flat to="/overview.html">Overview</v-btn>
|
|
<v-btn flat to="/documentation.html">Documentation</v-btn>
|
|
<v-btn flat to="/contribute.html">How to Contribute</v-btn>
|
|
<v-btn flat to="/develop.html">How to Develop</v-btn>
|
|
<v-btn flat to="/resources/">Resources</v-btn>
|
|
</v-toolbar-items>
|
|
|
|
</v-toolbar>
|
|
|
|
<v-content>
|
|
|
|
<v-alert type="error" value="true" id="in-development-alert" class="pt-5 pb-5 ma-0">
|
|
<strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.</v-alert>
|
|
</v-alert>
|
|
|
|
<template v-if="$page.frontmatter.home">
|
|
|
|
<hook></hook>
|
|
|
|
<v-container fluid>
|
|
|
|
<v-layout row wrap>
|
|
|
|
<v-flex xs12 xl6 offset-xl3>
|
|
|
|
<Content custom></Content>
|
|
|
|
<edit-link :path="this.$page.path"></edit-link>
|
|
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
|
|
</v-container>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
<v-container>
|
|
|
|
<v-layout row wrap>
|
|
|
|
<v-flex xs12 xl6 offset-xl3>
|
|
|
|
<Sidebar v-if="$page.headers"></Sidebar>
|
|
|
|
<Content custom></Content>
|
|
|
|
<edit-link :path="this.$page.path"></edit-link>
|
|
|
|
</v-flex>
|
|
|
|
</v-layout>
|
|
|
|
</v-container>
|
|
|
|
</template>
|
|
|
|
</v-content>
|
|
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Vue from 'vue'
|
|
import Vuetify from 'vuetify'
|
|
import VueResource from 'vue-resource'
|
|
import VueHighlightJS from 'vue-highlightjs'
|
|
|
|
Vue.use(Vuetify, {
|
|
theme: {
|
|
primary: '#155b4a'
|
|
}
|
|
});
|
|
|
|
Vue.use(VueResource)
|
|
Vue.use(VueHighlightJS)
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
created () {
|
|
if (this.$ssrContext) {
|
|
this.$ssrContext.title = this.$title
|
|
this.$ssrContext.lang = this.$lang
|
|
this.$ssrContext.description = this.$page.description || this.$description
|
|
}
|
|
|
|
},
|
|
mounted () {
|
|
// update title / meta tags
|
|
this.currentMetaTags = []
|
|
const updateMeta = () => {
|
|
document.title = this.$title
|
|
document.documentElement.lang = this.$lang
|
|
const meta = [
|
|
{
|
|
name: 'description',
|
|
content: this.$description
|
|
},
|
|
...(this.$page.frontmatter.meta || [])
|
|
]
|
|
this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
|
|
}
|
|
this.$watch('$page', updateMeta)
|
|
updateMeta()
|
|
},
|
|
beforeDestroy () {
|
|
updateMetaTags(null, this.currentMetaTags)
|
|
}
|
|
}
|
|
|
|
function updateMetaTags (meta, current) {
|
|
if (current) {
|
|
current.forEach(c => {
|
|
document.head.removeChild(c)
|
|
})
|
|
}
|
|
if (meta) {
|
|
return meta.map(m => {
|
|
const tag = document.createElement('meta')
|
|
Object.keys(m).forEach(key => {
|
|
tag.setAttribute(key, m[key])
|
|
})
|
|
document.head.appendChild(tag)
|
|
return tag
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style src="../../node_modules/vuetify/dist/vuetify.min.css"></style>
|
|
|
|
<style lang="scss">
|
|
|
|
@import '../scss/fonts';
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
pre {
|
|
text-align: left;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.content.custom {
|
|
display: block;
|
|
}
|
|
|
|
.toolbar__title {
|
|
a {
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
#in-development-alert {
|
|
a {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
</style>
|