diff --git a/front/src/App.vue b/front/src/App.vue index 98ad48d3ff41cd37cfa4df496c51c24f8dbd0544..8453aa33941813d6c451fa2184d05e7f9c669486 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -9,6 +9,9 @@ <div class="three wide column"> <h4 class="ui header">Links</h4> <div class="ui link list"> + <router-link class="item" to="/about"> + About this instance + </router-link> <a href="https://funkwhale.audio" class="item" target="_blank">Official website</a> <a href="https://docs.funkwhale.audio" class="item" target="_blank">Documentation</a> <a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank">Source code</a> diff --git a/front/src/components/About.vue b/front/src/components/About.vue new file mode 100644 index 0000000000000000000000000000000000000000..01ce6a294fdeb632d03e8eb23a4a4bbf83766223 --- /dev/null +++ b/front/src/components/About.vue @@ -0,0 +1,45 @@ +<template> + <div class="main pusher"> + <div class="ui vertical center aligned stripe segment"> + <div class="ui text container"> + <h1 class="ui huge header"> + <template v-if="instance.name.value">About {{ instance.name.value }}</template> + <template v-else="instance.name.value">About this instance</template> + </h1> + </div> + </div> + <div class="ui vertical stripe segment"> + <p v-if="!instance.short_description.value && !instance.long_description.value"> + Unfortunately, owners of this instance did not yet take the time to complete this page.</p> + <div + v-if="instance.short_description.value" + class="ui middle aligned stackable text container"> + <p>{{ instance.short_description.value }}</p> + </div> + <div + v-if="instance.long_description.value" + class="ui middle aligned stackable text container" + v-html="$options.filters.markdown(instance.long_description.value)"> + </div> + </div> + </div> +</template> + +<script> +import {mapState} from 'vuex' + +export default { + created () { + this.$store.dispatch('instance/fetchSettings') + }, + computed: { + ...mapState({ + instance: state => state.instance.settings.instance + }) + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> +</style> diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue index dd324943feccf17c8e0a1e9a570c836b984cde7a..0cea1c25ab4361d019d6df6be7c4cdad4b1c43a5 100644 --- a/front/src/components/Home.vue +++ b/front/src/components/Home.vue @@ -6,6 +6,10 @@ Welcome on funkwhale </h1> <p>We think listening music should be simple.</p> + <router-link class="ui icon button" to="/about"> + <i class="info icon"></i> + Learn more about this instance + </router-link> <router-link class="ui icon teal button" to="/library"> Get me to the library <i class="right arrow icon"></i> diff --git a/front/src/router/index.js b/front/src/router/index.js index c1d03e059442ff98731bb903159d532b62ef4286..827afc21823687dc266a69c601435015757a9045 100644 --- a/front/src/router/index.js +++ b/front/src/router/index.js @@ -1,6 +1,7 @@ import Vue from 'vue' import Router from 'vue-router' import PageNotFound from '@/components/PageNotFound' +import About from '@/components/About' import Home from '@/components/Home' import Login from '@/components/auth/Login' import Signup from '@/components/auth/Signup' @@ -33,6 +34,11 @@ export default new Router({ name: 'index', component: Home }, + { + path: '/about', + name: 'about', + component: About + }, { path: '/login', name: 'login', diff --git a/front/src/store/instance.js b/front/src/store/instance.js index ed7d653fcc3c3a80eb67c242e9e334dad2073da3..a4dfcada65028f27a7fd4c61741b1f14d43d6dcd 100644 --- a/front/src/store/instance.js +++ b/front/src/store/instance.js @@ -6,6 +6,17 @@ export default { namespaced: true, state: { settings: { + instance: { + name: { + value: '' + }, + short_description: { + value: '' + }, + long_description: { + value: '' + } + }, users: { registration_enabled: { value: true