improved accessibilty: page title

package-lock.json

@@ -3488,6 +3488,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz",
+      "integrity": "sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -7483,6 +7488,11 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -7514,6 +7524,11 @@
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
+    "lodash.uniqueid": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz",
+      "integrity": "sha1-MmjyanyI5PSxdY1nknGBTjH6WyY="
+    },
     "loglevel": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
@@ -8123,8 +8138,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -11024,6 +11038,17 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-meta": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-1.6.0.tgz",
+      "integrity": "sha512-LLHejsOYbJiSEDSgZvjHB3fFY7lUxsDFLkuSqf5eBohEvhhddBTOHa3heoFTcI5sxsZSZt26uUzoLVe4CT6Y4A==",
+      "requires": {
+        "deepmerge": "^3.2.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.uniqueid": "^4.0.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "vue-router": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "vue": "^2.6.10",
+    "vue-meta": "^1.6.0",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"
   },

src/App.vue

@@ -1,7 +1,13 @@
 <template>
   <div id="root">
     <header role="banner">
-      <h1>Les Guides de Paris</h1>
+      <h1
+        tabindex="0"
+        @click="closePost()"
+        @keydown.enter="closePost()"
+      >
+        Les Guides de Paris
+      </h1>
     </header>
     <section class="container center-content">
       <RouterView />
@@ -10,6 +16,25 @@
   </div>
 </template>
 
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  metaInfo: {
+    // if no subcomponents specify a metaInfo.title, this title will be used
+    title: 'Home',
+    // all titles will be injected into this template
+    titleTemplate: '%s | Guides de Paris'
+  },
+  computed: mapState({
+    opened: state => state.posts.opened
+  }),
+  methods: mapActions('posts', [
+    'closePost'
+  ])
+}
+</script>
+
 <style lang="stylus" scoped>
 
 .container

src/components/Home/Posts.vue

@@ -5,22 +5,25 @@
     <a
       href="#"
       @click="closePost()"
-      @keydown.enter="openPost(post)"
-      >
-      close</a>
+      @keydown.enter="closePost()"
+    >
+      close
+    </a>
   </section>
   <ul v-else>
     <li
       v-for="post in posts"
       :key="post.id"
-      >
+    >
       <h2>
         <a
           :href="'#post-'+post.id"
           @click="openPost(post)"
           @keydown.enter="openPost(post)"
-          >
-          {{ post.title }}</a></h2>
+        >
+          {{ post.title }}
+        </a>
+      </h2>
     </li>
   </ul>
 </template>
@@ -33,12 +36,17 @@ export default {
     opened: state => state.posts.opened,
     posts: state => state.posts.all
   }),
+  created () {
+    this.$store.dispatch('posts/getAllPosts')
+  },
   methods: mapActions('posts', [
     'openPost',
     'closePost'
   ]),
-  created () {
-    this.$store.dispatch('posts/getAllPosts')
+  metaInfo () {
+    return {
+      title: this.opened !== null ? this.opened.title : 'home'
+    }
   }
 }
 </script>

src/index.js

@@ -1,9 +1,12 @@
 import Vue from 'vue'
 import router from './router'
 import store from './store'
+import Meta from 'vue-meta'
 import App from './App'
 import 'assets/css/app.styl'
 
+Vue.use(Meta)
+
 new Vue({
   router,
   store,