Added about page

src/App.vue

@@ -30,4 +30,7 @@
 main {
   padding: 1em 0;
 }
+.text.container {
+  max-width: 800px;
+}
 </style>

src/sources/mastodon.js

@@ -40,6 +40,7 @@ export async function createApp(ax, {baseUrl}) {
 export default {
   id: "mastodon",
   label: "Mastodon",
+  url: "https://joinmastodon.org",
   description: "Mastodon and compatible servers",
   extendedDescription: "Receive suggestions based on your favorites, follows and boosts",
   imageBackground: "blue-grey darken-4",

src/views/About.vue

 <template>
-  <div class="about">
+  <section class="flow-text text container">
     <h1>About Retribute</h1>
-    <p>Todo</p>
-  </div>
+    <p>
+      Retribute is a web application designed to make the job of supporting the creators you like easier.
+    </p>
+
+    <h3>How does it work?</h3>
+    <p>
+      By <router-link to="/connect">connecting your existing accounts</router-link> on other platforms to Retribute, you will receive suggestions
+      of creators you may want to support, as well as the donation services where you can support them.
+    </p>
+    <p>
+      Those suggestions based on your interactions with their content, and your interactions only.
+      We don't use the creator general popularity or other aggregated data to perform the ranking.
+    </p>
+
+    <h3>What donations services are supported?</h3>
+    <p>
+      We will successfully retrieve links and informations for the following services:
+    </p>
+    <ul v-if="providers" class="browser-default">
+      <li v-for="provider in providers" :key="provider.id">
+        <a :href="provider.url" target="_blank" rel="noopener">{{ provider.label }}</a>
+      </li>
+    </ul>
+    <p>If you would like to add a service to this list, <a href="#contact">please let us know!</a></p>
+
+    <h3>What content platforms are supported?</h3>
+    <p>
+      You can connect your accounts on the following platforms to Retribute:
+    </p>
+    <ul v-if="sources" class="browser-default">
+      <li v-for="source in sources" :key="source.id">
+        <a :href="source.url" target="_blank" rel="noopener">{{ source.label }}</a>
+      </li>
+    </ul>
+    <p>If you would like to add a service to this list, <a href="#contact">please let us know!</a></p>
+
+    <h3>What data do you store?</h3>
+    <p>All the private/sensitive data is processed and stored whithin your web browser local storage only, especially:</p>
+    <ul class="browser-default">
+      <li>Application credentials</li>
+      <li>Suggestions</li>
+      <li>Data retrieved from connected accounts</li>
+    </ul>
+    <p>To retrieve donation information for creators, we query a separate service. This service doesn't keep any personal data, and only store webserver logs for a few weeks.</p>
+
+    <h3>Useful links</h3>
+    <ul class="browser-default">
+      <li>
+        <a href="https://dev.funkwhale.audio/retribute.me/webclient/issues" target="_blank" rel="noopener">Issue tracker</a>
+      </li>
+      <li>
+        <a href="https://dev.funkwhale.audio/retribute.me" target="_blank" rel="noopener">Source code</a>
+      </li>
+    </ul>
+
+    <h3 id="contact">Contact information</h3>
+    <p>
+      This service is maintained by <a href="https://eliotberriot.com">Eliot Berriot</a>. Contact me by email at <a href="mailto:contact@eliotberriot.com">contact@eliotberriot.com</a>
+      if you have any question, or open an issue on our <a href="https://dev.funkwhale.audio/retribute.me/webclient/issues" target="_blank" rel="noopener">Issue tracker</a>.
+    </p>
+
+  </section>
 </template>
+<script>
+import axios from 'axios'
+import config from "@/config"
+import sources from "@/sources"
+import sortBy from 'lodash/sortBy'
+
+export default {
+  data () {
+    return {
+      providers: null
+    }
+  },
+  async created () {
+    await this.fetch()
+  },
+  computed: {
+    sources () {
+      return sortBy(Object.values(sources.sources), 'id')
+    }
+  },
+  methods: {
+    async fetch () {
+      const client = axios.create()
+      let url = config.RetributeAPIUrl + `v1/providers`
+      const response = await axios.get(url)
+      this.providers = response.data
+    }
+  }
+}
+</script>