Feature/i18n (#4)

integrated nuxt/i18n functionality

components/HeaderBar.vue

@@ -1,6 +1,6 @@
 <template>
 	<v-app-bar flat class="px-5">
-		<nuxt-link to="/">
+		<nuxt-link :to="localePath('/')">
 			<v-nuxt-image class="pt-2" :src="logo" alt="header logo" height="60px" />
 		</nuxt-link>
 		<v-spacer />
@@ -13,8 +13,9 @@
 					<nuxt-link
 						v-bind="props"
 						class="text-body-1 nav-item h-100 d-flex align-center justify-center px-2 text-grey"
-						to="/map"
+						:to="localePath('/map')"
 					>
+						<span class="d-sr-only">{{ $t("global.basics.map") }}</span>
 						<v-icon>mdi-map-marker</v-icon>
 					</nuxt-link>
 				</template>
@@ -24,8 +25,9 @@
 					<nuxt-link
 						v-bind="props"
 						class="text-body-1 nav-item h-100 d-flex align-center justify-center px-2 text-grey"
-						to="/data"
+						:to="localePath('/data')"
 					>
+						<span class="d-sr-only">{{ $t("global.basics.data") }}</span>
 						<v-icon>mdi-database</v-icon>
 					</nuxt-link>
 				</template>
@@ -40,6 +42,7 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 const Locale = useI18n().locale;
+const localePath = useLocalePath();
 
 const logo = getHeaderLogo();
 const APIBase = useRuntimeConfig().public.APIBase;

components/LocaleDropDown.vue

@@ -16,34 +16,36 @@
 					{{ $t("global.basics.language") }}
 				</p>
 			</v-list-subheader>
+			<v-list-item v-for="l in availableLocales" :key="l.code">
+				<!--
+				`@nuxtjs/i18n` does not update the locale cookie on route change, so we need to
+				call `setLocale` explicitly.
+
+				@see https://i18n.nuxtjs.org/guide/lang-switcher
+			 	-->
+				<NuxtLink :to="switchLocalePath(l.code)" @click.prevent.stop="setLocale(locale.code)">
+					{{ l.nativeName }}
+				</NuxtLink>
+			</v-list-item>
 			<!--
         To make sure there is a correct name for each locale, the locale
         must have a list of locales with their corresponding natvieNames.
        -->
-			<v-list-item
-				v-for="locale in $i18n.availableLocales"
-				:key="locale"
-				@click="setLanguage(locale)"
-			>
-				<v-list-item-title
-					:data-test="'locale-selector-' + locale"
-					class="text-body-2 text-capitalize px-2"
-				>
-					<b v-if="locale === Locale">
-						{{ $t("locales." + locale + ".nativeName") }}
-					</b>
-					{{ locale !== Locale ? $t("locales." + locale + ".nativeName") : "" }}
-				</v-list-item-title>
-			</v-list-item>
 		</v-list>
 	</v-menu>
 </template>
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-const Locale = useI18n().locale;
+const { locale, locales, setLocale } = useI18n();
+const switchLocalePath = useSwitchLocalePath();
 
-function setLanguage(locale: string) {
-	Locale.value = locale;
-	window.localStorage.setItem(selectedLocaleLocalStorageKey, locale);
-}
+const availableLocales = computed(() => {
+	return locales.value;
+});
 </script>
+
+<style scoped>
+a {
+	text-decoration: none;
+}
+</style>

components/OADFooter.vue

@@ -1,22 +1,30 @@
 <script setup lang="ts">
+const localePath = useLocalePath();
 const config = useRuntimeConfig();
 
 const frontenVersion = `${config.public.gitTag ?? "version"} - ${
 	config.public.branchName ?? "branch"
 }`;
 </script>
+
 <template>
 	<div>
 		<v-footer border class="py-2">
 			<div
 				style="font-size: 0.75em"
-				class="w-50 mx-auto d-flex justify-center justify-space-between align-center">
+				class="w-50 mx-auto d-flex justify-center justify-space-between align-center"
+			>
 				<div>
-					<NuxtLink style="text-decoration: none; color: inherit" to="/imprint">{{ $t('global.imprint') }}</NuxtLink>
+					<NuxtLink style="text-decoration: none; color: inherit" :to="localePath('/imprint')">
+						{{ $t("global.imprint") }}
+					</NuxtLink>
 				</div>
 
-				<div class="text-center" >
-					<p><b>Version:</b> {{ frontenVersion }}</p>
+				<div class="text-center">
+					<p>
+						<b>Version:</b>
+						{{ frontenVersion }}
+					</p>
 				</div>
 
 				<div class="relative">

config/discoveryConfig.ts

@@ -1,17 +1,17 @@
 /**
  * Configuration options for the Discovery website.
  */
-import { z } from 'zod';
-import userConfig from './discoveryConfig.json'
-const locales = ['en', 'de'] as const;
+import { z } from "zod";
+import userConfig from "./discoveryConfig.json";
+const locales = ["en", "de"] as const;
 
 const schema = z.object({
 	/**
 	 * The title of the website.
 	 * Specifies the title that will be used for the Discovery website.
 	 * @default OpenAtlas Discovery
 	 */
-	title: z.string().default('OpenAtlas Discovery'),
+	title: z.string().default("OpenAtlas Discovery"),
 
 	/**
 	 * The description of the website.
@@ -22,7 +22,7 @@ const schema = z.object({
 	/**
 	 * The default locale for the website. The locales have to be provided and present to be applied.
 	 */
-	defaultLocale: z.enum(locales).default('en'),
+	defaultLocale: z.enum(locales).default("en"),
 
 	/**
 	 * A list of filters represented as numbers.
@@ -35,7 +35,7 @@ const schema = z.object({
 		/**
 		 * Hex color code for the primary color of the website.
 		 */
-		primaryColor: z.string().default('#b8cf5b'),
+		primaryColor: z.string().default("#b8cf5b"),
 
 		/**
 		 * Hex color for the secondary color of the website
@@ -48,7 +48,7 @@ const schema = z.object({
 	 * Specifies the logo that will be used for the Discovery website.
 	 * @default logo.svg
 	 */
-	logo: z.string().default('logo.svg'),
+	logo: z.string().default("logo.svg"),
 
 	/**
 	 * Header Logo
@@ -67,8 +67,9 @@ const schema = z.object({
 });
 
 const result = schema.safeParse(userConfig);
-if(!result.success) {
-	console.error('invalid config!', result.error.flatten().fieldErrors);
-	throw new Error('invalid config!');
+if (!result.success) {
+	console.error("invalid config!", result.error.flatten().fieldErrors);
+	throw new Error("invalid config!");
 }
+
 export const discoveryConfig = result.data;

i18n.config.ts

@@ -1,21 +1,8 @@
-import en from "./locales/en.json";
-import de from "./locales/de.json";
-import { discoveryConfig } from "./config/discoveryConfig";
-import configJson from "./config/discoveryConfig.json";
-
-let config: discoveryConfig = configJson as discoveryConfig;
-config = { ...config };
+import discoveryConfig from "./config/discoveryConfig.json";
 
 export default defineI18nConfig(() => {
 	return {
 		legacy: false,
-		allowComposition: true,
-		globalInjection: true,
-		locale: config.defaultLocale,
-		fallbackLocale: config.defaultLocale,
-		messages: {
-			en,
-			de,
-		},
+		fallbackLocale: discoveryConfig.defaultLocale,
 	};
 });

layouts/default.vue

@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import "../styles/global.css";
+</script>
 <template>
 	<v-app>
 		<v-main class="d-flex flex-column">

locales/de.json

@@ -1,14 +1,4 @@
 {
-	"locales": {
-		"de": {
-			"nativeName": "Deutsch",
-			"englishName": "German"
-		},
-		"en": {
-			"nativeName": "English",
-			"englishName": "English"
-		}
-	},
 	"global": {
 		"basics": {
 			"hello": "Hallo, {name}!",

locales/en.json

@@ -1,14 +1,4 @@
 {
-	"locales": {
-		"de": {
-			"nativeName": "Deutsch",
-			"englishName": "German"
-		},
-		"en": {
-			"nativeName": "English",
-			"englishName": "English"
-		}
-	},
 	"global": {
 		"basics": {
 			"hello": "Hello, {name}!",

nuxt.config.ts

@@ -1,6 +1,5 @@
 import { execSync } from "node:child_process";
-import { discoveryConfig } from "./config/discoveryConfig";
-
+import discoveryConfig from "./config/discoveryConfig.json";
 const branchName = execSync("git rev-parse --abbrev-ref HEAD").toString().trimEnd();
 const commitHash = execSync("git rev-parse HEAD").toString().trimEnd();
 const gitTag = execSync("git describe --always --tags").toString().trimEnd();
@@ -29,6 +28,33 @@ export default defineNuxtConfig({
 		},
 	},
 	modules: ["@nuxtjs/i18n", "@nuxt/image", "@nuxt/content", "vuetify-nuxt-module"],
+	i18n: {
+		baseUrl: process.env.NUXT_PUBLIC_APP_BASE_URL,
+		defaultLocale: discoveryConfig.defaultLocale,
+		detectBrowserLanguage: {
+			redirectOn: "root",
+		},
+		locales: [
+			{
+				nativeName: "Deutsch",
+				englishName: "German",
+				code: "de",
+				iso: "de-DE",
+				file: "./de.json",
+			},
+			{
+				nativeName: "English",
+				englishName: "English",
+				code: "en",
+				iso: "en-US",
+				file: "./en.json",
+			},
+		],
+		lazy: true,
+		langDir: "./locales",
+		strategy: "prefix",
+		vueI18n: "./i18n.config.ts",
+	},
 	vuetify: {
 		moduleOptions: {
 			/* module specific options */
@@ -45,7 +71,9 @@ export default defineNuxtConfig({
 		},
 	},
 	image: {
-		domains: JSON.parse(process.env.NUXT_PUBLIC_IMAGE_DOMAINS),
+		domains: process.env.NUXT_PUBLIC_IMAGE_DOMAINS
+			? JSON.parse(process.env.NUXT_PUBLIC_IMAGE_DOMAINS)
+			: [],
 		inject: true,
 	},
 });