Add basic open articles for future feat. & ran prettier & now fetches data from the cloud aka line today.

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) => {
+watch(
-  for (const item of newContent) {
+  contentArray,
-    if (item.title) {
+  async (newContent) => {
-      await checks(item.title);
+    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>

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">
+  <div
-    <h2 class="text-3xl text-bold">{{ data.title }}</h2>
+    class="justify-center align-center text-center flex flex-col md:flex-row flex-wrap"
-    <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="flex flex-col">
-      <span>AI Summary: </span>
+      <h2 class="text-3xl text-bold">{{ data.title }}</h2>
-      <button v-if="!activateAiSummary" @click="aiSummary" class="bg-sky-600">Activate AI summary</button>
+      <span class="text-lg text-bold"
-      <div v-else>{{summaryText}}</div>
+        >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>

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);
   }

docs/.vitepress/config.ts

@@ -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" },
-    ],
-  },
-});

docs/api-examples.md

@@ -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).

docs/index.md

@@ -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
----
-

docs/markdown-examples.md

@@ -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).

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",
   },
-});
+});

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>

server/api/cached/tabs.ts

@@ -1,16 +1,31 @@
 export default defineEventHandler(async (event) => {
-  return {
+  try {
-    data: [
+    const buildUrl = `https://today.line.me/_next/data/v1/tw/v3/tab/${type}.json?tabs=${type}`;
-      {
+    const req = await fetch(buildUrl, {
-        text: "國內",
+      headers: {
-        url: "domestic",
+        "Accept-Encoding": "gzip, deflate, br",
-        default: true,
+        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: "國外",
+    const res = await req.json();
-        url: "global",
+    const req2 = res.pageProps.fallback.getTabsData.modules;
-        default: false,
+    return req2;
-      },
+  } catch (e) {
-    ],
+    return {
-  };
+      data: [
+        {
+          text: "國內",
+          url: "domestic",
+          default: true,
+        },
+        {
+          text: "國外",
+          url: "global",
+          default: false,
+        },
+      ],
+    };
+  }
 });