🌐 Localize more pages

pages/products/[...slug].vue

@@ -18,7 +18,7 @@
               size="small"
               class="mx-[-6px]"
             >
-              Archived
+              {{ t("productArchived") }}
             </v-chip>
           </v-col>
         </v-row>
@@ -41,10 +41,10 @@
         </template>
         <template #not-found>
           <v-empty-state
-              icon="mdi-flask-empty-remove-outline"
-              text="We haven't this product, yet."
-              title="Not Found"
-              class="no-content-placeholder"
+            icon="mdi-flask-empty-remove-outline"
+            text="We haven't this product, yet."
+            title="Not Found"
+            class="no-content-placeholder"
           >
             <template #actions>
               <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
@@ -64,8 +64,10 @@
 </style>
 
 <script setup lang="ts">
-const route = useRoute();
-const { data: page } = await useAsyncData('page', queryContent(route.path).findOne)
+const route = useRoute()
+
+const { t } = useI18n()
+const { data: page } = await useAsyncData("page", queryContent(route.path).findOne)
 </script>
 
 <style scoped>

pages/products/index.vue

@@ -18,7 +18,7 @@
               size="small"
               class="mx-[-6px]"
             >
-              Archived
+              {{ t("productArchived") }}
             </v-chip>
           </v-col>
         </v-row>
@@ -29,9 +29,11 @@
 
 <script setup lang="ts">
 useHead({
-  title: 'Products',
+  title: "Products",
 })
 
+const { t } = useI18n()
+
 const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
 </script>
 

pages/users/[...name].vue

@@ -13,12 +13,14 @@
 
       <div class="mb-5 text-xs text-grey flex flex-col">
         <span>Solar Network User Web Preview</span>
-        <span>To get full view of this user's profile, open it on <a class="underline" :href="externalOpenLink">Solian</a></span>
+        <span>
+          To get full view of this user's profile, open it on <a class="underline" :href="externalOpenLink">Solian</a>
+        </span>
       </div>
 
       <div>
-        <h1 class="text-xl">Activity</h1>
-        <span>Recent posts of this user.</span>
+        <h1 class="text-xl">{{ t("userActivity") }}</h1>
+        <span>{{ t("userActivityCaption") }}</span>
       </div>
     </div>
 
@@ -32,9 +34,10 @@
 
 <script setup lang="ts">
 definePageMeta({
-  alias: ["/@:name(.*)*"]
+  alias: ["/@:name(.*)*"],
 })
 
+const { t } = useI18n()
 const route = useRoute()
 const config = useRuntimeConfig()
 

pages/users/me.vue

@@ -13,8 +13,8 @@
 
       <div class="mb-5">
         <div class="mx-[2.5ch]">
-          <h2 class="text-xl">Personalize</h2>
-          <span class="text-sm">Bring your own color to the Solar Network.</span>
+          <h2 class="text-xl">{{ t("personalize") }}</h2>
+          <span class="text-sm">{{ t("personalizeCaption") }}</span>
         </div>
 
         <v-alert
@@ -22,14 +22,14 @@
           type="info"
           variant="tonal"
           density="comfortable"
-          text="This part of the functionality has been transferred to our application Solian, please download it or open it in your browser. To learn more, please visit the project description page."
+          :text="t('transferredToSolianHint')"
         />
       </div>
 
       <div class="mb-5">
         <div class="mx-[2.5ch]">
-          <h2 class="text-xl">Security</h2>
-          <span class="text-sm">Guard your Solar Network account.</span>
+          <h2 class="text-xl">{{ t("security") }}</h2>
+          <span class="text-sm">{{ t("securityCaption") }}</span>
         </div>
 
         <account-auth-ticket-table class="mt-3" />
@@ -47,6 +47,7 @@ definePageMeta({
   middleware: ["auth"],
 })
 
+const { t } = useI18n()
 const config = useRuntimeConfig()
 
 const auth = useUserinfo()