refactor(MainFooter): Configurable footer links

.wiki/Configuration.md

@@ -71,7 +71,7 @@ Location: `frontend/dist/config/default.json`
 | `siteSettings.logo_white` | Path to the white logo image, by default it is `/assets/white_wordmark.png`. |
 | `siteSettings.logo_blue` | Path to the blue logo image, by default it is `/assets/blue_wordmark.png`. |
 | `siteSettings.sitename` | Should be the name of the site. |
-| `siteSettings.github` | URL of GitHub repository, defaults to `https://github.com/Musare/MusareNode`. |
+| `siteSettings.footerLinks` | Add custom links to footer by specifying `"title": "url"`, e.g. `"GitHub": "https://github.com/Musare/MusareNode"`. You can disable about, team and news links (but not the pages themselves) by setting them to false, e.g. `"about": false`. |
 | `siteSettings.mediasession` | Whether to enable mediasession functionality. |
 | `siteSettings.christmas` | Whether to enable christmas theming. |
 | `siteSettings.registrationDisabled` | If set to true, users can't register accounts. |

frontend/dist/config/template.json

@@ -22,7 +22,9 @@
 		"logo_white": "/assets/white_wordmark.png",
 		"logo_blue": "/assets/blue_wordmark.png",
 		"sitename": "Musare",
-		"github": "https://github.com/Musare/Musare",
+		"footerLinks": {
+			"GitHub": "https://github.com/Musare/Musare"
+		},
 		"mediasession": false,
 		"christmas": false,
 		"registrationDisabled": false

frontend/src/components/layout/MainFooter.vue

@@ -9,16 +9,33 @@
 					><img src="/assets/blue_wordmark.png" alt="Musare"
 				/></router-link>
 				<div id="footer-links">
-					<a :href="github" target="_blank" title="GitHub Repository"
-						>GitHub</a
+					<a
+						v-for="(url, title, index) in filteredFooterLinks"
+						:key="`footer-link-${index}`"
+						:href="url"
+						target="_blank"
+						:title="title"
 					>
-					<router-link title="About Musare" to="/about"
+						{{ title }}
+					</a>
+					<router-link
+						v-if="getLink('about') === true"
+						title="About Musare"
+						to="/about"
 						>About</router-link
 					>
-					<router-link title="Musare Team" to="/team"
+					<router-link
+						v-if="getLink('team') === true"
+						title="Musare Team"
+						to="/team"
 						>Team</router-link
 					>
-					<router-link title="News" to="/news">News</router-link>
+					<router-link
+						v-if="getLink('news') === true"
+						title="News"
+						to="/news"
+						>News</router-link
+					>
 				</div>
 			</div>
 		</div>
@@ -29,11 +46,41 @@
 export default {
 	data() {
 		return {
-			github: ""
+			footerLinks: {}
 		};
 	},
+	computed: {
+		filteredFooterLinks() {
+			return Object.fromEntries(
+				Object.entries(this.footerLinks).filter(
+					([title, url]) =>
+						!(
+							["about", "team", "news"].includes(
+								title.toLowerCase()
+							) && typeof url === "boolean"
+						)
+				)
+			);
+		}
+	},
 	async mounted() {
-		this.github = await lofig.get("siteSettings.github");
+		lofig.get("siteSettings.footerLinks").then(footerLinks => {
+			this.footerLinks = {
+				about: true,
+				team: true,
+				news: true,
+				...footerLinks
+			};
+		});
+	},
+	methods: {
+		getLink(title) {
+			return this.footerLinks[
+				Object.keys(this.footerLinks).find(
+					key => key.toLowerCase() === title
+				)
+			];
+		}
 	}
 };
 </script>