A publisher api. & modded the news.vue file to use the publisherId instead of the name. & cleaned the code using prettier.

This commit is contained in:
yuanhau 2025-06-02 00:47:23 +08:00
parent 1dd324e0ca
commit 5392974261
6 changed files with 99 additions and 36 deletions

View file

@ -1,5 +1,14 @@
<script setup lang="ts">
import { ArrowBigRightDashIcon, BadgeCheckIcon, BadgeXIcon, PanelTopIcon, RssIcon, NewspaperIcon, BotMessageSquareIcon, CombineIcon } from "lucide-vue-next";
import {
ArrowBigRightDashIcon,
BadgeCheckIcon,
BadgeXIcon,
PanelTopIcon,
RssIcon,
NewspaperIcon,
BotMessageSquareIcon,
CombineIcon,
} from "lucide-vue-next";
const apis = [
{
icon: ArrowBigRightDashIcon,
@ -19,7 +28,7 @@ const apis = [
openAccess: true,
},
{
icon:RssIcon,
icon: RssIcon,
apiroute: "/api/home/lt",
name: "Get the news feed of LT",
content:
@ -40,7 +49,8 @@ const apis = [
icon: BotMessageSquareIcon,
apiroute: "/api/ai/chat/[slug]",
name: "A Chating API",
content: "This is for the desktop app & talk about news articles. Using Groq's free tier.",
content:
"This is for the desktop app & talk about news articles. Using Groq's free tier.",
caching: false,
openAccess: false,
},
@ -56,14 +66,15 @@ const apis = [
</script>
<template>
<div class="h-4"></div>
<div
class="justify-center align-center text-center flex flex-col"
>
<div class="justify-center align-center text-center flex flex-col">
<h1 class="text-4xl text-bold m-2">APIs</h1>
<div class="items flex flex-row flex-wrap gap-2 justify-center align-center">
<div
class="px-10 bg-gray-900/70 w-[400px] h-[300px] group rounded-xl hover:-translate-y-1 shadow-lg hover:shadow-sky-600/90 backdrop-blur-sm border border-gray-800 hover:border-sky-600/70 transition-all duration-700 justify-center align-middle flex flex-col text-left"
v-for="item in apis">
<div
class="items flex flex-row flex-wrap gap-2 justify-center align-center"
>
<div
class="px-10 bg-gray-900/70 w-[400px] h-[300px] group rounded-xl hover:-translate-y-1 shadow-lg hover:shadow-sky-600/90 backdrop-blur-sm border border-gray-800 hover:border-sky-600/70 transition-all duration-700 justify-center align-middle flex flex-col text-left"
v-for="item in apis"
>
<component
:is="item.icon"
class="w-8 h-8 text-white group-hover:text-sky-500 transition-colors duration-300"
@ -72,14 +83,28 @@ const apis = [
<h2>API: {{ item.apiroute }}</h2>
<p class="text-sm">{{ item.content || "N/A" }}</p>
<div class="gap-0 m-1">
<div class="text-md flex flex-row gap-2 text-center p-2">Caching:
<BadgeCheckIcon v-if="item.caching" class="w-7 h-7 p-1 group-hover:text-green-300 transition-all duration-200"/>
<BadgeXIcon v-else class="w-7 h-7 p-1 group-hover:text-red-400 transition-all duration-200"/>
</div>
<div class="text-md flex flex-row gap-2 text-center p-2">Open Access:
<BadgeCheckIcon v-if="item.caching" class="w-7 h-7 p-1 group-hover:text-green-300 transition-all duration-200"/>
<BadgeXIcon v-else class="w-7 h-7 p-1 group-hover:text-red-400 transition-all duration-200"/>
</div>
<div class="text-md flex flex-row gap-2 text-center p-2">
Caching:
<BadgeCheckIcon
v-if="item.caching"
class="w-7 h-7 p-1 group-hover:text-green-300 transition-all duration-200"
/>
<BadgeXIcon
v-else
class="w-7 h-7 p-1 group-hover:text-red-400 transition-all duration-200"
/>
</div>
<div class="text-md flex flex-row gap-2 text-center p-2">
Open Access:
<BadgeCheckIcon
v-if="item.caching"
class="w-7 h-7 p-1 group-hover:text-green-300 transition-all duration-200"
/>
<BadgeXIcon
v-else
class="w-7 h-7 p-1 group-hover:text-red-400 transition-all duration-200"
/>
</div>
</div>
</div>
</div>