feat: update footer link formatting and add shadcn-nuxt integration

- Refactored footer.vue to improve link formatting.
- Updated nuxt.config.ts to include shadcn-nuxt and added necessary HTML attributes and meta tags for SEO.
- Added new dependencies in package.json for class-variance-authority, clsx, lucide-vue-next, reka-ui, shadcn-nuxt, tailwind-merge, and tailwindcss-animate.
- Cleaned up unused template tags in headlines.vue, index.vue, and news/[provider]/[slug].vue.
- Simplified sources.vue template structure.
- Improved login.vue styles for better animation.
- Enhanced google.ts API handler for better error handling and code clarity.
- Updated find/newsOrg.ts to ensure consistent code style.
- Added CSS variables and improved Tailwind configuration in main.css and tailwind.config.js.
- Created components.json for shadcn integration and added new UI components (Alert, Button, Progress) with respective styles and variants.
- Implemented utility functions in utils.ts for class name merging and value updating.

pages/app/headlines.vue

@@ -1,3 +1 @@
-<template>
-    
-</template>
+<template></template>

pages/app/hot/index.vue

@@ -1,38 +1,64 @@
 <script lang="ts" setup>
 const ffeed = ref();
-const ass = ['健康2.0', '中天', 'TVBS', '香港01', "ETtoday"];
+const ass = ["健康2.0", "中天", "TVBS", "香港01", "ETtoday"];
+import Button from "~/components/ui/button/Button.vue";
 
 try {
-    const { data } = await useFetch('/api/rss/google')
-    ffeed.value = data.value
-  } catch (error) {
-    console.error('Error:', error)
-  }
-
+  const { data } = await useFetch("/api/rss/google");
+  ffeed.value = data.value;
+} catch (error) {
+  console.error("Error:", error);
+}
 </script>
 
 <template>
-    <div v-for="item in ffeed" class="justify-center align-center text-center p-4 border border-white rounded-lg m-4">
-        <span class="text-xl text-bold text-gray-100">{{ item.title }}
-            <span v-if="ass.some((app) => 
-            item.title.includes(app)
-            )" 
-              class="text-red-500 text-sm">
-          &nbsp;- 疑似來自有中資背景公司
-        </span>
-        </span>
-        <h4 class="text-gray-500 text-sm">{{ new Date(item.date).toLocaleString() }}</h4>
-        類似新聞:
-        <div v-for="itit in item.content">
-            <ul v-for="ititit in itit">
-                <li v-if="ititit.content?.[0].content[0] !== item.title">
-                    &nbsp; - <a :href="ititit.content?.[0].attributes?.href">{{ ititit.content?.[0].content[0] }}</a> - <a :href="'/find/newsOrg?name=' + ititit.content?.[2].content[0]">{{ ititit.content?.[2].content[0] }}</a>
-                    <span v-if="ass.some((app) => ititit.content?.[2].content[0].includes(app))" 
-                        class="text-red-500 text-sm">
-                    &nbsp;- 疑似來自有中資背景公司
-                </span>
-                </li>
-            </ul>
-        </div>
+  <div
+    v-for="item in ffeed"
+    class="justify-center align-center text-center p-4 border border-white rounded-lg m-4"
+  >
+    <span class="text-xl text-bold text-gray-100"
+      >{{ item.title }}
+      <span
+        v-if="ass.some((app) => item.title.includes(app))"
+        class="text-red-500 text-sm"
+      >
+        &nbsp;- 疑似來自有中資背景公司
+      </span>
+    </span>
+    <h4 class="text-gray-500 text-sm">
+      {{ new Date(item.date).toLocaleString() }}
+    </h4>
+    <div class="flex justify-center gap-2 mt-1">
+      <NuxtLink :to="item.link">
+        <Button>文章</Button>
+      </NuxtLink>
+      <NuxtLink>
+        <Button>關於媒體</Button>
+      </NuxtLink>
     </div>
-</template>
+    <br />
+    類似新聞:
+    <div v-for="itit in item.content">
+      <ul v-for="ititit in itit">
+        <li v-if="ititit.content?.[0].content[0] !== item.title">
+          &nbsp; -
+          <a :href="ititit.content?.[0].attributes?.href">{{
+            ititit.content?.[0].content[0]
+          }}</a>
+          -
+          <a :href="'/find/newsOrg?name=' + ititit.content?.[2].content[0]">{{
+            ititit.content?.[2].content[0]
+          }}</a>
+          <span
+            v-if="
+              ass.some((app) => ititit.content?.[2].content[0].includes(app))
+            "
+            class="text-red-500 text-sm"
+          >
+            &nbsp;- 疑似來自有中資背景公司
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

pages/app/index.vue

@@ -1,3 +1,3 @@
 <template>
-    <h1>The "For you page"</h1>
-</template>
+  <h1>The "For you page"</h1>
+</template>

pages/app/news/[provider]/[slug].vue

@@ -4,6 +4,4 @@ const route = useRoute();
 const provider = route.params.provider;
 const slug = route.params.slug;
 </script>
-<template>
-    
-</template>
+<template></template>