feat(footer): more footer content

app/components/AppFooter.vue

@@ -11,13 +11,12 @@
     <UNavigationMenu :items="items" variant="link" :orientation="orientation" />
 
     <template #right>
-      <UButton
+      <FooterSocialAccount
-        icon="i-simple-icons-github"
+        v-for="social in socialAccounts"
-        color="neutral"
+        :key="social.label"
-        variant="ghost"
+        :icon="social.icon"
-        to="https://github.com/Phundrak"
+        :link="social.link"
-        target="_blank"
+        :label="social.label"
-        aria-label="GitHub"
       />
     </template>
   </UFooter>
@@ -26,6 +25,7 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui';
 import { version } from '../../package.json';
+import type { SocialAccount } from '~/types/social-account';
 
 const toast = useToast();
 const { isMobile } = useDevice();
@@ -35,20 +35,37 @@ const { data, error, loading } = getMeta();
 const backendVersion = computed(() =>
   loading.value ? 'backend.loading' : data?.value?.version || $t('backend.failed'),
 );
+
+const socialAccounts: SocialAccount[] = [
+  { icon: 'i-simple-icons-mastodon', label: 'Fediverse', link: 'https://social.phundrak.com/phundrak' },
+  { icon: 'i-simple-icons-gitea', label: 'Gitea', link: 'https://labs.phundrak.com/phundrak' },
+  { icon: 'i-simple-icons-github', label: 'GitHub', link: 'https://github.com/Phundrak' },
+  { icon: 'i-simple-icons-youtube', label: 'YouTube', link: 'https://youtube.com/@phundrak' },
+];
+
 const items = computed<NavigationMenuItem[]>(() => [
   {
-    label: $t('footer.links.source'),
+    label: $t('footer.links.source.backend'),
-    to: 'https://labs.phundrak.com/phundrak/phundrak.com',
+    to: 'https://labs.phundrak.com/phundrak/bakit',
+    target: '_blank',
+  },
+  {
+    label: $t('footer.links.source.frontend'),
+    to: 'https://labs.phundrak.com/phundrak/framit',
+    target: '_blank',
   },
   {
     label: $t('footer.links.nuxt'),
     to: 'https://nuxt.com/',
+    target: '_blank',
   },
   {
     label: $t('footer.links.rust'),
     to: 'https://rust-lang.org/',
+    target: '_blank',
   },
 ]);
+
 watch(error, (value) => {
   if (value) {
     toast.add({

app/components/footer/SocialAccount.vue

@@ -0,0 +1,15 @@
+<template>
+  <UButton
+    :icon="props.icon"
+    color="neutral"
+    variant="ghost"
+    :to="props.link"
+    target="_blank"
+    :aria-label="props.label"
+  />
+</template>
+
+<script setup lang="ts">
+import type { SocialAccount } from '~/types/social-account';
+const props = defineProps<SocialAccount>();
+</script>

app/types/social-account.ts

@@ -0,0 +1,5 @@
+export interface SocialAccount {
+  icon: string;
+  label: string;
+  link: string;
+}

i18n/locales/en.json

@@ -70,7 +70,10 @@
   },
   "footer": {
     "links": {
-      "source": "Website’s source code",
+      "source": {
+        "backend": "Backend Source Code",
+        "frontend": "Frontend Source Code"
+      },
       "nuxt": "Frontend made with Nuxt",
       "rust": "Backend made with Rust"
     },

i18n/locales/fr.json

@@ -70,7 +70,10 @@
   },
   "footer": {
     "links": {
-      "source": "Code source du site web",
+      "source": {
+        "backend": "Code source du backend",
+        "frontend": "Code source du frontend"
+      },
       "nuxt": "Frontend fait avec Nuxt",
       "rust": "Backend fait avec Rust"
     },