From 0c6f0cbcd872255726994583db38b3c4ef2e6f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Mon, 26 May 2025 10:17:12 +0800
Subject: [PATCH] Add basic open articles for future feat. & ran prettier & now
 fetches data from the cloud aka line today.

---
 ... => Screenshot 2025-05-25 at 20.20.14.png} | Bin
 components/app/windows/news.vue               |  27 ++++--
 components/app/windows/newsView.vue           |  41 ++++++---
 .../checks/checkKidUnfriendlyContent.ts       |   2 +-
 docs/.vitepress/config.ts                     |  29 ------
 docs/api-examples.md                          |  49 ----------
 docs/index.md                                 |  25 ------
 docs/markdown-examples.md                     |  85 ------------------
 nuxt.config.ts                                |  12 ++-
 pages/desktop.vue                             |  11 +++
 server/api/cached/tabs.ts                     |  41 ++++++---
 11 files changed, 98 insertions(+), 224 deletions(-)
 rename .github/README/{desktop.png => Screenshot 2025-05-25 at 20.20.14.png} (100%)
 delete mode 100644 docs/.vitepress/config.ts
 delete mode 100644 docs/api-examples.md
 delete mode 100644 docs/index.md
 delete mode 100644 docs/markdown-examples.md

diff --git a/.github/README/desktop.png b/.github/README/Screenshot 2025-05-25 at 20.20.14.png
similarity index 100%
rename from .github/README/desktop.png
rename to .github/README/Screenshot 2025-05-25 at 20.20.14.png
diff --git a/components/app/windows/news.vue b/components/app/windows/news.vue
index 9ec080c..05e9135 100644
--- a/components/app/windows/news.vue
+++ b/components/app/windows/news.vue
@@ -56,13 +56,17 @@ const checks = async (title: string) => {
 const getCheckResult = (title: string) => {
   return checkResults.value.get(title);
 };
-watch(contentArray, async (newContent) => {
-  for (const item of newContent) {
-    if (item.title) {
-      await checks(item.title);
+watch(
+  contentArray,
+  async (newContent) => {
+    for (const item of newContent) {
+      if (item.title) {
+        await checks(item.title);
+      }
     }
-  }
-}, { immediate: true });
+  },
+  { immediate: true },
+);
 </script>
 <template>
   <div class="justify-center align-center text-center">
@@ -93,7 +97,12 @@ watch(contentArray, async (newContent) => {
         >
           <button @click="openNews(item.url.hash)">
             <div class="p-2 bg-gray-200 rounded m-1 p-1">
-              <h1 class="text-2xl text-bold" :class="getCheckResult(item.title) ? 'text-red-600' : ''">{{ item.title }}</h1>
+              <h1
+                class="text-2xl text-bold"
+                :class="getCheckResult(item.title) ? 'text-red-600' : ''"
+              >
+                {{ item.title }}
+              </h1>
               <p class="m-0 text-gray-600">
                 {{ item.publisher }} --
                 {{
@@ -107,7 +116,9 @@ watch(contentArray, async (newContent) => {
                   })
                 }}
               </p>
-              <p :class="getCheckResult(item.title) ? 'hidden' : ''">{{ item.shortDescription }}</p>
+              <p :class="getCheckResult(item.title) ? 'hidden' : ''">
+                {{ item.shortDescription }}
+              </p>
             </div>
           </button>
         </div>
diff --git a/components/app/windows/newsView.vue b/components/app/windows/newsView.vue
index b0c5c51..62ab730 100644
--- a/components/app/windows/newsView.vue
+++ b/components/app/windows/newsView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const slug = "kEJjxKw"
+import { SparklesIcon } from "lucide-vue-next";
+const slug = "kEJjxKw";
 // 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()}`); //demo URL
 console.log(data.value);
@@ -18,7 +19,7 @@ const aiSummary = async () => {
     while (reader) {
       const { value, done } = await reader.read();
       if (done) break;
-      
+
       const chunk = decoder.decode(value);
       summaryText.value += chunk;
     }
@@ -27,19 +28,35 @@ const aiSummary = async () => {
   } finally {
     isGenerating.value = false;
   }
-}
+};
 </script>
 <template>
-  <div class="justify-center align-center text-center flex flex-col">
-    <h2 class="text-3xl text-bold">{{ data.title }}</h2>
-    <span class="text-lg text-bold"
-      >origin: {{ data.origin }} • author: {{ data.author }}</span
-    >
-    <div class="test-center" v-for="item in data.paragraph">{{ item }}</div>
+  <div
+    class="justify-center align-center text-center flex flex-col md:flex-row flex-wrap"
+  >
     <div class="flex flex-col">
-      <span>AI Summary: </span>
-      <button v-if="!activateAiSummary" @click="aiSummary" class="bg-sky-600">Activate AI summary</button>
-      <div v-else>{{summaryText}}</div>
+      <h2 class="text-3xl text-bold">{{ data.title }}</h2>
+      <span class="text-lg text-bold"
+        >origin: {{ data.origin }} • author: {{ data.author }}</span
+      >
+      <div class="test-center" v-for="item in data.paragraph">{{ item }}</div>
+    </div>
+    <div class="flex flex-col w-full justify-center align-center text-center">
+      <div
+        class="group bg-gray-100/70 shadow-lg backdrop-blur-sm p-2 m-2 rounded-xl w-1/2 justify-center align-center text-center"
+      >
+        <span>AI Summary: </span>
+        <button
+          v-if="!activateAiSummary"
+          @click="aiSummary"
+          class="bg-gray-200 align-middle justify-center text-center p-2 flex flex-row group-hover:bg-gray-300/90 rounded hover:bg-gray-500 transition-all duration-200"
+        >
+          <SparklesIcon
+            class="w-4 h-4 align-middle justify-center text-center"
+          />Activate
+        </button>
+        <div v-else>{{ summaryText }}</div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/components/checks/checkKidUnfriendlyContent.ts b/components/checks/checkKidUnfriendlyContent.ts
index a37a756..fbd906b 100644
--- a/components/checks/checkKidUnfriendlyContent.ts
+++ b/components/checks/checkKidUnfriendlyContent.ts
@@ -8,7 +8,7 @@ async function checkUnsafeContent(title: string) {
     const res = await req.json();
     const ac = new AhoCorasick(res.words);
     const kidfriendly = ac.hasKeywordInText(title);
-     return kidfriendly;
+    return kidfriendly;
   } catch (e) {
     console.log(e);
   }
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
deleted file mode 100644
index 5fd975c..0000000
--- a/docs/.vitepress/config.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { defineConfig } from "vitepress";
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
-  title: "News Analzye Docs",
-  description: "The documentation for news analyze the project.",
-  base: "/docs/",
-  themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: "Home", link: "/" },
-      { text: "Examples", link: "/markdown-examples" },
-    ],
-
-    sidebar: [
-      {
-        text: "Examples",
-        items: [
-          { text: "Markdown Examples", link: "/markdown-examples" },
-          { text: "Runtime API Examples", link: "/api-examples" },
-        ],
-      },
-    ],
-
-    socialLinks: [
-      { icon: "github", link: "https://github.com/vuejs/vitepress" },
-    ],
-  },
-});
diff --git a/docs/api-examples.md b/docs/api-examples.md
deleted file mode 100644
index 6bd8bb5..0000000
--- a/docs/api-examples.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-outline: deep
----
-
-# Runtime API Examples
-
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index c43d98e..0000000
--- a/docs/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: "News Analzye Docs"
-  text: "The documentation for news analyze the project."
-  tagline: My great project tagline
-  actions:
-    - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
-    - theme: alt
-      text: API Examples
-      link: /api-examples
-
-features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
----
-
diff --git a/docs/markdown-examples.md b/docs/markdown-examples.md
deleted file mode 100644
index f9258a5..0000000
--- a/docs/markdown-examples.md
+++ /dev/null
@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3aa58b2..4706664 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -25,7 +25,15 @@ export default defineNuxtConfig({
 
   css: ["~/styles/main.css", "@fontsource-variable/noto-sans-tc"],
 
-  modules: ["@nuxtjs/robots", "@nuxtjs/seo", "@nuxtjs/i18n", "@nuxtjs/tailwindcss", "shadcn-nuxt", "motion-v/nuxt", "@sentry/nuxt/module"],
+  modules: [
+    "@nuxtjs/robots",
+    "@nuxtjs/seo",
+    "@nuxtjs/i18n",
+    "@nuxtjs/tailwindcss",
+    "shadcn-nuxt",
+    "motion-v/nuxt",
+    "@sentry/nuxt/module",
+  ],
 
   i18n: {
     defaultLocale: "en",
@@ -153,4 +161,4 @@ export default defineNuxtConfig({
   sourcemap: {
     client: "hidden",
   },
-});
\ No newline at end of file
+});
diff --git a/pages/desktop.vue b/pages/desktop.vue
index 50659a7..3edb0fc 100644
--- a/pages/desktop.vue
+++ b/pages/desktop.vue
@@ -78,6 +78,8 @@ const openingAppViaAnApp = ref(false);
 const passedValues = ref();
 const globalWindowVal = ref(new Map());
 const changeLangAnimation = ref(false);
+const openArticlesArray = ref<any[]>([]);
+const openArticlesId = ref(0);
 
 // Key Data
 const menuItems = [
@@ -383,6 +385,14 @@ watchEffect((cleanupFn) => {
   cleanupFn(() => clearTimeout(timmer));
   cleanupFn(() => clearTimeout(timmmer));
 });
+
+const openArticles = async (slug: string) => {
+  openArticlesArray.value.push({
+    id: openArticlesId.value,
+    slug: slug,
+  });
+  openArticlesId.value += 1;
+};
 </script>
 <template>
   <div v-if="changeLangAnimation">
@@ -503,6 +513,7 @@ watchEffect((cleanupFn) => {
             @error="console.error('Error:', $event)"
             @windowopener="openNewWindowViaApp($event)"
             @loadValue=""
+            @openArticles="openArticles"
             :values="passedValues"
           />
         </Suspense>
diff --git a/server/api/cached/tabs.ts b/server/api/cached/tabs.ts
index 3fd32d1..093bbb3 100644
--- a/server/api/cached/tabs.ts
+++ b/server/api/cached/tabs.ts
@@ -1,16 +1,31 @@
 export default defineEventHandler(async (event) => {
-  return {
-    data: [
-      {
-        text: "國內",
-        url: "domestic",
-        default: true,
+  try {
+    const buildUrl = `https://today.line.me/_next/data/v1/tw/v3/tab/${type}.json?tabs=${type}`;
+    const req = await fetch(buildUrl, {
+      headers: {
+        "Accept-Encoding": "gzip, deflate, br",
+        Accept: "application/json",
+        "User-Agent":
+          "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
       },
-      {
-        text: "國外",
-        url: "global",
-        default: false,
-      },
-    ],
-  };
+    });
+    const res = await req.json();
+    const req2 = res.pageProps.fallback.getTabsData.modules;
+    return req2;
+  } catch (e) {
+    return {
+      data: [
+        {
+          text: "國內",
+          url: "domestic",
+          default: true,
+        },
+        {
+          text: "國外",
+          url: "global",
+          default: false,
+        },
+      ],
+    };
+  }
 });