AboutNewsOrg & newsView is now abosolutely working !!! :D Also updated

some README as well :)

README.ZH_TW.md

@@ -18,7 +18,7 @@ Reverse engineering 文檔: [about](/about/)
 ## 在部署之前，請先知道:
 此程式碼絕對不是為在 Vercel 或 Netlify 上啟動而設計的，它現在在主網站程式碼中具有crawling，而且整個「快取功能」都基於Ram，所以請不要使用這些平台，對於 Zeabur 來說，您的成本一定會比較貴一點。網址：https://news.yuanhau.com 託管在我自己的infra上，你也應該這麼做。可以在Yahoo拍賣、蝦皮取得伺服器來執行這個程式。
 
-## Note for deing
+## Note for developing
 The desktop enviroment is super unstable when even using a beefy computer, even so, the desktop will lag when opening the newsView, like it's just hates being in a dev env. Prod app works tho, so you can demo it using `bun run build && bun run preview` for demoing. Please don't file a issue request for this matter. If you have the fix, please contribute using Github PRs.
 
 ## 為什麼?

README.md

@@ -15,6 +15,9 @@ Deploy: [via docker compose](/deploy.md)
 ## Demo:
 You can try out the app RIGHT NOW via this link: https://yhw.tw/news?goto=desktop
 
+## Using Translations:
+A few pages now contains translations, like the aboutNewsOrg & newsView pages. This project currently is using Google Translate. However, muiti translate platform support is coming soon™ (If you login with your account). The translations are not accrate at all, like something that should be `I just want to write about sports` becomes `I just want to write`, that bro, what is even that?
+
 ## Before deploying, please know this:
 This code is absolutly NOT designed to be spinned up at Vercel or Netlify, it has the scraping system now inside of the main website code, oh also the entire "caching feature" is based in memory, so please don't use those platforms, for Zeabur your cost might be expensive. idk, I haven't tried hit yet. The web url: https://news.yuanhau.com is hosted on my own infra, you should too. Please get a server off of yahoo 拍賣, 蝦皮 or eBay to do so.
 

components/app/windows/aboutNewsOrg.vue

@@ -85,33 +85,43 @@ const startTranslating = async (text: string) => {
 const translateText = ref(false);
 const translatedBefore = ref(false);
 const traslateFailed = ref(false);
+const displayTranslatedText = ref(false);
+const loadingTranslations = ref(false);
 watch(
   () => props.applyForTranslation,
   (value) => {
     if (value === true) {
       translateText.value = true;
-      if (!data.value) {
+      if (!fetchNewsOrgInfo.value) {
         return;
       }
       if (translatedBefore.value === true) {
+        displayTranslatedText.value = true;
         return;
       }
+      loadingTranslations.value = true;
       startTranslating(fetchNewsOrgInfo.value?.title);
-      startTranslating(fetchNewsOrgInfo.value?.origin);
+      startTranslating(fetchNewsOrgInfo.value?.description);
-      startTranslating(fetchNewsOrgInfo.value?.author);
       for (const articles of fetchNewsOrgInfo.value?.articles) {
         startTranslating(articles.title.replaceAll("獨家專欄》", ""));
         startTranslating(articles.date);
       }
       // NOT retranslating AGAIN when disabling the feat
       translatedBefore.value = true;
+      setTimeout(() => {
+        displayTranslatedText.value = true;
+        loadingTranslations.value = false;
+      }, 3000);
     } else {
       translateText.value = false;
+      displayTranslatedText.value = false;
     }
   },
 ); // Translate when requested?
 </script>
 <template>
+  <div v-if="loadingTranslations">Loading...</div>
+
   <div>
     <div class="text-center align-center justify-center">
       <div
@@ -128,8 +138,8 @@ watch(
             ref="orgNameAnimation"
           >
             {{
-              translateText
+              displayTranslatedText
-                ? translateItem[fetchNewsOrgInfo?.title]
+                ? translateItem[fetchNewsOrgInfo?.title].translateText
                 : fetchNewsOrgInfo?.title
             }}
           </h1>
@@ -141,8 +151,8 @@ watch(
           </div>
           <span v-else class="text-ms m-1 mt-5 text-left text-wrap">
             {{
-              translateText
+              displayTranslatedText
-                ? translateItem[fetchNewsOrgInfo?.description]
+                ? translateItem[fetchNewsOrgInfo?.description].translateText
                 : fetchNewsOrgInfo?.description
             }}
           </span>
@@ -168,12 +178,15 @@ watch(
             <div>
               <div class="flex flex-col">
                 <span class="title text-bold texxt-sm">{{
-                  translateText
+                  displayTranslatedText
                     ? translateItem[item.title.replaceAll("獨家專欄》", "")]
+                        .translateText
                     : item.title.replaceAll("獨家專欄》", "")
                 }}</span>
                 <span class="date text-xs">{{
-                  translateText ? translateItem[item.date] : item.date
+                  displayTranslatedText
+                    ? translateItem[item.date].translateText
+                    : item.date
                 }}</span>
               </div>
             </div>

components/app/windows/newsView.vue

@@ -30,6 +30,8 @@ const likeart = ref([]);
 const translateText = ref(false);
 const translatedBefore = ref(false);
 const traslateFailed = ref(false);
+const displayTranslatedText = ref(false);
+const loadingTranslations = ref(false);
 watch(
   () => props.applyForTranslation,
   (value) => {
@@ -39,8 +41,10 @@ watch(
         return;
       }
       if (translatedBefore.value === true) {
+        displayTranslatedText.value = true;
         return;
       }
+      loadingTranslations.value = true;
       startTranslating(data.value.title);
       startTranslating(data.value.origin);
       startTranslating(data.value.author);
@@ -49,8 +53,13 @@ watch(
       }
       // NOT retranslating AGAIN when disabling the feat
       translatedBefore.value = true;
+      setTimeout(() => {
+        displayTranslatedText.value = true;
+        loadingTranslations.value = false;
+      }, 3000);
     } else {
       translateText.value = false;
+      displayTranslatedText.value = false;
     }
   },
 ); // Translate when requested?
@@ -103,6 +112,8 @@ const aiSummary = async () => {
       <button></button>
     </div>
   </div>
+  <!--TODO: Get a better animation later.-->
+  <div v-if="loadingTranslations">Loading...</div>
   <div
     class="justify-center align-center text-center flex flex-col md:flex-row flex-wrap"
   >
@@ -110,18 +121,20 @@ const aiSummary = async () => {
       <div class="group">
         <h2 class="text-3xl text-bold">
           {{
-            translateText ? translateItem[data.title].translateText : data.title
+            displayTranslatedText
+              ? translateItem[data.title].translateText
+              : data.title
           }}
         </h2>
         <span
           class="text-lg text-bold flex flex-row justify-center text-center align-center"
           ><NewspaperIcon class="w-7 h-7 p-1" />{{
-            translateText
+            displayTranslatedText
               ? translateItem[data.origin].translateText
               : data.origin
           }}
           • <UserIcon class="w-7 h-7 p-1" />{{
-            translateText
+            displayTranslatedText
               ? translateItem[data.author].translateText
               : data.author
           }}</span
@@ -131,7 +144,7 @@ const aiSummary = async () => {
         <img v-if="data.images[0]" :src="data.images[0]" class="rounded" />
       </div>
       <div class="text-center" v-for="item in data.paragraph">
-        {{ translateText ? translateItem[item]?.translateText : item }}
+        {{ displayTranslatedText ? translateItem[item]?.translateText : item }}
       </div>
     </div>
     <div class="flex flex-col w-full justify-center align-center text-center">