feat: enhance localization by adding new app strings and descriptions; implement sources window for news sources display

components/app/windows/sources.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const { t, locale } = useI18n();
+
+const { data: source, pending, error } = await useFetch("/api/getData/fetchSources", {
+    method: "POST",
+    headers: {
+        "Content-Type": "application/json",
+    },
+    body: {
+        lang: locale,
+    },
+});
+</script>
+<template>
+    <div >
+        <div v-for="item in source.data" :key="item.id">
+            <h1>{{ item.title }}</h1>
+            <span>{{ item.description }}</span>
+            <a :href="item.url">{{ item.url }}</a>
+        </div>
+    </div>
+</template>

i18n/locales/en.json

@@ -16,9 +16,21 @@
       "newsComparePlatform": "news comparison platform"
     },
     "startusing": "Let's Start!",
-    "learnmore": "Learn more"
+    "learnmore": "Learn more",
+    "whydes": "Taiwan news mostly came from China-controlled media or from reporters who uses inappropriate content to farm clicks.",
+    "howdes": "We use web scraping to search for the latest news, and store it into a postgres database."
   },
   "dailybriefing": "Daily Briefing",
   "Welcome": "Welcome",
-  "loading": "Loading..."
+  "loading": "Loading...",
+  "app": {
+    "hotnews": "Hot News",
+    "news": "News",
+    "sources": "Sources",
+    "about": "About this website",
+    "settings": "settings",
+    "leave": "Leave",
+    "login": "Login",
+    "license": "License"
+  }
 }

i18n/locales/zh-tw.json

@@ -16,9 +16,21 @@
       "newsComparePlatform": "新聞觀點比對平台"
     },
     "startusing": "開始使用!",
-    "learnmore": "了解更多"
+    "learnmore": "了解更多",
+    "whydes": "台灣的新聞是要痲是來自中國控制的媒體，或是來自只想獲得點閱的記者。",
+    "howdes":" 我們使用使用 Python 寫的網頁爬蟲來搜尋最新的新聞，並將其存入Postgres資料庫中。"
   },
   "dailybriefing": "今日報導",
   "Welcome": "歡迎",
-  "loading": "載入中..."
+  "loading": "載入中...",
+  "app": {
+    "hotnews": "熱門新聞",
+    "news": "新聞",
+    "sources": "資料來源",
+    "about": "關於我們",
+    "settings": "設定",
+    "leave": "離開",
+    "login": "登入",
+    "license": "授權"
+  }
 }

pages/app/desktop/index.vue

@@ -29,6 +29,7 @@ gsap.registerPlugin(TextPlugin);
 // Import Windows
 import LoginWindow from "~/components/app/windows/login.vue";
 import HotNewsWindow from "~/components/app/windows/hotnews.vue";
+import SourcesWindow from "~/components/app/windows/sources.vue";
 
 // Import Shadcn/UI components
 import AlertComponent from "~/components/ui/alert/Alert.vue";
@@ -122,6 +123,7 @@ const toggleLangMenu = () => {
 
 // values
 const activeWindows = ref<associAppWindowInterface>([]);
+const currentApplication = ref();
 
 // ?opemapp= component
 const openApp = ref(false);
@@ -146,7 +148,8 @@ const associAppWindow = [
     width: "700px",
     height: "500px",
   },
-  { name: "login", id: "2", title: "Login", component: LoginWindow },
+  { name: "login", id: "2", title: t("app.login") , component: LoginWindow },
+  { name: "sources", id: "3", title: t("app.sources"), component: SourcesWindow },
 ];
 
 const findAndOpenWindow = (windowName: string) => {
@@ -179,6 +182,10 @@ const closeWindow = (windowId: string) => {
   );
   console.log("activeWindows.value", activeWindows.value);
 };
+
+useSeoMeta({
+  title: currentApplication.value.title + " - " + t("app.title"),
+})
 </script>
 <template>
   <div
@@ -282,7 +289,7 @@ const closeWindow = (windowId: string) => {
       <!--版權資訊-->
       <span class="text-sm">1.0.0</span>
       <span class="text-sm">|</span>
-      <span class="text-sm">MIT License</span>
+      <span class="text-sm">MIT {{ t("app.license") }}</span>
       <span class="text-sm">|</span>
       <span class="text-sm">{{ new Date().getFullYear() }} &copy yh</span>
     </div>

pages/home.vue

@@ -79,7 +79,7 @@ onMounted(() => {
         <h1 class="text-8xl mt-0">🤔</h1>
         <h2 class="text-xl font-bold">Why?</h2>
         <span class="text-sm"
-          >台灣的新聞是要痲是來自中國控制的媒體，或是來自只想獲得點閱的記者。</span
+          >{{ t("home.whydes")}}</span
         >
       </div>
       <div
@@ -88,8 +88,7 @@ onMounted(() => {
         <h1 class="text-8xl mt-0">🧐</h1>
         <h2 class="text-xl font-bold">How?</h2>
         <span class="text-sm"
-          >We use web scraping to search for the latest news, and store it into
+          >{{ t("home.howdes")}}</span
-          a postgres database.</span
         >
       </div>
     </div>

server/api/getData/fetchSources.ts

@@ -0,0 +1,25 @@
+import sql from "~/server/components/postgres";
+export default defineEventHandler(async (event) => {
+    const body = await readBody(event);
+    const query = getQuery(event);
+    /*const sources = await sql`SELECT * FROM sources`;
+    return sources;*/
+    // Fake data
+    return {
+        status: "ok",
+        data: [
+            {
+                id: 1,
+                title: "Source 1",
+                url: "https://source1.com",
+                description: "Description for Source 1",
+            },
+            {
+                id: 2,
+                title: "Source 2",
+                url: "https://source2.com",
+                description: "Description for Source 2",
+            }
+        ]
+    }
+})