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

This commit is contained in:
yuanhau 2025-05-26 10:17:12 +08:00
parent 96a7a3372c
commit 0c6f0cbcd8
11 changed files with 98 additions and 224 deletions

View file

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

View file

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