🐛 ♻️ trying to fix i18n with ssr

.gitignore

@@ -1,4 +1,5 @@
 .idea
 .vitepress/dist
+.vitepress/.temp
 .vitepress/cache
 node_modules

.vitepress/components/TagChip.vue

@@ -0,0 +1,25 @@
+<script setup>
+
+import {TAG_PROP} from "../theme/enhancements/i18n/utility/tags.ts";
+import {useTranslator} from "./Translator.ts";
+
+const props = defineProps({
+  tag: {
+    type: String,
+    required: true
+  }
+})
+
+const i18nSelectorTags = TAG_PROP;
+
+const { t } = useTranslator();
+</script>
+
+<template>
+  <v-chip
+      :value="tag"
+      filter
+  >
+    {{ t(`${i18nSelectorTags}.${tag}`) }}
+  </v-chip>
+</template>

.vitepress/components/TagFilter.vue

@@ -2,6 +2,7 @@
 import {ref} from "vue";
 import {computed} from "vue";
 import {data} from "../software.data.js";
+import TagChip from "./TagChip.vue";
 
 const props = defineProps({
     modelValue: {
@@ -39,14 +40,12 @@ const allTags = computed(() => {
             @update:modelValue="$emit('update:modelValue', $event)"
             multiple
     >
-        <v-chip
+        <tag-chip
                 v-for="(tag, index) in (availableTags.length > 0 ? availableTags : allTags)"
                 :key="index"
-                :value="tag"
+                :tag="tag"
                 filter
-        >
-            {{ tag }}
-        </v-chip>
+        />
     </v-chip-group>
 </template>
 

.vitepress/components/TagTile.vue

@@ -34,12 +34,11 @@
                         <div
                                 class="chip-group"
                         >
-                            <v-chip
+                            <tag-chip
                                     v-for="(tag, index) in page.frontmatter.tags"
                                     :key="index"
-                            >
-                                {{ tag }}
-                            </v-chip>
+                                    :tag="tag"
+                            />
                         </div>
                     </div>
                 </v-card-text>
@@ -54,6 +53,7 @@ import {computed} from "vue";
 import {data} from '../software.data.js'
 import {withBase} from "vitepress";
 import SoftwareImageAvatar from "./SoftwareImageAvatar.vue";
+import TagChip from "./TagChip.vue";
 
 const props = defineProps({
     tagNames: {

.vitepress/components/Translator.ts

@@ -0,0 +1,35 @@
+import {useData} from "vitepress";
+import {messages} from "../theme/enhancements/i18n/i18n";
+
+export function useTranslator() {
+
+    const FALLBACK_LANG = 'en';
+    const TRANSLATION_KEY_JSON_PATH_SEPARATOR = '.';
+
+    const { lang } = useData();
+
+    function t(translationKey: String): String {
+        let langMap;
+
+        if(Object.keys(messages).indexOf(lang.value) != -1) {
+            langMap = messages[lang.value];
+        } else {
+            langMap = messages[FALLBACK_LANG];
+        }
+
+        let result = langMap;
+
+        translationKey.split(TRANSLATION_KEY_JSON_PATH_SEPARATOR ).forEach(key => {
+            if(result.hasOwnProperty(key)) {
+                result = result[key];
+            } else {
+                result = translationKey;
+            }
+        });
+
+        return result;
+    }
+
+    // expose managed state as return value
+    return { t }
+}

.vitepress/theme/enhancements/i18n/i18n.ts

@@ -0,0 +1,9 @@
+import { deMessages } from "./lang/de";
+import { enMessages } from "./lang/en";
+
+export const DEFAULT_LANG = "en";
+
+export const messages = {
+    de: deMessages,
+    en: enMessages
+}

.vitepress/theme/enhancements/i18n/lang/de.ts

@@ -0,0 +1,24 @@
+import { localizedMessagesType } from "../utility/types";
+
+export const deMessages: localizedMessagesType = {
+    tags: {
+        cicd: "CI/CD",
+        cms: "CMD",
+        client: "Client",
+        eigenentwicklung: 'Eigenentwicklung',
+        foss: "FOSS",
+        infrastruktur: "Infrastruktur",
+        keycloak: "Keycloak",
+        kooperation: "Kooperation",
+        monitoring: "Monitoring",
+        opencore: "Opencore",
+        opengovernment: "Open Government",
+        refarchinfrastruktur: "RefArch Infrastruktur",
+        server: "Server",
+        schnittstelle: "Schnittstelle",
+        sponsor: "Sponsor",
+        support: "Support",
+        todo: "todo",
+        webanwendung: "Webanwendung"
+    }
+};

.vitepress/theme/enhancements/i18n/lang/en.ts

@@ -0,0 +1,24 @@
+import { localizedMessagesType } from "../utility/types";
+
+export const enMessages: localizedMessagesType = {
+    tags: {
+        cicd: "CI/CD",
+        cms: "CMS",
+        client: "Client",
+        eigenentwicklung: 'Inhouse',
+        foss: "FOSS",
+        infrastruktur: "Infrastructure",
+        keycloak: "Keycloak",
+        kooperation: "Cooperation",
+        monitoring: "Monitoring",
+        opencore: "Opencore",
+        opengovernment: "Open Government",
+        refarchinfrastruktur: "RefArch Infrastructure",
+        server: "Server",
+        schnittstelle: "Interface",
+        sponsor: "Sponsor",
+        support: "Support",
+        todo: "todo",
+        webanwendung: "Web-App"
+    }
+};

.vitepress/theme/enhancements/i18n/utility/tags.ts

@@ -0,0 +1,24 @@
+export const TAG_PROP = "tags";
+
+export interface Tags {
+    [TAG_PROP]: {
+        cicd: string,
+        cms: string,
+        client: string,
+        eigenentwicklung: string,
+        foss: string,
+        infrastruktur: string,
+        keycloak: string,
+        kooperation: string,
+        monitoring: string,
+        opencore: string,
+        opengovernment: string,
+        refarchinfrastruktur: string,
+        server: string,
+        schnittstelle: string,
+        sponsor: string,
+        support: string,
+        todo: string,
+        webanwendung: string,
+    }
+}

.vitepress/theme/enhancements/i18n/utility/types.ts

@@ -0,0 +1,4 @@
+import { DefaultLocaleMessageSchema } from "vue-i18n";
+import { Tags } from "./tags";
+
+export type localizedMessagesType = DefaultLocaleMessageSchema & Tags;