Merge pull request #1418 from Bnyro/footer

Configurable footer to advertise instance specific pages (status, donations)

src/App.vue

@@ -1,29 +1,24 @@
 <template>
     <div class="w-full min-h-screen px-1vw reset" :class="[theme]">
         <NavBar />
+
         <router-view v-slot="{ Component }">
             <keep-alive :max="5">
                 <component :is="Component" :key="$route.fullPath" />
             </keep-alive>
         </router-view>
 
-        <footer class="text-center my-2">
+        <FooterComponent />
-            <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
-                <font-awesome-icon :icon="['fab', 'github']" />
-            </a>
-            <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
-                <font-awesome-icon :icon="['fab', 'bitcoin']" />
-                <span class="ml-1" v-t="'actions.donations'" />
-            </a>
-        </footer>
     </div>
 </template>
 
 <script>
 import NavBar from "./components/NavBar.vue";
+import FooterComponent from "./components/FooterComponent.vue";
 export default {
     components: {
         NavBar,
+        FooterComponent,
     },
     mounted() {
         if (this.getPreferenceBoolean("watchHistory", false))

src/components/FooterComponent.vue

@@ -0,0 +1,55 @@
+<template>
+    <footer class="text-center py-4 rounded-xl children:(mx-3) w-full mt-10 mb-5">
+        <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped" target="_blank">
+            <font-awesome-icon :icon="['fab', 'github']" />
+            <span class="ml-2" v-t="'actions.source_code'" />
+        </a>
+        <a href="https://piped-docs.kavin.rocks/" target="_blank">
+            <font-awesome-icon :icon="['fa', 'book']" />
+            <span class="ml-2" v-t="'actions.documentation'" />
+        </a>
+        <a href="https://github.com/TeamPiped/Piped#donations" target="_blank">
+            <font-awesome-icon :icon="['fab', 'bitcoin']" />
+            <span class="ml-2" v-t="'actions.donations'" />
+        </a>
+        <a v-if="statusPageHref" :href="statusPageHref">
+            <font-awesome-icon :icon="['fa', 'server']" />
+            <span class="ml-2" v-t="'actions.status_page'" />
+        </a>
+        <a v-if="donationHref" :href="donationHref">
+            <font-awesome-icon :icon="['fa', 'donate']" />
+            <span class="ml-2" v-t="'actions.instance_donations'" />
+        </a>
+    </footer>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            donationHref: null,
+            statusPageHref: null,
+        };
+    },
+    mounted() {
+        this.fetchConfig();
+    },
+    methods: {
+        async fetchConfig() {
+            this.fetchJson(this.apiUrl() + "/config").then(config => {
+                this.donationHref = config?.donationUrl;
+                this.statusPageHref = config?.statusPageUrl;
+            });
+        },
+    },
+};
+</script>
+
+<style>
+footer {
+    @apply bg-light-900;
+}
+.dark footer {
+    @apply bg-dark-800;
+}
+</style>

src/locales/en.json

@@ -61,7 +61,7 @@
         "import_from_json": "Import from JSON/CSV",
         "loop_this_video": "Loop this Video",
         "auto_play_next_video": "Auto Play next Video",
-        "donations": "Donations",
+        "donations": "Development donations",
         "minimize_description": "Minimize Description",
         "show_description": "Show Description",
         "minimize_recommendations": "Minimize Recommendations",
@@ -108,7 +108,11 @@
         "time_code": "Time code (in seconds)",
         "show_chapters": "Chapters",
         "store_search_history": "Store Search history",
-        "hide_watched": "Hide watched videos in the feed"
+        "hide_watched": "Hide watched videos in the feed",
+        "documentation": "Documentation",
+        "status_page": "Status",
+        "source_code": "Source code",
+        "instance_donations": "Instance donations"
     },
     "comment": {
         "pinned_by": "Pinned by",

src/main.js

@@ -17,6 +17,9 @@ import {
     faXmark,
     faClone,
     faShare,
+    faBook,
+    faServer,
+    faDonate,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -39,6 +42,9 @@ library.add(
     faXmark,
     faClone,
     faShare,
+    faBook,
+    faServer,
+    faDonate,
 );
 
 import router from "@/router/router.js";