Add title and description tags

package.json

@@ -14,7 +14,6 @@
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
     "vue-gettext": "^2.1.5",
-    "vue-headful": "^2.0.1",
     "vue-matomo": "^3.9.1-2",
     "vue-router": "^3.1.3"
   },
@@ -29,6 +28,7 @@
     "lodash": "^4.17.15",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
+    "vue-meta": "^2.2.2",
     "vue-template-compiler": "^2.6.10"
   }
 }

src/App.vue

@@ -1,11 +1,5 @@
 <template>
   <div id="app" class="container">
-    <vue-headful
-      title="JoinPeerTube"
-      :html="{ body: {id: $route.meta.id } }"
-      :lang="$route.meta.lang"
-    />
-
     <header-component></header-component>
 
     <router-view></router-view>
@@ -27,6 +21,19 @@
     name: 'app',
     components: {
       HeaderComponent
+    },
+    metaInfo: function () {
+      return {
+        title: 'JoinPeerTube',
+        titleTemplate: '%s | JoinPeerTube',
+        meta: {
+          description: this.$gettext(
+            'A free software to take back control of your videos! ' +
+            'With more than 100 000 hosted videos, viewed more than 6 millions times and 20 000 users, ' +
+            'PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft'
+          )
+        }
+      }
     }
   }
 </script>

src/main.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import VueMatomo from 'vue-matomo'
 import VueRouter from 'vue-router'
-import vueHeadful from 'vue-headful'
 import GetTextPlugin from 'vue-gettext'
+import VueMeta from 'vue-meta'
 
 import App from './App.vue'
 import Home from './views/Home.vue'
@@ -50,7 +50,7 @@ if (allLocales.includes(localePath)) {
 
 // ###########################
 
-Vue.component('vue-headful', vueHeadful)
+Vue.use(VueMeta)
 
 Vue.mixin(CommonMixins)
 
@@ -86,21 +86,6 @@ const router = new VueRouter({
   routes
 })
 
-// Framanav
-if (
-  !window.vuefsPrerender &&
-  document.querySelectorAll('script[src$="nav.js"]').length < 1 &&
-  process.env.NODE_ENV !== 'development'
-) {
-  const navConfig = document.createElement('script')
-  navConfig.innerHTML = 'l$ = { js: { j$: \'noConflict\' } }'
-  document.getElementsByTagName('head')[0].appendChild(navConfig)
-
-  const nav = document.createElement('script')
-  nav.src = 'https://framasoft.org/nav/nav.js'
-// document.getElementsByTagName('head')[0].appendChild(nav);
-}
-
 // Stats Matomo
 if (!(navigator.doNotTrack === 'yes' ||
   navigator.doNotTrack === '1' ||

src/views/FAQ.vue

@@ -1,8 +1,5 @@
 <template>
   <main>
-    <vue-headful
-      :title="$t('meta.title') + ' - ' + $t('faq.title')"
-    />
     <section class="row faq">
       <div class="container">
         <h2 class="text-center" v-html="$t('faq.title')"></h2>
@@ -92,6 +89,7 @@ export default {
   components: {
     BCollapse
   },
+
   data () {
     return {
       prez: [...Array(9).keys()].map(i => (i < 1)),
@@ -99,6 +97,7 @@ export default {
       tech: [...Array(4).keys()].map(i => false)
     }
   },
+
   methods: {
     toggleAccordion (section, index) {
       if (this[section][index]) {
@@ -107,6 +106,12 @@ export default {
         this[section] = this[section].map((v, i) => i === index)
       }
     }
+  },
+
+  metaInfo: function () {
+    return {
+      title: this.$gettext('FAQ')
+    }
   }
 }
 </script>

src/views/Hall-Of-Fame.vue

@@ -1,8 +1,5 @@
 <template>
   <main>
-    <vue-headful
-      :title="$t('meta.title') + ' - ' + $t('hof.title')"
-    />
     <section class="row hof">
       <div class="container">
         <h2 class="text-center" v-html="$t('hof.title')"></h2>
@@ -466,3 +463,13 @@
     </section>
   </main>
 </template>
+
+<script>
+  export default {
+    metaInfo: function () {
+      return {
+        title: this.$gettext('Hall of Fame')
+      }
+    }
+  }
+</script>

src/views/Help.vue

@@ -159,6 +159,12 @@
   export default {
     components: {
       IconRight
+    },
+
+    metaInfo: function () {
+      return {
+        title: this.$gettext('Help')
+      }
     }
   }
 </script>

src/views/Home.vue

@@ -440,6 +440,11 @@
           description: 'Nothing to Hide (2017) est un film documentaire franco-allemand de Marc Meillassoux et Mihaela Gladovic, qui s\'intéresse aux effets de la surveillance de masse sur les individus et la société. Proposant un regard critique à propos des lois sur le renseignement mises en place par de nombreux États ces dernières années, le film nous rappelle à quel point le débat sur l’usage des données personnelles est actuel et questionne les fondements de nos démocraties.'
         }
       ]
-    })
+    }),
+
+    metaInfo: {
+      title: 'JoinPeerTube',
+      titleTemplate: null
+    }
   }
 </script>

src/views/Instances.vue

@@ -101,6 +101,12 @@
   export default {
     components: {
       InstancesList
+    },
+
+    metaInfo: function () {
+      return {
+        title: this.$gettext('PeerTube instances')
+      }
     }
   }
 </script>

src/views/News.vue

@@ -376,6 +376,12 @@
 
 <script>
   export default {
-    components: { }
+    components: { },
+
+    metaInfo: function () {
+      return {
+        title: this.$gettext('News')
+      }
+    }
   }
 </script>

yarn.lock

@@ -2790,6 +2790,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09"
+  integrity sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -4218,11 +4223,6 @@ he@1.2.x, he@^1.1.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-headful@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/headful/-/headful-1.0.3.tgz#420936f6184358a0613b5f73f1c5b5c91a251895"
-  integrity sha512-vF9Vfddn1QWmziliht2mji6ayI78+hUuSC+Kt0GEqLw/51zWgi1KF7oLtIQf3nlkg8sQQOlznkkIaF4W9lIt9w==
-
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@@ -8623,13 +8623,6 @@ vue-gettext@^2.1.5:
   resolved "https://registry.yarnpkg.com/vue-gettext/-/vue-gettext-2.1.5.tgz#6bede1091c25ca657c591532a154b7e5680abd84"
   integrity sha512-QAfPupLNthQLDVSIoLKOSiDeBqXja3qfT48Civhuxwjdee0fdi0MHTgsvnseMsHDfMJq6GBxIMBMhoRp6NJdjg==
 
-vue-headful@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/vue-headful/-/vue-headful-2.0.1.tgz#43876d62d5c21804bbde72f8a89b55cac1026d63"
-  integrity sha512-h2G/jXCi2hAx6O3gwWN8uTj1eQlSKNHgvkCVZcokZneGczWCRghAUCFYrOvZQM+F+SyFB3YXqoI62rE0Sc8QsA==
-  dependencies:
-    headful "^1.0.3"
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
@@ -8651,6 +8644,13 @@ vue-matomo@^3.9.1-2:
   resolved "https://registry.yarnpkg.com/vue-matomo/-/vue-matomo-3.9.1-2.tgz#c409fac632c3eb3a3d2d6b88a3cf2edbc166cdb1"
   integrity sha512-wq9DtgV6yp86xKw4O0s+3DWcG+wjiCYlHoalzFTTqcRPpkWiZl1esWYsvWkDYxVHXzzfAWjS+4bYK65cvFUBoA==
 
+vue-meta@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.2.2.tgz#ec6be76d75b7d6e4abb6d995d92245487081428b"
+  integrity sha512-aSzjfc5xV3szxPZMsSk6JeoHUqwrVHNPzpMciTCek56LDd2xKWCv+Ch4IGWL5EIxVyfxA+krsD7T11PTyLY4TQ==
+  dependencies:
+    deepmerge "^4.0.0"
+
 vue-router@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.3.tgz#e6b14fabc0c0ee9fda0e2cbbda74b350e28e412b"