feat: ✨ support translations on more pages

NUXT/pages/mods/logs.vue

@@ -25,7 +25,7 @@
             :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
             :style="{borderRadius: `${roundTweak / 2}rem`}"
           >
-            <v-expansion-panel-header>More</v-expansion-panel-header>
+            <v-expansion-panel-header>{{ lang.more }}</v-expansion-panel-header>
             <v-expansion-panel-content class="logContent" v-text="item.data" />
           </v-expansion-panel>
         </v-expansion-panels>
@@ -63,11 +63,14 @@ export default {
   data() {
     return {
       logs: new Array(),
+      lang: {}
     };
   },
   mounted() {
     const logs = this.$youtube.logs;
     this.logs = logs;
+
+    this.lang = this.$lang("mods").logs
   },
 };
 </script>

NUXT/pages/mods/theme.vue

@@ -49,7 +49,7 @@
               class="pa-4 ma-2 rounded-lg"
               :value="$vuetify.theme.dark ? adaptiveDark : adaptiveLight"
             />
-            Adaptive
+            {{ lang.adaptive }}
           </div>
           <div class="text-center">
             <!-- Custom Background -->
@@ -142,13 +142,13 @@
         "
       >
         <div class="my-auto">
-          <div>Dark Mode</div>
+          <div>{{ lang.darkmode }}</div>
           <div
             class="background--text"
             :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
             style="font-size: 0.75rem; margin-top: -0.25rem !important"
           >
-            Bravo Six, Going Dark.
+            {{ lang.darkmodetagline }}
           </div>
         </div>
         <v-spacer />
@@ -186,8 +186,15 @@ export default {
       adaptiveDark: "",
       pickerState: false,
       pickerMode: "bg",
+      lang: {}
     };
   },
+  mounted() {
+    this.lang = this.$lang("mods").theme;
+    this.backgroundsLight[0].name = this.lang.normal;
+    this.backgroundsDark[0].name = this.lang.dark;
+    this.backgroundsDark[1].name = this.lang.black;
+  },
   watch: {
     // also triggers background and primary watcher, unless primary colors match
     "$vuetify.theme.dark"(value) {

NUXT/pages/mods/tweaks.vue

@@ -25,7 +25,7 @@
         class="my-auto background--text"
         :class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
       >
-        Fullscreen (Soon™)
+        {{ lang.fullscreen }}
       </h3>
       <v-spacer />
       <v-switch
@@ -54,7 +54,7 @@
         class="my-auto background--text"
         :class="$vuetify.theme.dark ? 'text--lighten-3' : 'text--darken-3'"
       >
-        Navbar Blur (Soon™)
+        {{ lang.navbarblur }}
       </h3>
       <v-spacer />
       <v-switch
@@ -68,7 +68,7 @@
 
     <v-divider v-if="!roundTweak" />
 
-    <h3 class="ml-8 mt-8">Rounded Corners</h3>
+    <h3 class="ml-8 mt-8">{{ lang.roundedcorners }}</h3>
 
     <v-card
       flat
@@ -100,7 +100,7 @@
           class="my-auto background--text"
           :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
         >
-          Round Thumbnails
+          {{ lang.roundthumbnails }}
         </div>
         <v-spacer />
         <v-switch
@@ -128,7 +128,7 @@
           class="my-auto background--text"
           :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
         >
-          Round Watch Page Components
+          {{ lang.roundwatchpagecomponents }}
         </div>
         <v-spacer />
         <v-switch
@@ -143,7 +143,7 @@
         v-model="roundTweak"
         class="pr-4 pl-4 pt-4 pb-1 background"
         :max="4"
-        label="Radius"
+        :label="lang.radius"
         step=".25"
         thumb-size="64"
         :class="
@@ -167,6 +167,14 @@
 
 <script>
 export default {
+  data() {
+    return {
+      lang: {}
+    }
+  },
+  mounted() {
+    this.lang = this.$lang("mods").tweaks
+  },
   computed: {
     roundTweak: {
       get() {

NUXT/pages/mods/updates.vue

@@ -26,14 +26,14 @@
         </div>
 
         <v-card-actions>
-          <v-chip v-if="index == 0" class="tags" color="orange" style="border-radius: 0.5rem; border: 2px var(--v-orange-base)">Latest</v-chip>
-          <v-chip v-if="item.sha == installedVersion" class="tags" color="green" style="border-radius: 0.5rem; border: 2px var(--v-green-base)">Installed</v-chip>
+          <v-chip v-if="index == 0" class="tags" color="orange" style="border-radius: 0.5rem; border: 2px var(--v-orange-base)">{{ lang.latest }}</v-chip>
+          <v-chip v-if="item.sha == installedVersion" class="tags" color="green" style="border-radius: 0.5rem; border: 2px var(--v-green-base)">{{ lang.installed }}</v-chip>
           <v-spacer />
           <v-btn @click="openExternal(item)" class="background">
-            <v-icon class="btn-icon">mdi-github</v-icon>View
+            <v-icon class="btn-icon">mdi-github</v-icon>{{ lang.view }}
           </v-btn>
           <v-btn disabled @click="install(item)">
-            <v-icon class="btn-icon">mdi-download</v-icon>Install
+            <v-icon class="btn-icon">mdi-download</v-icon>{{ lang.install }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -78,6 +78,7 @@ export default {
     return {
       commits: new Array(),
       installedVersion: process.env.appVersion,
+      lang: {}
     };
   },
   async mounted() {
@@ -88,6 +89,8 @@ export default {
     } else {
       console.log(commits);
     }
+
+    this.lang = this.$lang("mods").updates;
   },
   methods: {
     async openExternal(item) {

NUXT/plugins/languages/italian.js

@@ -43,7 +43,7 @@ module.exports = {
       navbarblur: "Navbar Blur", // Note From Front: As a native english speaker, i don't know this one
       roundedcorners: "Spigolo Tondeggiante",
       roundthumbnails: "Anteprima Tondeggiante",
-      roundwatchpagecomponents: "Round Watch PAge Components",
+      roundwatchpagecomponents: "Componenti Rotondi Della Pagina Di Controllo",
       radius: "Raggio"
     },
     startup: {