feat(i18n): refactored components to use i18n

devtobi · Jun 11, 2024 · c2ec866 · c2ec866
1 parent 45b835b
commit c2ec866
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 37 deletions.
diff --git a/packages/cv-wrapper/src/App.vue b/packages/cv-wrapper/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container flex flex-column min-h-screen">
     <the-menubar />
-    <main class="content flex-1">This is my content</main>
+    <main class="flex-1"></main>
     <the-footer />
   </div>
 </template>

diff --git a/packages/cv-wrapper/src/components/TheFooter.vue b/packages/cv-wrapper/src/components/TheFooter.vue
@@ -1,11 +1,17 @@
 <template>
   <footer class="text-center bg-transparent border-top-1 border-gray-200 p-1">
-    <p class="text-gray-500">&copy; {{ currentYear }} Tobias Stadler</p>
+    <p class="text-gray-500">
+      {{ t('static.TheFooter.copyright', [currentYear]) }}
+    </p>
   </footer>
 </template>
 
 <script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
   import { useCurrentYear } from '@/composables/useCurrentYear';
 
   const currentYear = useCurrentYear();
+
+  const { t } = useI18n();
 </script>
diff --git a/packages/cv-wrapper/src/components/TheMenubar.vue b/packages/cv-wrapper/src/components/TheMenubar.vue
@@ -7,10 +7,12 @@
           size="large"
           shape="circle"
           role="img"
-          :aria-label="t('TheMenubar.profilePictureAltText')"
+          :aria-label="t('static.TheMenubar.profilePictureAlt')"
           class="mr-3"
         />
-        <p><strong>Tobias Stadler</strong> - {{ t('TheMenubar.cv') }}</p>
+        <p>
+          {{ t('static.TheMenubar.title') }}
+        </p>
       </div>
     </template>
     <template #item="{ item }">
@@ -38,7 +40,7 @@
   import { useI18n } from 'vue-i18n';
 
   import profilePicture from '@/assets/images/profile_picture.png';
-  import menuLinks from '@/data/menuLinks';
+  import menuLinks from '@/helpers/menuLinks';
 
   const { t } = useI18n();
 </script>
diff --git a/packages/cv-wrapper/src/data/menuLinks.ts b/packages/cv-wrapper/src/data/menuLinks.ts
diff --git a/packages/cv-wrapper/src/helpers/menuLinks.ts b/packages/cv-wrapper/src/helpers/menuLinks.ts
@@ -0,0 +1,33 @@
+import { PrimeIcons } from 'primevue/api';
+
+import type { MenuItem } from 'primevue/menuitem';
+
+import i18n from '@/plugins/i18n';
+
+const t = i18n.global.t;
+
+const menuLinks: MenuItem[] = [
+  {
+    icon: PrimeIcons.CODE,
+    key: 'projects',
+    label: t('TheMenubar.links.projects.label'),
+    url: t('static.TheMenubar.links.projects.url'),
+    color: 'primary',
+  },
+  {
+    icon: PrimeIcons.GITHUB,
+    key: 'github',
+    label: t('static.TheMenubar.links.github.label'),
+    url: t('static.TheMenubar.links.github.url'),
+    color: 'contrast',
+  },
+  {
+    icon: PrimeIcons.LINKEDIN,
+    key: 'linkedin',
+    label: t('static.TheMenubar.links.linkedin.label'),
+    url: t('static.TheMenubar.links.linkedin.url'),
+    color: 'info',
+  },
+];
+
+export default menuLinks;
diff --git a/packages/cv-wrapper/src/locales/de.json b/packages/cv-wrapper/src/locales/de.json
@@ -0,0 +1,36 @@
+{
+  "static": {
+    "authorName": "Tobias Stadler",
+    "githubName": "devtobi",
+    "TheMenubar": {
+      "title": "@:static.authorName - @:TheMenubar.cv",
+      "profilePictureAlt": "@:TheMenubar.profilePictureAltPrefix @:static.authorName",
+      "links": {
+        "projects": {
+          "url": "https://devtobi.de"
+        },
+        "github": {
+          "label": "GitHub ({'@'}@:static.githubName)",
+          "url": "https://github.com/@:static.githubName"
+        },
+        "linkedin": {
+          "label": "LinkedIn",
+          "url": "https://www.linkedin.com/in/tobias-stadler/"
+        }
+      }
+    },
+    "TheFooter": {
+      "copyright": "© {0} @:static.authorName ({'@'}@:static.githubName)"
+    }
+  },
+  "TheMenubar": {
+    "profilePictureAltPrefix": "Profilbild von",
+    "newFeaturesSoon": "Neue Funktionen werden bald hinzugefügt!",
+    "cv": "Lebenslauf",
+    "links": {
+      "projects": {
+        "label": "Meine Projekte"
+      }
+    }
+  }
+}
diff --git a/packages/cv-wrapper/src/locales/en.json b/packages/cv-wrapper/src/locales/en.json
@@ -1,7 +1,36 @@
 {
+  "static": {
+    "authorName": "Tobias Stadler",
+    "githubName": "devtobi",
+    "TheMenubar": {
+      "title": "@:static.authorName - @:TheMenubar.cv",
+      "profilePictureAlt": "@:TheMenubar.profilePictureAltPrefix @:static.authorName",
+      "links": {
+        "projects": {
+          "url": "https://devtobi.de"
+        },
+        "github": {
+          "label": "GitHub ({'@'}@:static.githubName)",
+          "url": "https://github.com/@:static.githubName"
+        },
+        "linkedin": {
+          "label": "LinkedIn",
+          "url": "https://www.linkedin.com/in/tobias-stadler/"
+        }
+      }
+    },
+    "TheFooter": {
+      "copyright": "© {0} @:static.authorName ({'@'}@:static.githubName)"
+    }
+  },
   "TheMenubar": {
-    "profilePictureAltText": "Profile picture of Tobias Stadler",
+    "profilePictureAltPrefix": "Profile picture of",
     "newFeaturesSoon": "New features will be added soon!",
-    "cv": "Curriculum Vitae"
+    "cv": "Curriculum Vitae",
+    "links": {
+      "projects": {
+        "label": "My projects"
+      }
+    }
   }
 }
diff --git a/packages/cv-wrapper/src/plugins/i18n.ts b/packages/cv-wrapper/src/plugins/i18n.ts
@@ -1,5 +1,6 @@
 import { createI18n } from 'vue-i18n';
 
+import de from '@/locales/de.json';
 import en from '@/locales/en.json';
 
 export const supportedLocales = ['en'];
@@ -12,10 +13,12 @@ type MessageSchema = typeof en;
 
 const i18n = createI18n<[MessageSchema], SupportedLocale>({
   legacy: false,
-  locale: defaultLocale,
+  locale: 'de',
   fallbackLocale: defaultLocale,
+  formatFallbackMessages: true,
   messages: {
     en: Object.assign(en),
+    de: Object.assign(de),
   },
 });
 export default i18n;