feat(presenter): translate page title with i18n

presenter/.env.dist

@@ -17,4 +17,3 @@ PUBLIC_ENV__ENDPOINTS__GRAPHQL_URI=http://localhost:4000/
 PUBLIC_ENV__META__BASE_URL="http://localhost:3000"
 PUBLIC_ENV__META__DEFAULT_AUTHOR="DreamMall Verlag GbR"
 PUBLIC_ENV__META__DEFAULT_DESCRIPTION="Deine Reichweite Erweitern Alle Möglichkeiten Miteinander Ausschöpfen Lebensqualität Leben"
-PUBLIC_ENV__META__DEFAULT_TITLE="DreamMall"

presenter/renderer/utils.ts

@@ -1,13 +1,14 @@
 import { PageContext } from 'vike/types'
 
+import i18n from '#plugins/i18n'
 import { META } from '#src/env'
 
 function getTitle(pageContext: PageContext) {
   // The value exported by /pages/**/+title.js is available at pageContext.config.title
   const val = pageContext.config.title
   if (typeof val === 'string') return val
   if (typeof val === 'function') return String(val(pageContext))
-  return META.DEFAULT_TITLE
+  return i18n.global.t('title')
 }
 function getDescription(pageContext: PageContext) {
   const val = pageContext.config.description

presenter/src/env.test.ts

@@ -9,7 +9,6 @@ describe('env', () => {
       DEFAULT_AUTHOR: 'DreamMall Verlag GbR',
       DEFAULT_DESCRIPTION:
         'Deine Reichweite Erweitern Alle Möglichkeiten Miteinander Ausschöpfen Lebensqualität Leben',
-      DEFAULT_TITLE: 'DreamMall',
     })
   })
 })

presenter/src/env.ts

@@ -24,7 +24,6 @@ const META = {
     'DreamMall Verlag GbR') as string,
   DEFAULT_DESCRIPTION: (import.meta.env.PUBLIC_ENV__META__DEFAULT_DESCRIPTION ??
     'Deine Reichweite Erweitern Alle Möglichkeiten Miteinander Ausschöpfen Lebensqualität Leben') as string,
-  DEFAULT_TITLE: (import.meta.env.PUBLIC_ENV__META__DEFAULT_TITLE ?? 'DreamMall') as string,
 }
 
 export { AUTH, ENDPOINTS, META }

presenter/src/locales/de.json

@@ -1,7 +1,8 @@
 {
   "about": {},
   "auth": {
-    "content": "Logge ein..."
+    "content": "Logge ein...",
+    "title": "DreamMall {'|'} Authentifizierung"
   },
   "dataProtection": {
     "euDispute": {
@@ -26,7 +27,8 @@
     "revocation": {
       "content": "Nur mit Ihrer ausdrücklichen Einwilligung sind einige Vorgänge der Datenverarbeitung möglich. Ein Widerruf Ihrer bereits erteilten Einwilligung ist jederzeit möglich. Für den Widerruf genügt eine formlose Mitteilung per E-Mail. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unberührt.",
       "headline": "Widerruf Ihrer Einwilligung zur Datenverarbeitung"
-    }
+    },
+    "title": "DreamMall {'|'} Datenschutz"
   },
   "error": {
     "404": {
@@ -36,7 +38,8 @@
     "500": {
       "h1": "500 Interner Fehler",
       "text": "Etwas ist schief gegangen."
-    }
+    },
+    "title": "DreamMall {'|'} Fehler"
   },
   "home": {
     "aboutSection": {
@@ -161,7 +164,8 @@
       "content": "Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:",
       "headline": "Umsatzsteuer-ID",
       "id": "DE356946303"
-    }
+    },
+    "title": "DreamMall {'|'} Impressum"
   },
   "menu": {
     "eMail": "E-Mail",
@@ -209,8 +213,10 @@
     },
     "success": {
       "text": "Sie haben Ihr Newsletterabbonoment erfolgreich bestätigt. Sie werden in Kürze auf die Startseite weitergeleitet."
-    }
+    },
+    "title": "DreamMall {'|'} Newsletter"
   },
+  "title": "DreamMall",
   "validation": {
     "fieldNoEmail": "Dieses Feld muss eine Email-Adresse sein.",
     "fieldRequired": "Dieses Feld wird benötigt.",

presenter/src/locales/en.json

@@ -1,7 +1,8 @@
 {
   "about": {},
   "auth": {
-    "content": "Logging in..."
+    "content": "Logging in...",
+    "title": "DreamMall {'|'} Authentication"
   },
   "dataProtection": {
     "euDispute": {
@@ -26,7 +27,8 @@
     "revocation": {
       "content": "Some data processing operations are only possible with your express consent. You can withdraw your consent at any time. An informal notification by e-mail is sufficient for the revocation. The legality of the data processing carried out until the revocation remains unaffected by the revocation.",
       "headline": "Withdrawal of your consent to data processing"
-    }
+    },
+    "title": "DreamMall {'|'} Privacy Policy"
   },
   "error": {
     "404": {
@@ -36,7 +38,8 @@
     "500": {
       "h1": "500 Internal error",
       "text": "Something went wrong."
-    }
+    },
+    "title": "DreamMall {'|'} Error"
   },
   "home": {
     "aboutSection": {
@@ -161,7 +164,8 @@
       "content": "Sales tax identification number according to § 27 a sales tax law:",
       "headline": "Sales tax ID",
       "id": "DE356946303"
-    }
+    },
+    "title": "DreamMall {'|'} Imprint"
   },
   "menu": {
     "eMail": "E-Mail",
@@ -209,8 +213,10 @@
     },
     "success": {
       "text": "You have successfully confirmed your newsletter subscription. You will be redirected to the start page shortly."
-    }
+    },
+    "title": "DreamMall {'|'} Newsletter"
   },
+  "title": "DreamMall",
   "validation": {
     "fieldNoEmail": "This field must be an email address",
     "fieldRequired": "This field is required",

presenter/src/pages/_error/+title.ts

@@ -1 +1,5 @@
-export const title = 'DreamMall | Fehler'
+import i18n from '#plugins/i18n'
+
+export const title = () => {
+  return i18n.global.t('error.title')
+}

presenter/src/pages/_error/Page.test.ts

@@ -3,12 +3,14 @@ import { describe, it, expect, beforeEach } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import i18n from '#plugins/i18n'
+
 import ErrorPage from './+Page.vue'
 import { title } from './+title'
 
 describe('ErrorPage', () => {
   it('title returns correct title', () => {
-    expect(title).toBe('DreamMall | Fehler')
+    expect(title()).toBe(i18n.global.t('error.title'))
   })
   describe('500 Error', () => {
     const WrapperUndefined = () => {

presenter/src/pages/auth/+title.ts

@@ -1 +1,5 @@
-export const title = 'DreamMall | Authentifizierung'
+import i18n from '#plugins/i18n'
+
+export const title = () => {
+  return i18n.global.t('auth.title') // 'DreamMall | Authentifizierung'
+}

presenter/src/pages/auth/Page.test.ts

@@ -4,6 +4,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import i18n from '#plugins/i18n'
 import { useAuthStore } from '#stores/authStore'
 import { authService } from '#tests/mock.authService'
 
@@ -51,7 +52,7 @@ describe('AuthPage', () => {
     })
 
     it('title returns correct title', () => {
-      expect(title).toBe('DreamMall | Authentifizierung')
+      expect(title()).toBe(i18n.global.t('auth.title'))
     })
 
     it('renders', () => {

presenter/src/pages/datenschutz/+title.ts

@@ -1 +1,5 @@
-export const title = 'DreamMall | Datenschutz'
+import i18n from '#plugins/i18n'
+
+export const title = () => {
+  return i18n.global.t('dataProtection.title')
+}

presenter/src/pages/datenschutz/Page.test.ts

@@ -3,6 +3,8 @@ import { describe, it, expect } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import i18n from '#plugins/i18n'
+
 import DataPrivacyPage from './+Page.vue'
 import { title } from './+title'
 
@@ -14,7 +16,7 @@ describe('DataPrivacyPage', () => {
   })
 
   it('title returns correct title', () => {
-    expect(title).toBe('DreamMall | Datenschutz')
+    expect(title()).toBe(i18n.global.t('dataProtection.title'))
   })
 
   it('renders', () => {

presenter/src/pages/impressum/+title.ts

@@ -1 +1,6 @@
-export const title = 'DreamMall | Impressum'
+import i18n from '#plugins/i18n'
+
+// DreamMall | Impressum
+export const title = () => {
+  return i18n.global.t('impress.title')
+}

presenter/src/pages/impressum/Page.test.ts

@@ -3,6 +3,8 @@ import { describe, it, expect } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import i18n from '#plugins/i18n'
+
 import ImpressumPage from './+Page.vue'
 import { title } from './+title'
 
@@ -14,7 +16,7 @@ describe('ImpressumPage', () => {
   })
 
   it('title returns correct title', () => {
-    expect(title).toBe('DreamMall | Impressum')
+    expect(title()).toBe(i18n.global.t('impress.title'))
   })
 
   it('renders', () => {

presenter/src/pages/index/+title.ts

@@ -1,3 +1,5 @@
-import { META } from '#src/env'
+import i18n from '#plugins/i18n'
 
-export const title = META.DEFAULT_TITLE
+export const title = () => {
+  return i18n.global.t('title')
+}

presenter/src/pages/index/Page.test.ts

@@ -3,6 +3,8 @@ import { describe, it, expect } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import i18n from '#plugins/i18n'
+
 import IndexPage from './+Page.vue'
 import { title } from './+title'
 
@@ -14,7 +16,7 @@ describe('IndexPage', () => {
   })
 
   it('title returns default title', () => {
-    expect(title).toBe('DreamMall')
+    expect(title()).toBe(i18n.global.t('title'))
   })
 
   it('renders', () => {

presenter/src/pages/optin/+title.ts

@@ -1 +1,6 @@
-export const title = 'DreamMall | Newsletter'
+import i18n from '#plugins/i18n'
+
+// 'DreamMall | Newsletter'
+export const title = () => {
+  return i18n.global.t('optin.title')
+}

presenter/src/pages/optin/Page.test.ts

@@ -5,6 +5,7 @@ import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
 import { confirmNewsletter } from '#mutations/confirmNewsletter'
+import i18n from '#plugins/i18n'
 import { mockClient } from '#tests/mock.apolloClient'
 
 import OptinPage from './+Page.vue'
@@ -45,7 +46,7 @@ describe('OptinPage', () => {
   })
 
   it('title returns correct title', () => {
-    expect(title).toBe('DreamMall | Newsletter')
+    expect(title()).toBe(i18n.global.t('optin.title'))
   })
 
   it('route returns `/optin/@code', () => {

presenter/src/pages/silent-refresh/+title.ts

@@ -1 +1,5 @@
-export const title = 'DreamMall | Authentifizierung'
+import i18n from '#plugins/i18n'
+
+export const title = () => {
+  return i18n.global.t('auth.title') // 'DreamMall | Authentifizierung'
+}

presenter/src/pages/silent-refresh/Page.test.ts

@@ -4,6 +4,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { Component, h } from 'vue'
 import { VApp } from 'vuetify/components'
 
+import i18n from '#plugins/i18n'
 import { authService } from '#tests/mock.authService'
 
 import SilentRefreshPage from './+Page.vue'
@@ -31,7 +32,7 @@ describe('SilentRefreshPage', () => {
     })
 
     it('title returns correct title', () => {
-      expect(title).toBe('DreamMall | Authentifizierung')
+      expect(title()).toBe(i18n.global.t('auth.title'))
     })
 
     it('renders', () => {