Verified Commit 0eb2f1fa authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Added about page

parent 1cc7fa3b
......@@ -30,4 +30,7 @@
main {
padding: 1em 0;
}
.text.container {
max-width: 800px;
}
</style>
......@@ -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",
......
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment