From f08786edc0b4d51e5e1e8146941a754271244888 Mon Sep 17 00:00:00 2001
From: carlobeltrame <carlo@beltra.me>
Date: Tue, 13 Feb 2024 00:19:17 +0100
Subject: [PATCH] POC for translations

---
 frontend/package-lock.json                    | 61 +++++++++++++++++++
 frontend/package.json                         |  1 +
 frontend/src/main.js                          |  9 +++
 frontend/src/translations.js                  |  7 +++
 .../src/views/Dashboard/DashboardHome.vue     |  2 +-
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/translations.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2fa703e..8b03e56 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -35,6 +35,7 @@
 				"swissgrid": "^1.0.5",
 				"tiptap-extension-resize-image": "^1.0.2",
 				"vue": "^3.2.31",
+				"vue-i18n": "^9.9.1",
 				"vue-router": "^4.2.5",
 				"vuex": "^4.1.0"
 			},
@@ -615,6 +616,47 @@
 			"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
 			"dev": true
 		},
+		"node_modules/@intlify/core-base": {
+			"version": "9.9.1",
+			"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.1.tgz",
+			"integrity": "sha512-qsV15dg7jNX2faBRyKMgZS8UcFJViWEUPLdzZ9UR0kQZpFVeIpc0AG7ZOfeP7pX2T9SQ5jSiorq/tii9nkkafA==",
+			"dependencies": {
+				"@intlify/message-compiler": "9.9.1",
+				"@intlify/shared": "9.9.1"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
+			}
+		},
+		"node_modules/@intlify/message-compiler": {
+			"version": "9.9.1",
+			"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.1.tgz",
+			"integrity": "sha512-zTvP6X6HeumHOXuAE1CMMsV6tTX+opKMOxO1OHTCg5N5Sm/F7d8o2jdT6W6L5oHUsJ/vvkGefHIs7Q3hfowmsA==",
+			"dependencies": {
+				"@intlify/shared": "9.9.1",
+				"source-map-js": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
+			}
+		},
+		"node_modules/@intlify/shared": {
+			"version": "9.9.1",
+			"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.1.tgz",
+			"integrity": "sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
+			}
+		},
 		"node_modules/@isaacs/cliui": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4438,6 +4480,25 @@
 				"eslint": ">=6.0.0"
 			}
 		},
+		"node_modules/vue-i18n": {
+			"version": "9.9.1",
+			"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.1.tgz",
+			"integrity": "sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==",
+			"dependencies": {
+				"@intlify/core-base": "9.9.1",
+				"@intlify/shared": "9.9.1",
+				"@vue/devtools-api": "^6.5.0"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
+			},
+			"peerDependencies": {
+				"vue": "^3.0.0"
+			}
+		},
 		"node_modules/vue-router": {
 			"version": "4.2.5",
 			"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 48a3f16..a355952 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
 		"swissgrid": "^1.0.5",
 		"tiptap-extension-resize-image": "^1.0.2",
 		"vue": "^3.2.31",
+		"vue-i18n": "^9.9.1",
 		"vue-router": "^4.2.5",
 		"vuex": "^4.1.0"
 	},
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 24d18bb..a17efd8 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,6 +5,8 @@ import store from "./store";
 import { mixin } from "./mixins.js";
 import "./assets/tailwind.css";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { messages } from './translations.js';
+import { createI18n } from 'vue-i18n';
 
 router.beforeEach((to, from, next) => {
 	let splitPath = to.path.split("/");
@@ -16,9 +18,16 @@ router.beforeEach((to, from, next) => {
 	}
 });
 
+const i18n = createI18n({
+	locale: window.navigator.language,
+	fallbackLocale: 'de',
+	messages,
+});
+
 const app = createApp(App)
 	.use(store)
 	.use(router)
+	.use(i18n)
 	.mixin(mixin)
 	.component("font-awesome-icon", FontAwesomeIcon);
 app.directive("router-link", {
diff --git a/frontend/src/translations.js b/frontend/src/translations.js
new file mode 100644
index 0000000..1aeb441
--- /dev/null
+++ b/frontend/src/translations.js
@@ -0,0 +1,7 @@
+export const messages = {
+  de: {
+    dashboard: {
+      hello: 'Hallo {name}!'
+    }
+  },
+};
diff --git a/frontend/src/views/Dashboard/DashboardHome.vue b/frontend/src/views/Dashboard/DashboardHome.vue
index 2890931..11559a8 100644
--- a/frontend/src/views/Dashboard/DashboardHome.vue
+++ b/frontend/src/views/Dashboard/DashboardHome.vue
@@ -1,6 +1,6 @@
 <template>
 	<Card v-if="user" class="text-4xl font-extrabold"
-		>Hello, {{ user.nickname }}!</Card
+		>{{ $t('dashboard.hello', { name: user.nickname }) }}</Card
 	>
 </template>