Merge pull request #1418 from Bnyro/footer

Configurable footer to advertise instance specific pages (status, donations)
This commit is contained in:
Kavin 2022-10-02 14:56:44 +01:00 committed by GitHub
commit c1a9a0e87d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 71 additions and 11 deletions

View file

@ -1,29 +1,24 @@
<template> <template>
<div class="w-full min-h-screen px-1vw reset" :class="[theme]"> <div class="w-full min-h-screen px-1vw reset" :class="[theme]">
<NavBar /> <NavBar />
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<keep-alive :max="5"> <keep-alive :max="5">
<component :is="Component" :key="$route.fullPath" /> <component :is="Component" :key="$route.fullPath" />
</keep-alive> </keep-alive>
</router-view> </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> </div>
</template> </template>
<script> <script>
import NavBar from "./components/NavBar.vue"; import NavBar from "./components/NavBar.vue";
import FooterComponent from "./components/FooterComponent.vue";
export default { export default {
components: { components: {
NavBar, NavBar,
FooterComponent,
}, },
mounted() { mounted() {
if (this.getPreferenceBoolean("watchHistory", false)) if (this.getPreferenceBoolean("watchHistory", false))

View file

@ -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>

View file

@ -61,7 +61,7 @@
"import_from_json": "Import from JSON/CSV", "import_from_json": "Import from JSON/CSV",
"loop_this_video": "Loop this Video", "loop_this_video": "Loop this Video",
"auto_play_next_video": "Auto Play next Video", "auto_play_next_video": "Auto Play next Video",
"donations": "Donations", "donations": "Development donations",
"minimize_description": "Minimize Description", "minimize_description": "Minimize Description",
"show_description": "Show Description", "show_description": "Show Description",
"minimize_recommendations": "Minimize Recommendations", "minimize_recommendations": "Minimize Recommendations",
@ -108,7 +108,11 @@
"time_code": "Time code (in seconds)", "time_code": "Time code (in seconds)",
"show_chapters": "Chapters", "show_chapters": "Chapters",
"store_search_history": "Store Search history", "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": { "comment": {
"pinned_by": "Pinned by", "pinned_by": "Pinned by",

View file

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