feat: dynamic title/description

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

src/App.vue

@@ -1,5 +1,11 @@
 <template>
     <v-app id="inspire">
+        <vue-headful
+            :title="currentRoute ? `${currentRoute.text} - IT-Tools` : 'IT-Tools'"
+            :description="currentRoute ? currentRoute.description: 'Aggregated set of useful tools that every developer may need once in a while.'"
+            :keywords="currentRoute ? currentRoute.keywords: null"
+            image="/img/banner.png"
+        />
         <v-navigation-drawer v-model="drawer" app clipped>
 
             <SearchBar class="hidden-sm-and-up" />
@@ -92,11 +98,26 @@
         data: () => ({
             appVersion: 'v' + process.env.APPLICATION_VERSION,
             drawer: null,
-            items: toolsComponents
+            items: toolsComponents,
+            currentRoute:{}
         }),
+        mounted() {
+            this.setTitle()
+        },
         created() {
             this.$vuetify.theme.dark = true
         },
+        methods:{
+            setTitle(){
+                const path = this.$router.currentRoute.path;
+                this.currentRoute = toolsComponents.map(p => p.child).flat().find(p => p.path === path)
+            }
+        },
+        watch:{
+            '$route'(){
+                this.setTitle()
+            }
+        }
     }
 </script>
 

src/main.js

@@ -7,6 +7,7 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import './plugins/crypto-js'
 import './plugins/toast-snackbar'
+import './plugins/vue-headful'
 
 Vue.config.productionTip = false
 

src/plugins/vue-headful.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import vueHeadful from 'vue-headful';
+
+Vue.component('vue-headful', vueHeadful);

src/router.js

@@ -24,7 +24,8 @@ const toolsComponents = [
                 text: 'Token generator',
                 path: '/token-generator',
                 component: TokenGenerator,
-                keywords: ['token', 'random', 'string', 'alphanumeric']
+                keywords: ['token', 'random', 'string', 'alphanumeric'],
+                description: 'Generate random tokens.'
             },
             {
                 icon: 'fa-fingerprint',

src/routes/tools/TextStats.vue

@@ -43,7 +43,7 @@
             return {
                 Blob: Blob,
                 formatBytes,
-                inputText: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
+                inputText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
             }
         },
         computed: {