Home.vue 2.94 KB
Newer Older
1
<template>
2
  <section class="ui vertical aligned stripe segment" v-title="labels.title">
3
4
    <div class="ui text container">
      <h1>{{ labels.title }}</h1>
5
6
7
      <p>
        <strong><translate translate-context="Content/Library/Paragraph" :translate-params="{quota: defaultQuota}">This instance offers up to %{quota} of storage space for every user.</translate></strong>
      </p>
8
      <div class="ui segment">
9
10
11
12
        <h2>
          <i class="feed icon"></i>&nbsp;
          <translate translate-context="Content/Library/Title/Verb">Publish your work in a channel</translate>
        </h2>
13
        <p>
14
          <translate translate-context="Content/Library/Paragraph">If you are a musician or a podcaster, channels are designed for you!</translate>&#32;
15
          <translate translate-context="Content/Library/Paragraph">Share your work publicly and get subscribers on Funkwhale, the Fediverse or any podcasting application.</translate>
16
        </p>
17
        <router-link :to="{name: 'profile.overview', params: {username: $store.state.auth.username}, hash: '#channels'}" class="ui primary button">
18
          <translate translate-context="Content/Library/Button.Label/Verb">Get started</translate>
19
20
21
        </router-link>
      </div>
      <div class="ui segment">
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        <h2>
          <i class="cloud icon"></i>&nbsp;
          <translate translate-context="Content/Library/Title/Verb">Upload third-party content in a library</translate>
        </h2>
        <p><translate translate-context="Content/Library/Paragraph">Upload your personal music library to Funkwhale to enjoy it from anywhere and share it with friends and family.</translate></p>
        <router-link :to="{name: 'content.libraries.index'}" class="ui primary button">
          <translate translate-context="Content/Library/Button.Label/Verb">Get started</translate>
        </router-link>
      </div>
      <div class="ui segment">
        <h2>
          <i class="download icon"></i>&nbsp;
          <translate translate-context="Content/Library/Title/Verb">Follow remote libraries</translate>
        </h2>
        <p><translate translate-context="Content/Library/Paragraph">Follow libraries from other users to get access to new music. Public libraries can be followed immediately, while following a private library requires approval from its owner.</translate></p>
        <router-link :to="{name: 'content.remote.index'}" class="ui primary button">
38
          <translate translate-context="Content/Library/Button.Label/Verb">Get started</translate>
39
40
41
42
        </router-link>
      </div>

    </div>
43
  </section>
44
45
46
</template>

<script>
47
import { humanSize } from "@/filters"
48
49
50

export default {
  computed: {
51
    labels() {
52
      return {
53
        title: this.$pgettext('Content/Library/Title/Verb', "Add and manage content")
54
55
      }
    },
56
57
58
59
60
    defaultQuota() {
      let quota =
        this.$store.state.instance.settings.users.upload_quota.value *
        1000 *
        1000
61
62
63
64
65
      return humanSize(quota)
    }
  }
}
</script>