feat: locales in header & footer

app/components/MainFooter.vue

@@ -1,4 +1,8 @@
-<script lang="ts" src="../composables/MainFooter.ts"></script>
+<script setup lang="ts">
+import { footerLinks } from '../composables/MainFooter'
+
+const { t } = useLocale()
+</script>
 
 <template>
   <UFooter>
@@ -16,12 +20,12 @@
               </span>
             </div>
             <div class="text-sm text-gray-400 space-y-1">
-              <p>Copyright 2026</p>
+              <p>Copyright {{ new Date().getFullYear() }}</p>
-              <p>Site maintained by Spacebar Network</p>
+              <p>{{ t.footer?.siteMaintained }}</p>
-              <p>Developed by our contributors</p>
+              <p>{{ t.footer?.developedBy }}</p>
 
               <p class="mt-4 max-w-[320px] leading-snug text-gray-500">
-                Spacebar Network (SPBR) is an extension of Splatfestival Network (SPFN), which aims to be a Nintendo Network recreation primarily for hosting Splatfests. Spacebar is separate from this purpose, though we remain partnered with Splatfestival.
+                {{ t.footer?.description }}
               </p>
             </div>
           </div>
@@ -31,7 +35,7 @@
 
     <template #left>
       <span class="text-sm text-gray-500">
-        © {{ new Date().getFullYear() }} Spacebar Network. All rights reserved.
+        © {{ new Date().getFullYear() }} {{ t.footer?.copyright }}
       </span>
     </template>
 

app/components/TheHeader.vue

@@ -12,17 +12,17 @@
       </RouterLink>
 
       <nav class="links">
-        <a href="#">Supported games</a>
+        <a href="#">{{ t.nav?.supportedGames }}</a>
-        <a href="#">Error Codes</a>
+        <a href="#">{{ t.nav?.errorCodes }}</a>
-        <a href="#">Discord Server</a>
+        <a href="#">{{ t.nav?.discordServer }}</a>
-        <a href="#">Install SPBR</a>
+        <a href="#">{{ t.nav?.installSpbr }}</a>
       </nav>
 
       <div class="search-box">
         <input
           v-model="query"
           type="text"
-          placeholder="Search"
+          :placeholder="t.nav?.searchPlaceholder"
         >
         <button class="search-btn">
           <Icon
@@ -40,6 +40,8 @@
 import { ref } from 'vue'
 
 const query = ref('')
+
+const { t } = useLocale()
 </script>
 
 <style scoped>

app/composables/useLocales.ts

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+import enMessages from '../locales/message-en.json'
+
+const messages = ref(enMessages)
+
+export const useLocale = () => {
+  // todo add changer
+
+  return {
+    t: messages
+  }
+}

app/locales/message-en.json

@@ -0,0 +1,15 @@
+{
+  "nav": {
+    "supportedGames": "Supported games",
+    "errorCodes": "Error Codes",
+    "discordServer": "Discord Server",
+    "installSpbr": "Install SPBR",
+    "searchPlaceholder": "Search"
+  },
+  "footer": {
+    "siteMaintained": "Site maintained by Spacebar Network",
+    "developedBy": "Developed by our contributors",
+    "description": "Spacebar Network (SPBR) is an extension of Splatfestival Network (SPFN), which aims to be a Nintendo Network recreation primarily for hosting Splatfests. Spacebar is separate from this purpose, though we remain partnered with Splatfestival.",
+    "copyright": "Spacebar Network. All rights reserved."
+  }
+}