feat: added (dynamic) page titles

frontend/components/404.vue

@@ -1,5 +1,7 @@
 <template>
 	<div class="wrapper">
+		<metadata title="404" />
+
 		<h3><strong>404</strong>&nbsp;Not Found</h3>
 		<router-link class="button is-black" to="/">
 			Back to Home

frontend/components/Admin/News.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | News" />
 		<div class="container">
 			<table class="table is-striped">
 				<thead>

frontend/components/Admin/Punishments.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | Punishments" />
 		<div class="container">
 			<table class="table is-striped">
 				<thead>

frontend/components/Admin/QueueSongs.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | Queue songs" />
 		<div class="container">
 			<input
 				v-model="searchQuery"

frontend/components/Admin/Reports.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | Reports" />
 		<div class="container">
 			<table class="table is-striped">
 				<thead>

frontend/components/Admin/Songs.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | Songs" />
 		<div class="container">
 			<input
 				v-model="searchQuery"

frontend/components/Admin/Stations.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | Stations" />
 		<div class="container">
 			<table class="table is-striped">
 				<thead>

frontend/components/Admin/Statistics.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="container">
+		<metadata title="Admin | Statistics" />
 		<div class="columns">
 			<div
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"

frontend/components/Admin/Users.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Admin | Users" />
 		<div class="container">
 			<table class="table is-striped">
 				<thead>

frontend/components/Station/Station.vue

@@ -1,5 +1,7 @@
 <template>
 	<div>
+		<metadata v-bind:title="`${station.displayName}`" />
+
 		<official-header v-if="station.type == 'official'" />
 		<community-header v-if="station.type == 'community'" />
 
@@ -442,6 +444,7 @@ import io from "../../io";
 export default {
 	data() {
 		return {
+			title: "Station",
 			loading: true,
 			ready: false,
 			exists: true,
@@ -950,8 +953,6 @@ export default {
 						type
 					} = res.data;
 
-					document.title = `Musare - ${displayName}`;
-
 					this.joinStation({
 						_id,
 						name: this.stationName,

frontend/components/User/ResetPassword.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Reset password" />
 		<main-header />
 		<div class="container">
 			<!--Implement Validation-->

frontend/components/User/Settings.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Settings" />
 		<main-header />
 		<div class="container">
 			<!--Implement Validation-->

frontend/components/User/Show.vue

@@ -1,5 +1,6 @@
 <template>
 	<div v-if="isUser">
+		<metadata v-bind:title="`Profile | ${user.username}`" />
 		<main-header />
 		<div class="container">
 			<img class="avatar" src="/assets/notes.png" />

frontend/components/pages/About.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="app">
+		<metadata title="About" />
 		<main-header />
 		<div class="content-wrapper">
 			<div class="card is-fullwidth">

frontend/components/pages/Banned.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="container">
+		<metadata title="Banned" />
 		<i class="material-icons">not_interested</i>
 		<h4>
 			You are banned for

frontend/components/pages/Home.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<metadata title="Home" />
 		<div class="app">
 			<main-header />
 			<div class="content-wrapper">

frontend/components/pages/News.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="app">
+		<metadata title="News" />
 		<main-header />
 		<div class="container">
 			<div

frontend/components/pages/Privacy.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="app">
+		<metadata title="Privacy policy" />
 		<main-header />
 		<div class="container">
 			<h1>MUSARE PRIVACY POLICY</h1>

frontend/components/pages/Team.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="app">
+		<metadata title="Team" />
 		<main-header />
 		<div class="content-wrapper">
 			<h3 class="center">

frontend/components/pages/Terms.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="app">
+		<metadata title="Terms of Service" />
 		<main-header />
 		<div class="content-wrapper">
 			<h1>MUSARE TERMS OF SERVICE</h1>

frontend/main.js

@@ -6,6 +6,25 @@ import store from "./store";
 import App from "./App.vue";
 import io from "./io";
 
+const handleMetadata = attrs => {
+	document.title = `Musare | ${attrs.title}`;
+};
+
+Vue.component("metadata", {
+	watch: {
+		$attrs: {
+			handler: attrs => {
+				handleMetadata(attrs);
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	render() {
+		return null;
+	}
+});
+
 Vue.use(VueRouter);
 
 const router = new VueRouter({
@@ -138,10 +157,6 @@ router.beforeEach((to, from, next) => {
 		}
 	} else next();
 
-	if (from.name === "station") {
-		document.title = "Musare";
-	}
-
 	if (to.name === "station") {
 		io.getSocket(socket => {
 			socket.emit("stations.findByName", to.params.id, res => {
@@ -153,8 +168,6 @@ router.beforeEach((to, from, next) => {
 	}
 });
 
-// router.afterEach(to => {});
-
 // eslint-disable-next-line no-new
 new Vue({
 	router,