Set page title from translation

KSET · May 20, 2021 · 9baee4e · 9baee4e
1 parent d263ed3
commit 9baee4e
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 42 deletions.
diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -125,15 +125,19 @@ name: PageBlogHome
       srcSet: getSrcSet,
     },
 
-    head: () => ({
-      title: "Blog - Home",
-      meta: [
-        ...generateMetadata({
-          title: "Blog - Home",
-          description: "Job Fair Meetup Blog",
-        }),
-      ],
-    }),
+    head() {
+      const title = this.capitalizedTranslation("blog.header");
+
+      return {
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+            description: "Job Fair Meetup Blog",
+          }),
+        ],
+      };
+    },
   };
 </script>
 

diff --git a/pages/kontakt.vue b/pages/kontakt.vue
@@ -176,16 +176,24 @@ name: PageKontakt
       ...mapGetters({
         getSetting: "settings/getSetting",
       }),
+
+      ...mapGetters("translations", [
+        "capitalizedTranslation",
+      ]),
     },
 
-    head: () => ({
-      title: "Kontakt",
-      meta: [
-        ...generateMetadata({
-          title: "Kontakt",
-        }),
-      ],
-    }),
+    head() {
+      const title = this.capitalizedTranslation("contact.header");
+
+      return {
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+          }),
+        ],
+      };
+    },
   };
 </script>
 

diff --git a/pages/live.vue b/pages/live.vue
@@ -40,6 +40,9 @@ name: PageLive
   } from "vuex";
   import AppMaxWidthContainer from "../components/AppMaxWidthContainer";
   import TranslatedText from "../components/TranslatedText";
+  import {
+    generateMetadata,
+  } from "../helpers/head";
 
   export default {
     components: {
@@ -61,6 +64,22 @@ name: PageLive
       ...mapGetters("external/live", [
         "youtubeId",
       ]),
+      ...mapGetters("translations", [
+        "capitalizedTranslation",
+      ]),
+    },
+
+    head() {
+      const title = this.capitalizedTranslation("live.header");
+
+      return ({
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+          }),
+        ],
+      });
     },
   };
 </script>

diff --git a/pages/login.vue b/pages/login.vue
@@ -132,6 +132,9 @@ name: PageLogin
     mapActions,
     mapGetters,
   } from "vuex";
+  import {
+    generateMetadata,
+  } from "../helpers/head";
   import AppMaxWidthContainer from "~/components/AppMaxWidthContainer";
   import {
     decodeRedirectParam,
@@ -265,5 +268,18 @@ name: PageLogin
         return await window.location.assign(redirectUrl);
       },
     },
+
+    head() {
+      const title = "Prijava";
+
+      return {
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+          }),
+        ],
+      };
+    },
   };
 </script>
diff --git a/pages/o-meetupu.vue b/pages/o-meetupu.vue
@@ -326,6 +326,9 @@ name: PageAbout
 </router>
 
 <script>
+  import {
+    mapGetters,
+  } from "vuex";
   import AppMaxWidthContainer from "~/components/AppMaxWidthContainer";
   import TranslatedText from "~/components/TranslatedText";
   import {
@@ -340,14 +343,24 @@ name: PageAbout
       AppMaxWidthContainer,
     },
 
-    head: () => ({
-      title: "O Meetupu",
-      meta: [
-        ...generateMetadata({
-          title: "O Meetupu",
-        }),
-      ],
-    }),
+    computed: {
+      ...mapGetters("translations", [
+        "capitalizedTranslation",
+      ]),
+    },
+
+    head() {
+      const title = this.capitalizedTranslation("meetup.header");
+
+      return {
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+          }),
+        ],
+      };
+    },
   };
 </script>
 

diff --git a/pages/press.vue b/pages/press.vue
@@ -183,6 +183,9 @@ name: PagePress
 
 <script>
   import downloadIconSrc from "@/assets/images/icons/icon-download.svg?inline";
+  import {
+    mapGetters,
+  } from "vuex";
   import AppMaxWidthContainer from "~/components/AppMaxWidthContainer";
   import JfPressKit from "~/components/press/JfPressKit";
   import TranslatedText from "~/components/TranslatedText";
@@ -226,6 +229,9 @@ name: PagePress
       downloadIconSrc() {
         return downloadIconSrc;
       },
+      ...mapGetters("translations", [
+        "capitalizedTranslation",
+      ]),
     },
 
     methods: {
@@ -264,14 +270,18 @@ name: PagePress
       },
     },
 
-    head: () => ({
-      title: "Press",
-      meta: [
-        ...generateMetadata({
-          title: "Press",
-        }),
-      ],
-    }),
+    head() {
+      const title = this.capitalizedTranslation("press.header");
+
+      return {
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+          }),
+        ],
+      };
+    },
   };
 </script>
 

diff --git a/pages/prijava-firmi.vue b/pages/prijava-firmi.vue
@@ -941,15 +941,19 @@ name: PagePrijavaFirmi
       },
     },
 
-    head: () => ({
-      title: "Prijava poduzeća",
-      meta: [
-        ...generateMetadata({
-          title: "Prijava poduzeća",
-          description: "Prijavite svoje poduzeće na ovogodišnji Job Fair Meetup!",
-        }),
-      ],
-    }),
+    head() {
+      const title = this.capitalizedTranslation("prijavaFirmi.header");
+
+      return {
+        title,
+        meta: [
+          ...generateMetadata({
+            title,
+            description: "Prijavite svoje poduzeće na ovogodišnji Job Fair Meetup!",
+          }),
+        ],
+      };
+    },
   };
 </script>
 

diff --git a/store/translations.js b/store/translations.js
@@ -1,4 +1,9 @@
 import Vue from "vue";
+import flow from "lodash/fp/flow";
+import split from "lodash/fp/split";
+import join from "lodash/fp/join";
+import capitalize from "lodash/fp/capitalize";
+import map from "lodash/fp/map";
 
 export const state = () => (
   {
@@ -14,6 +19,17 @@ export const getters = {
     return (key) => translations[key] || key;
   },
 
+  capitalizedTranslation(state) {
+    const getValue = (key) => state.translations[key] || key;
+
+    return flow(
+      getValue,
+      split(" "),
+      map(capitalize),
+      join(" "),
+    );
+  },
+
   isEditable({ editable }) {
     return editable;
   },