From 3abfe46464bbdb1a6d9eb9fa78f1e72fd7c20cf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Sat, 7 Jun 2025 01:19:48 +0800
Subject: [PATCH] EXTREMELY basic translating in the newsView page. & made the
 about window i18n available & added GOALS_BEFORE_NEXT_DEVLOG.md file to track
 what goals should I hit before getting a another devlog.

---
 GOALS_BEFORE_NEXT_DEVLOG.md         |  4 +++
 components/app/windows/about.vue    | 26 ++++++++------
 components/app/windows/newsView.vue | 53 +++++++++++++++++++++++------
 i18n/locales/en.json                | 14 ++++++++
 i18n/locales/zh-tw.json             | 14 ++++++++
 5 files changed, 89 insertions(+), 22 deletions(-)
 create mode 100644 GOALS_BEFORE_NEXT_DEVLOG.md

diff --git a/GOALS_BEFORE_NEXT_DEVLOG.md b/GOALS_BEFORE_NEXT_DEVLOG.md
new file mode 100644
index 0000000..dc85eed
--- /dev/null
+++ b/GOALS_BEFORE_NEXT_DEVLOG.md
@@ -0,0 +1,4 @@
+# Goals before the next devlog
+(Hopefuly it can be done like on jun/7?)
+1. Get the custom Groq api thingy work
+2. Get Translation into news, newsView, aboutNewsorg & sources
diff --git a/components/app/windows/about.vue b/components/app/windows/about.vue
index 856cc77..eb4bc3a 100644
--- a/components/app/windows/about.vue
+++ b/components/app/windows/about.vue
@@ -5,33 +5,37 @@ const emit = defineEmits(["windowopener", "error", "loadValue"]);
 const props = defineProps<{
   values?: string;
 }>();
+const { t } = useI18n();
 </script>
 <template>
   <div class="justify-center align-center text-center flex flex-col">
     <div class="flex flex-col">
-      <span class="text-xl">為什麼要做網站？</span>
+      <span class="text-xl">{{ t("about.why") }}</span>
+      <span>{{ t("about.bulletpoints.1") }}</span>
+      <span>{{ t("about.bulletpoints.2") }}</span>
       <span
-        >1. 台灣媒體真的很爛，要嘛有超多偏見，或是比較偏小孩不能看的新聞 (aka
-        擦邊通過的</span
+        >3.
+        <span class="line-through">{{
+          t("about.bulletpoints.3half")
+        }}</span></span
       >
-      <span
-        >2. 這個網站是為了讓大家可以更方便的比較新聞，可以分析新聞的偏見</span
-      >
-      <span>3. <span class="line-through">學 TailwindCSS</span></span>
     </div>
     <hr />
     <div class="flex flex-col">
-      <span class="text-xl">關於開發者</span>
-      <span class="text-center align-center justify-center">開發者：yh</span>
+      <span class="text-xl">{{ t("about.aboutDev.title") }}</span>
+      <span class="text-center align-center justify-center">{{
+        t("about.aboutDev.dev")
+      }}</span>
       <span class="text-center align-center justify-center"
-        >聯絡信箱：<a href="mailto:public+newscompareauthor@yuanhau.com"
+        >{{ t("about.aboutDev.contactEmailStarter")
+        }}<a href="mailto:public+newscompareauthor@yuanhau.com"
           >public@yuanhau.com</a
         ></span
       >
     </div>
     <hr />
     <div class="flex flex-col">
-      <span class="text-xl">版權資訊</span>
+      <span class="text-xl">{{ t("about.copyrigthtInfo") }}</span>
       <copyrightInfo class="justify-center align-center text-center" />
     </div>
   </div>
diff --git a/components/app/windows/newsView.vue b/components/app/windows/newsView.vue
index 8a5d883..8133512 100644
--- a/components/app/windows/newsView.vue
+++ b/components/app/windows/newsView.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
+// FOR THIS MODULE DO NOT USE THE ?APPNAME URL TYPE, IT WILL FALL AT ALL TIMES, I HAVE NO CLUE WHY IS BEHAVIOR HAPPENING RN?
 import { SparklesIcon, UserIcon, NewspaperIcon } from "lucide-vue-next";
+import translate from "translate";
+
+interface translateInterfaceText {
+  translateText: string;
+}
+const translateItem: Record<string, translateInterfaceText> = {};
 
 const props = defineProps<{
   values?: string;
-  applyForTranslation: {
-    type: Boolean;
-    required: true;
-  };
-  windowTranslateState: {
-    type: Boolean;
-    required: true;
-  };
+  applyForTranslation: Boolean;
+  windowTranslateState: Boolean;
 }>();
 
 const { applyForTranslation, windowTranslateState } = props;
 
-watch((applyForTranslation) => {}); // Translate when requested?
-
 const slug = props.values; // Make the props.values static to the window NOT the entire thing and no arrays.
 
-// FOR THIS MODULE DO NOT USE THE ?APPNAME URL TYPE, IT WILL FALL AT ALL TIMES, I HAVE NO CLUE WHY IS BEHAVIOR HAPPENING RN?
 const { data, error, pending } = useFetch(`/api/news/get/lt/${slug.trim()}`);
 console.log(data.value);
 console.log(error.value);
@@ -28,6 +26,38 @@ const isGenerating = ref(false);
 const summaryText = ref("");
 const { locale } = useI18n();
 const likeart = ref([]);
+// Translating logic
+const translateText = ref(false);
+const translatedBefore = ref(false);
+watch(
+  () => props.applyForTranslation,
+  (value) => {
+    if (value === true) {
+      translateText.value = true;
+      if (!data.value) {
+        return;
+      }
+      startTranslating(data.value.title);
+      startTranslating(data.value.origin);
+      startTranslating(data.value.author);
+      data.value.paragraph.forEach((i, element) => {
+        console.log(element);
+        //startTranslating(data.value.)
+      });
+      // NOT retranslating AGAIN
+      translatedBefore.value = true;
+    } else {
+      translateText.value = false;
+    }
+  },
+); // Translate when requested?
+
+const startTranslating = async (text: string) => {
+  translateItem[text] = {
+    translateText: await translate(text, { from: "zh", to: "en" }),
+  };
+};
+
 const aiSummary = async () => {
   activateAiSummary.value = true;
   isGenerating.value = true;
@@ -87,6 +117,7 @@ const aiSummary = async () => {
         </div>
       </div>
       <div class="flex flex-col bg-gray-500">
+        <!--Similar articles-->
         <div class="flex flex-row" v-for="item in likeart">
           <img /><!--Image-->
           <div class="flex flex-col">
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 51abd52..88f484a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -116,5 +116,19 @@
       "title": "Terms of service",
       "content": "N/A"
     }
+  },
+  "about": {
+    "why": "Why make this website?",
+    "bulletpoints": {
+      "1": "1. Taiwan's news network is really shit, either they have a bunch of stupid opinions, or just news that are not appropriate for kids ",
+      "2": "2. This website's goal is to everyone see news a bit easier, and can also compare them.",
+      "3half": "Learn Tailwind"
+    },
+    "aboutDev": {
+      "title": "About the dev",
+      "dev": "developer：yh",
+      "contactEmailStarter": "Contact Email："
+    },
+    "copyrightInfo": "Copyright Info"
   }
 }
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
index d5f1e78..e84d345 100644
--- a/i18n/locales/zh-tw.json
+++ b/i18n/locales/zh-tw.json
@@ -114,5 +114,19 @@
       "title": "Terms of service",
       "content": "N/A"
     }
+  },
+  "about": {
+    "why": "為什麼要做網站？",
+    "bulletpoints": {
+      "1": "1. 台灣媒體真的很爛，要嘛有超多偏見，或是比較偏小孩不能看的新聞 (aka 擦邊通過的",
+      "2": "2. 這個網站是為了讓大家可以更方便的比較新聞，可以分析新聞的偏見",
+      "3half": "學 TailwindCSS"
+    },
+    "aboutDev": {
+      "title": "關於開發者",
+      "dev": "開發者：yh",
+      "contactEmailStarter": "聯絡信箱："
+    },
+    "copyrightInfo": "版權資訊"
   }
 }