From 88e0c60be001cd65aa357906a5949750e6d7ecf5 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 9 Sep 2022 20:13:56 +0200
Subject: [PATCH 1/5] add footer config

---
 public/config.json                 |  4 +++
 src/App.vue                        | 13 +++----
 src/components/FooterComponent.vue | 56 ++++++++++++++++++++++++++++++
 src/locales/en.json                |  8 +++--
 src/main.js                        |  6 ++++
 5 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 public/config.json
 create mode 100644 src/components/FooterComponent.vue

diff --git a/public/config.json b/public/config.json
new file mode 100644
index 00000000..83b19381
--- /dev/null
+++ b/public/config.json
@@ -0,0 +1,4 @@
+{
+    "donation_href": " ",
+    "status_page_href": " "
+}
diff --git a/src/App.vue b/src/App.vue
index 722d52ae..302680a0 100644
--- a/src/App.vue
+++ b/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">
-            <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>
+        <FooterComponent />
     </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))
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
new file mode 100644
index 00000000..994e9394
--- /dev/null
+++ b/src/components/FooterComponent.vue
@@ -0,0 +1,56 @@
+<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() {
+            fetch("config.json").then(async response => {
+                const config = await response.json();
+                this.donationHref = config.donation_href;
+                this.statusPageHref = config.status_page_href;
+            });
+        },
+    },
+};
+</script>
+
+<style scoped>
+footer {
+    @apply bg-light-900;
+}
+.dark footer {
+    @apply bg-dark-800;
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 2bae4579..a6645154 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/main.js b/src/main.js
index 1ac91c1d..0737f6b8 100644
--- a/src/main.js
+++ b/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";

From cc75ff1c65839215587b466021d3a458c1b979bd Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 9 Sep 2022 20:14:12 +0200
Subject: [PATCH 2/5] hide by default

---
 public/config.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/config.json b/public/config.json
index 83b19381..7e2686e3 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,4 +1,4 @@
 {
-    "donation_href": " ",
-    "status_page_href": " "
+    "donation_href": "",
+    "status_page_href": ""
 }

From 8899425a47d1961faca16ee3ffc30b086d968b8c Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 10 Sep 2022 11:09:54 +0200
Subject: [PATCH 3/5] apply suggested changes

---
 src/components/FooterComponent.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index 994e9394..a10e4133 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -36,8 +36,7 @@ export default {
     },
     methods: {
         async fetchConfig() {
-            fetch("config.json").then(async response => {
-                const config = await response.json();
+            this.fetchJson("confg.json").then(config => {
                 this.donationHref = config.donation_href;
                 this.statusPageHref = config.status_page_href;
             });
@@ -46,7 +45,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 footer {
     @apply bg-light-900;
 }

From e81140531c0cb34ccfc29e8f9be0276ddd4f5bfb Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 10 Sep 2022 11:11:45 +0200
Subject: [PATCH 4/5] use optional chaining

---
 src/components/FooterComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index a10e4133..e357e6c7 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -37,8 +37,8 @@ export default {
     methods: {
         async fetchConfig() {
             this.fetchJson("confg.json").then(config => {
-                this.donationHref = config.donation_href;
-                this.statusPageHref = config.status_page_href;
+                this.donationHref = config?.donation_href;
+                this.statusPageHref = config?.status_page_href;
             });
         },
     },

From ec83358a44f1f8e2d7fbddbd3cb15695d906b193 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 2 Oct 2022 14:54:13 +0100
Subject: [PATCH 5/5] Fix keys to match API.

---
 public/config.json                 | 4 ----
 src/components/FooterComponent.vue | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)
 delete mode 100644 public/config.json

diff --git a/public/config.json b/public/config.json
deleted file mode 100644
index 7e2686e3..00000000
--- a/public/config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "donation_href": "",
-    "status_page_href": ""
-}
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index e357e6c7..1381c495 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -36,9 +36,9 @@ export default {
     },
     methods: {
         async fetchConfig() {
-            this.fetchJson("confg.json").then(config => {
-                this.donationHref = config?.donation_href;
-                this.statusPageHref = config?.status_page_href;
+            this.fetchJson(this.apiUrl() + "/config").then(config => {
+                this.donationHref = config?.donationUrl;
+                this.statusPageHref = config?.statusPageUrl;
             });
         },
     },