use messages in template & add automatic page titling from route name

2021-03-10 15:26:44 +01:00
parent fb0c99e444
commit 965112ddbb
5 changed files with 13 additions and 26 deletions
@@ -5,7 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>En Françai(s)</title>
+    <title>En françaiS au pluriel</title>
  </head>
  <body>
    <noscript>
@@ -3,7 +3,7 @@
    <header>
      <b-navbar toggleable="md">
        <b-navbar-brand :to="{ name: 'home' }">
-          En Français
+          {{ $t('title') }}
        </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse" />
@@ -11,13 +11,13 @@
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto">
            <b-nav-item :to="{ name: 'library' }">
-              Bibliothèque
+              {{ $t('sections.library') }}
            </b-nav-item>
            <b-nav-item :to="{ name: 'kit' }">
-              Kit de désapprentissage
+              {{ $t('sections.kit') }}
            </b-nav-item>
            <b-nav-item :to="{ name: 'gallery' }">
-              Créations numériques
+              {{ $t('sections.gallery') }}
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
@@ -36,15 +36,13 @@
 export default {
  name: 'App',

-  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 | En Français',
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
-    ]
+  metaInfo () {
+    return {
+      // if no subcomponents specify a metaInfo.title, try to get one from the route name.
+      title: this.$t('sections.' + this.$route.name, ''),
+      // all titles will be injected into this template
+      titleTemplate: '%s | ' + this.$t('title')
+    }
  }
 }
 </script>
@@ -42,7 +42,7 @@
            v-if="text.bounces"
            :id="'bounces-' + text.id"
          >
-            Textes rebonds
+            {{ $t('bounce_texts') }}
          </b-button>
          <b-popover
            v-if="text.bounces"
@@ -2,7 +2,6 @@ import messages from './fr.json'


 function getMessage (keyedPath, alt) {
-  console.log(keyedPath, alt)
  let message
  try {
    message = keyedPath.split('.').reduce((parent, key) => {
@@ -32,16 +32,6 @@ export default {
    TextCard
  },

-  metaInfo () {
-    return {
-      title: this.groups.length ? 'Bibliothèque - ' + this.groups[0].id : 'Bibliothèque',
-      meta: [
-        { charset: 'utf-8' },
-        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
-      ]
-    }
-  },
-
  props: {
    mode: { type: String, required: true },
    texts: { type: Array, required: true }