Fix title & meta

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/main.ts

@@ -10,12 +10,14 @@ import { apolloProvider } from './vue-apollo';
 import { NotifierPlugin } from '@/plugins/notifier';
 import filters from '@/filters';
 import messages from '@/i18n/index';
+import VueMeta from 'vue-meta';
 
 Vue.config.productionTip = false;
 
 Vue.use(Buefy);
 Vue.use(NotifierPlugin);
 Vue.use(filters);
+Vue.use(VueMeta);
 
 const language = (window.navigator as any).userLanguage || window.navigator.language;
 

js/src/views/Event/Edit.vue

@@ -265,6 +265,14 @@ import { RouteName } from '@/router';
       query: TAGS,
     },
   },
+  metaInfo() {
+    return {
+      // if no subcomponents specify a metaInfo.title, this title will be used
+      title: (this.$props.isUpdate ? this.$t('Event edition') : this.$t('Event creation')) as string,
+      // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class EditEvent extends Vue {
   @Prop({ type: Boolean, default: false }) isUpdate!: boolean;

js/src/views/Event/Event.vue

@@ -268,6 +268,15 @@ import { RouteName } from '@/router';
       },
     },
   },
+  metaInfo() {
+    return {
+      // if no subcomponents specify a metaInfo.title, this title will be used
+      // @ts-ignore
+      title: this.eventTitle,
+      // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class Event extends EventMixin {
   @Prop({ type: String, required: true }) uuid!: string;
@@ -282,6 +291,11 @@ export default class Event extends EventMixin {
   EventVisibility = EventVisibility;
   RouteName = RouteName;
 
+  get eventTitle() {
+    if (!this.event) return undefined;
+    return this.event.title;
+  }
+
   mounted() {
     this.identity = this.currentActor;
   }

js/src/views/Event/Explore.vue

@@ -46,6 +46,14 @@ import { RouteName } from '@/router';
       query: FETCH_EVENTS,
     },
   },
+  metaInfo() {
+    return {
+      // if no subcomponents specify a metaInfo.title, this title will be used
+      title: this.$t('Explore') as string,
+      // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class Explore extends Vue {
   events: IEvent[] = [];

js/src/views/Event/MyEvents.vue

@@ -111,6 +111,14 @@ import EventCard from '@/components/Event/EventCard.vue';
       update: data => data.loggedUser.participations.map(participation => new Participant(participation)),
     },
   },
+  metaInfo() {
+    return {
+            // if no subcomponents specify a metaInfo.title, this title will be used
+      title: this.$t('My events') as string,
+            // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class MyEvents extends Vue {
   futurePage: number = 1;

js/src/views/Home.vue

@@ -150,6 +150,15 @@ import { IConfig } from '@/types/config.model';
     EventListCard,
     EventCard,
   },
+  metaInfo() {
+    return {
+      // if no subcomponents specify a metaInfo.title, this title will be used
+      // @ts-ignore
+      title: this.instanceName,
+      // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class Home extends Vue {
   events: IEvent[] = [];
@@ -169,6 +178,11 @@ export default class Home extends Vue {
   //     : this.loggedPerson.name;
   // }
 
+  get instanceName() {
+    if (!this.config) return undefined;
+    return this.config.name;
+  }
+
   isToday(date: Date) {
     return (new Date(date)).toDateString() === (new Date()).toDateString();
   }

js/src/views/User/Login.vue

@@ -81,6 +81,14 @@ import { IConfig } from '@/types/config.model';
       query: CURRENT_USER_CLIENT,
     },
   },
+  metaInfo() {
+    return {
+      // if no subcomponents specify a metaInfo.title, this title will be used
+      title: this.$t('Login on Mobilizon!') as string,
+      // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class Login extends Vue {
   @Prop({ type: String, required: false, default: '' }) email!: string;

js/src/views/User/Register.vue

@@ -105,7 +105,16 @@ import { CREATE_USER } from '@/graphql/user';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { RouteName } from '@/router';
 
-@Component
+@Component({
+  metaInfo() {
+    return {
+      // if no subcomponents specify a metaInfo.title, this title will be used
+      title: this.$t('Register an account on Mobilizon!') as string,
+      // all titles will be injected into this template
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
+})
 export default class Register extends Vue {
   @Prop({ type: String, required: false, default: '' }) email!: string;
   @Prop({ type: String, required: false, default: '' }) password!: string;