Compeleted the language changing feat.

And updated the assets url to be /_assets/ instead of /_nuxt/

components/app/windows/tty.vue

@@ -103,6 +103,18 @@ const commands = [
     command: "help",
     run: displayHelp,
   },
+  {
+    command: "關於",
+    run: printAbout,
+  },
+  {
+    command: "清掉",
+    run: cleanTTY,
+  },
+  {
+    command: "幫助",
+    run: displayHelp,
+  },
 ];
 </script>
 

i18n/locales/en.json

@@ -1,5 +1,6 @@
 {
   "localeflag": "🇺🇸",
+  "nextlang": "zh_tw",
   "core": {
     "sitename": "BlindSpec"
   },
@@ -51,6 +52,7 @@
   "Welcome": "Welcome",
   "loading": "Loading...",
   "app": {
+    "changelangmessage": "Switching the language",
     "launchtext": "Cooking up the desktop...",
     "hotnews": "Hot News",
     "news": "News",

i18n/locales/zh-tw.json

@@ -1,5 +1,6 @@
 {
   "localeflag": "🇹🇼",
+  "nextlang": "en",
   "core": {
     "sitename": "新聞盲點平台"
   },
@@ -51,6 +52,7 @@
   "Welcome": "歡迎",
   "loading": "載入中...",
   "app": {
+    "changelangmessage": "正在切換語言中...",
     "launchtext": "系統開機中...",
     "hotnews": "熱門新聞",
     "news": "新聞",

nuxt.config.ts

@@ -48,6 +48,7 @@ export default defineNuxtConfig({
   },
 
   app: {
+    buildAssetsDir: "/_assets/",
     head: {
       title: "",
       htmlAttrs: {
@@ -55,7 +56,6 @@ export default defineNuxtConfig({
       },
       link: [
         { rel: "dns-prefetch", href: "https://utfs.io" },
-        { rel: "dns-prefetch", href: "https://s3.yhw.tw" },
         { rel: "icon", type: "image/svg", href: "/favicon.svg" },
       ],
       meta: [

pages/app/desktop/index.vue

@@ -72,6 +72,7 @@ const titleAppName = ref("Desktop");
 const openingAppViaAnApp = ref(false);
 const passedValues = ref();
 const globalWindowVal = ref(new Map());
+const changeLangAnimation = ref(false);
 
 // Key Data
 const menuItems = [
@@ -384,12 +385,22 @@ watchEffect(() => {
   });
 });
 // Booting animation
+onMounted(() => {
+  const changeLang = route.query.changelang;
+  if (changeLang) {
+    bootingAnimation.value = false;
+    changeLangAnimation.value = true;
+  }
+  setTimeout(() => {
+    changeLangAnimation.value = false;
+  }, 4000);
+});
+
 onMounted(() => {
   // booting animation bypass
   const bootingHeaderParams = route.query.bypass;
   if (bootingHeaderParams) {
     bootingAnimation.value = false;
-    return;
   }
   if (bootingAnimation.value) {
     gsap.to(popMessage.value, {
@@ -397,10 +408,10 @@ onMounted(() => {
       text: t("app.booting"),
       ease: "none",
     });
-    setTimeout(() => {
-      bootingAnimation.value = false;
-    }, 2000);
   }
+  setTimeout(() => {
+    bootingAnimation.value = false;
+  }, 2000);
 });
 
 watchEffect((cleanupFn) => {
@@ -415,6 +426,13 @@ watchEffect((cleanupFn) => {
 });
 </script>
 <template>
+  <div v-if="changeLangAnimation">
+    <div
+      class="flex flex-col justify-center align-center text-center absolute w-full h-screen inset-0 overscroll-none bg-gray-600/50 z-[999999]"
+    >
+      <span>{{ t("app.changelangmessage") }}</span>
+    </div>
+  </div>
   <div v-if="bootingAnimation">
     <div
       class="flex flex-col justify-center align-center text-center absolute w-full h-screen inset-0 overscroll-none"
@@ -464,12 +482,13 @@ watchEffect((cleanupFn) => {
       </div>
     </div>
     <div class="flex flex-row gap-5">
-      <button
-        class="p-1 hover:text-blue-200 transition-all duration-100 hover:bg-gray-500 rounded"
-        @click="toggleLangMenu"
-      >
-        {{ t("localeflag") }}
-      </button>
+      <NuxtLink :to="localePath('/app/desktop?changelang=1', t('nextlang'))">
+        <button
+          class="p-1 hover:text-blue-200 transition-all duration-100 hover:bg-gray-500 rounded"
+        >
+          {{ t("localeflag") }}
+        </button>
+      </NuxtLink>
       <div class="text-center align-middle justify-center text-white">
         {{ currentDate }}
       </div>
@@ -496,26 +515,6 @@ watchEffect((cleanupFn) => {
       </div>
     </div>
   </Transition>
-  <Transition
-    enter-active-class="animate__animated animate__fadeInDown animate_fast03"
-    leave-active-class="animate__animated animate__fadeOutUp animate_fast03"
-  >
-    <div v-if="langMenuOpen">
-      <div
-        class="w-48 bg-white rounded-md shadow-lg py-1 flex flex-col gap-y-5"
-      >
-        <a
-          v-for="loc in availableLocales"
-          :key="loc.code"
-          :href="switchLocalePath(loc.code)"
-          v-on:click="langMenuOpen = false"
-          class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-all duration-100"
-        >
-          {{ loc.name || loc.code }}
-        </a>
-      </div>
-    </div>
-  </Transition>
   <!--Main desktop contents-->
   <div
     class="flex flex-col justify-center align-center text-center absolute w-full h-screen inset-x-0 inset-y-0 z-[-10]"