fix: set pages head title

locales/fr.json

@@ -28,6 +28,7 @@
     "allRightsReserved": "tous droits réservés"
   },
   "news": {
+    "title": "News",
     "readMore": "Voir toutes les news",
     "domainFilterInfo": "Affichage des news “{domainName}”.",
     "showAll": "Afficher toutes les news",
@@ -59,6 +60,12 @@
   },
   "competitions": {
     "title": "Compétitions",
+    "headTitle": {
+      "standings": "Classement · {phaseName} · {editionName} · {seasonName}",
+      "results": "Résultats · {phaseName} · {editionName} · {seasonName}",
+      "planning": "Programme · {phaseName} · {editionName} · {seasonName}",
+      "match": "{homeTeam} - {awayTeam} · {phaseName} · {editionName} · {seasonName}"
+    },
     "phaseNavigation": {
       "standings": "Classement",
       "results": "Résultats",
@@ -91,6 +98,15 @@
     "photoOf": "Photo de {name}"
   },
   "nationalTeams": {
+    "headTitle": {
+      "players": {
+        "male": "Joueurs de l'{teamName}",
+        "female": "Joueuses de l'{teamName}",
+        "mixed": "Joueur·euse·s de l'{teamName}"
+      },
+      "staff": "Encadrement de l'{teamName}",
+      "results": "Résultats de l'{teamName}"
+    },
     "navigation": {
       "players": {
         "male": "Joueurs",
@@ -163,6 +179,7 @@
     "missing": "Fichier manquant"
   },
   "contactForm": {
+    "headTitle": "Contact",
     "title": "Contacter Swiss Tchoukball",
     "name": "Votre nom",
     "email": "Votre adresse e-mail",

pages/_.vue

@@ -54,6 +54,14 @@ export default Vue.extend({
       }
     }
   },
+  head() {
+    return {
+      // We use this as any because key_role_ids comes from asyncData and it is not recognised as being part of the Vue component.
+      // This is going to be fixed in Nuxt 2.16.
+      // See https://github.com/nuxt/nuxt.js/pull/9239 and https://github.com/nuxt/nuxt.js/pull/9660
+      title: (this as any).title,
+    };
+  },
   computed: {
     Role() {
       return this.$store.$db().model(Role);

pages/competitions/_competition/_season.vue

@@ -87,7 +87,13 @@ export default Vue.extend({
       return CompetitionEdition.query()
         .with('phases')
         .with('phases.rounds', (query) => query.orderBy('order'))
-        .with(['phases.rounds.matches', 'phases.rounds.matches.home_team', 'phases.rounds.matches.away_team'])
+        .with([
+          'phases.competition_edition',
+          'phases.competition_edition.season',
+          'phases.rounds.matches',
+          'phases.rounds.matches.home_team',
+          'phases.rounds.matches.away_team',
+        ])
         .with('competition')
         .with('season')
         .whereHas('competition', (query) => {

pages/competitions/_competition/_season/_phase/planning.vue

@@ -61,6 +61,15 @@ export default Vue.extend({
       required: true,
     },
   },
+  head() {
+    return {
+      title: this.$t('competitions.headTitle.planning', {
+        phaseName: this.phase.name,
+        editionName: this.phase.competition_edition.name,
+        seasonName: this.phase.competition_edition.season.name,
+      }).toString(),
+    };
+  },
   computed: {
     futureMatches(): Match[] {
       const matches = Match.query()

pages/competitions/_competition/_season/_phase/results.vue

@@ -69,6 +69,15 @@ export default Vue.extend({
       required: true,
     },
   },
+  head() {
+    return {
+      title: this.$t('competitions.headTitle.results', {
+        phaseName: this.phase.name,
+        editionName: this.phase.competition_edition.name,
+        seasonName: this.phase.competition_edition.season.name,
+      }).toString(),
+    };
+  },
   computed: {
     roundsUpToNow(): Round[] {
       return this.phase.rounds.filter((round) => round.isPast).sort((roundA, roundB) => roundB.order - roundA.order);

pages/competitions/_competition/_season/_phase/standings.vue

@@ -84,6 +84,15 @@ export default Vue.extend({
       return standing;
     });
   },
+  head() {
+    return {
+      title: this.$t('competitions.headTitle.standings', {
+        phaseName: this.phase.name,
+        editionName: this.phase.competition_edition.name,
+        seasonName: this.phase.competition_edition.season.name,
+      }).toString(),
+    };
+  },
   computed: {
     standingsHeader(): VueI18n.TranslateResult[] {
       return [

pages/competitions/_competition/_season/match/_matchId.vue

@@ -76,14 +76,27 @@ export default Vue.extend({
       venueDetailsVisible: false,
     };
   },
+  head() {
+    return {
+      title: this.$t('competitions.headTitle.match', {
+        homeTeam: (this as any).match.home_team.name,
+        awayTeam: (this as any).match.away_team.name,
+        phaseName: (this as any).match.round.phase.name,
+        editionName: (this as any).match.round.phase.competition_edition.name,
+        seasonName: (this as any).match.round.phase.competition_edition.season.name,
+      }).toString(),
+    };
+  },
   computed: {
-    match() {
+    match(): Match {
       const match = Match.query()
         .whereId(this.$route.params.matchId)
         .with('home_team')
         .with('away_team')
         .with('facility')
         .with('round.phase')
+        .with('round.phase.competition_edition')
+        .with('round.phase.competition_edition.season')
         .first();
       if (!match) {
         throw new Error('No match found for this ID');
@@ -121,13 +134,13 @@ export default Vue.extend({
     },
   },
   methods: {
-    hasHomeTeamWon(match: Match) {
+    hasHomeTeamWon(match: Match): boolean {
       return match.home_team_score > match.away_team_score;
     },
-    hasAwayTeamWon(match: Match) {
+    hasAwayTeamWon(match: Match): boolean {
       return match.home_team_score < match.away_team_score;
     },
-    showVenueDetails() {
+    showVenueDetails(): void {
       this.venueDetailsVisible = true;
       this.$router.push('#match-details');
     },

pages/contact.vue

@@ -84,6 +84,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { MetaInfo } from 'vue-meta';
 import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
 
 export default Vue.extend({
@@ -112,6 +113,11 @@ export default Vue.extend({
       captchaError: null as string | null,
     };
   },
+  head(): MetaInfo {
+    return {
+      title: this.$t('contactForm.headTitle').toString(),
+    };
+  },
   methods: {
     async sendMessage() {
       this.isSending = true;

pages/federation/clubs.vue

@@ -26,6 +26,11 @@ export default Vue.extend({
       await this.$store.dispatch('loadClubs');
     }
   },
+  head() {
+    return {
+      title: this.$t('clubs.title').toString(),
+    };
+  },
   computed: {
     Club() {
       return this.$store.$db().model(Club);

pages/federation/regional-associations.vue

@@ -28,6 +28,11 @@ export default Vue.extend({
       await this.$store.dispatch('loadClubs');
     }
   },
+  head() {
+    return {
+      title: this.$t('regionalAssociations.title').toString(),
+    };
+  },
   computed: {
     Club() {
       return this.$store.$db().model(Club);

pages/federation/staff.vue

@@ -50,6 +50,11 @@ export default Vue.extend({
     }
     await this.$store.dispatch('loadStaff', { groupId: this.groupId !== ALL_OPTION ? this.groupId : undefined });
   },
+  head() {
+    return {
+      title: this.$t('staff.title').toString(),
+    };
+  },
   computed: {
     Person() {
       return this.$store.$db().model(Person);

pages/juniors.vue

@@ -23,6 +23,14 @@ export default Vue.extend({
       de: '/junioren',
     },
   },
+  head() {
+    return {
+      // We use this as any because key_role_ids comes from asyncData of the CatchAllPage and it is not recognised as being part of the Vue component.
+      // This is going to be fixed in Nuxt 2.16.
+      // See https://github.com/nuxt/nuxt.js/pull/9239 and https://github.com/nuxt/nuxt.js/pull/9660
+      title: (this as any).title,
+    };
+  },
   computed: {
     currentSeasonStartYear(): number {
       return (this.$store as Store<RootState>).getters.currentSeason?.year_start;

pages/national-teams/_team.vue

@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { MetaInfo } from 'vue-meta';
 import { NationalTeam } from '~/components/national-teams/st-national-teams.prop';
 import { MenuItem } from '~/store/state';
 
@@ -42,6 +43,11 @@ export default Vue.extend({
       this.$router.replace(this.localePath({ name: 'national-teams-team', params: { team: this.team.slug } }));
     }
   },
+  head(): MetaInfo {
+    return {
+      title: this.team?.name,
+    };
+  },
   computed: {
     teamNavigation(): MenuItem[] {
       if (!this.team) {

pages/national-teams/_team/players.vue

@@ -37,5 +37,12 @@ export default Vue.extend({
       await this.$store.dispatch('loadPlayerPositions');
     }
   },
+  head() {
+    return {
+      title: this.$t(`nationalTeams.headTitle.players.${this.team.gender}`, {
+        teamName: this.team.name.toLowerCase(),
+      }).toString(),
+    };
+  },
 });
 </script>

pages/national-teams/_team/results.vue

@@ -80,6 +80,11 @@ export default Vue.extend({
       required: true,
     },
   },
+  head() {
+    return {
+      title: this.$t(`nationalTeams.headTitle.results`, { teamName: this.team.name.toLowerCase() }).toString(),
+    };
+  },
   computed: {
     hasNationsCupResults() {
       return (

pages/national-teams/_team/staff.vue

@@ -33,6 +33,11 @@ export default Vue.extend({
       required: true,
     },
   },
+  head() {
+    return {
+      title: this.$t(`nationalTeams.headTitle.staff`, { teamName: this.team.name.toLowerCase() }).toString(),
+    };
+  },
   methods: {
     generateDetails(person: StaffMember) {
       const details = [];

pages/news/_slug.vue

@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { MetaInfo } from 'vue-meta';
 import { NewsEntry } from '~/components/news/st-news';
 import stNews from '~/components/news/st-news.vue';
 
@@ -33,5 +34,10 @@ export default Vue.extend({
 
     this.newsEntry = await this.$cmsService.getOneNews(id);
   },
+  head(): MetaInfo {
+    return {
+      title: this.newsEntry?.title,
+    };
+  },
 });
 </script>

pages/news/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="l-main-content-section">
-    <h2 class="t-headline-1">News</h2>
+    <h2 class="t-headline-1">{{ $t('news.title') }}</h2>
     <st-loader v-if="$fetchState.pending" :main="true" />
     <p v-else-if="$fetchState.error">{{ $t('error.otherError') }} : {{ $fetchState.error.message }}</p>
     <template v-else>
@@ -16,6 +16,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { MetaInfo } from 'vue-meta';
 import stLoader from '~/components/st-loader.vue';
 import stNewsList from '~/components/news/st-news-list.vue';
 import { NewsEntry } from '~/components/news/st-news';
@@ -46,6 +47,11 @@ export default Vue.extend({
     this.totalNewsEntries = newsResult.meta.total;
     this.filteredDomainName = newsResult.meta.filteredDomainName;
   },
+  head(): MetaInfo {
+    return {
+      title: this.$t('news.title').toString(),
+    };
+  },
   computed: {
     totalPages(): number | undefined {
       if (!this.totalNewsEntries) {

pages/resources.vue

@@ -63,6 +63,12 @@ const ALL_OPTION = 'all';
 
 export default Vue.extend({
   components: { stResourceList },
+  nuxtI18n: {
+    paths: {
+      fr: '/ressources',
+      de: '/mittel',
+    },
+  },
   data() {
     return {
       searchTerm: '',
@@ -81,6 +87,11 @@ export default Vue.extend({
     }
     // We don't need to load the domains because they are loaded in nuxtServerInit (as they are needed in multiple places)
   },
+  head() {
+    return {
+      title: this.$t('resources.title').toString(),
+    };
+  },
   computed: {
     ResourceType() {
       return this.$store.$db().model(ResourceType);