From ab2af7a548dd5cfdb89ca9dae142fa4470e236ea Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 24 Feb 2018 15:28:09 +0100
Subject: [PATCH] About page for instance based on instance descriptions

---
 front/src/App.vue              |  3 +++
 front/src/components/About.vue | 45 ++++++++++++++++++++++++++++++++++
 front/src/components/Home.vue  |  4 +++
 front/src/router/index.js      |  6 +++++
 front/src/store/instance.js    | 11 +++++++++
 5 files changed, 69 insertions(+)
 create mode 100644 front/src/components/About.vue

diff --git a/front/src/App.vue b/front/src/App.vue
index 98ad48d3f..8453aa339 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 000000000..01ce6a294
--- /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 dd324943f..0cea1c25a 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 c1d03e059..827afc218 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 ed7d653fc..a4dfcada6 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