feat: add news organization about page with dynamic content fetching and animation

pages/app/newsOrgAbout/[slug].vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { gsap } from "gsap";
+import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
+gsap.registerPlugin(ScrambleTextPlugin);
+const loading = ref(true);
+const route = useRoute();
+const slug = route.params.slug;
+const { t, locale } = useI18n();
+
+definePageMeta({
+  layout: "newsorg",
+});
+
+const {
+  data: fetchNewsOrgInfo,
+  pending,
+  error,
+} = useFetch("/api/getData/fetchNewsOrgInfo", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: {
+    lang: locale,
+    requestPage: slug,
+  },
+});
+
+const {
+  data: fetchOtherData,
+  pending: fetchOtherDataPending,
+  error: fetchOtherDataError,
+} = useFetch("/api/getData/fetchSidebarData", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: {
+    lang: locale,
+  },
+});
+
+watchEffect(() => {
+  loading.value = pending.value;
+});
+useSeoMeta({
+  title: fetchNewsOrgInfo.value?.title,
+});
+
+const orgNameAnimation = ref(null);
+
+onMounted(() => {
+  gsap.to(orgNameAnimation.value, {
+    duration: 1,
+    scrambleText: fetchNewsOrgInfo.value?.title,
+  });
+});
+
+// Import Icons
+import { GlobeAltIcon } from "@heroicons/vue/24/outline";
+</script>
+<template>
+  <div class="flex flex-row flex-wrap w-full mt-2">
+    <div class="text-center align-center justify-center w-[70%]">
+      <div
+        class="flex flex-row bg-[#AAACAA61] rounded-3xl p-3 gap-3 m-3 scale-5"
+      >
+        <NuxtImg
+          :src="fetchNewsOrgInfo?.logoUrl"
+          class="w-48 h-48 rounded-[10px]"
+        />
+        <div class="flex flex-col gap-3 text-left">
+          <h1 class="text-4xl font-bold m-3 text-left" ref="orgNameAnimation">
+            {{ fetchNewsOrgInfo?.title }}
+          </h1>
+          <span class="text-ms m-1 mt-5 text-left text-wrap">{{
+            fetchNewsOrgInfo?.description
+          }}</span>
+        </div>
+      </div>
+
+      <div
+        class="gap-[3px] flex flex-row text-center align-center justify-center"
+      >
+        <a
+          :href="fetchNewsOrgInfo?.website"
+          target="_blank"
+          class="text-blue-200 hover:text-blue-300 transiton-all duration-100 flex flex-row"
+          ><GlobeAltIcon class="w-6 h-6" />網站</a
+        >
+      </div>
+    </div>
+    <div
+      class="flex flex-col gap-3 text-left justify-right align-right bg-[#AAACAA61] w-[28%] rounded-3xl p-3 mt-3 h-screen"
+    >
+      <h3 class="text-2xl mt-2s">其他媒體</h3>
+      <hr />
+      <div v-for="data in fetchOtherData" :key="data.id" class="flex flex-col">
+        <NuxtImg :src="data.image"></NuxtImg>
+        <div class="flex flex-row">
+          <h1 class="text-xl text-bold">{{ data.title }}</h1>
+          <span class="text-ms ml-2 align-center justify-center text-center">
+            (
+            <span>{{ data.lean }}</span>
+            -
+            <span
+              >文章分數:
+              <span>{{ data.score }}</span>
+            </span>
+            )
+          </span>
+        </div>
+      </div>
+      <NuxtLink class="justify-center align-center text-center">
+        <button
+          class="bg-red-500 text-black p-2 rounded-full justify-center align-center"
+        >
+          <span>查看更多</span>
+        </button>
+      </NuxtLink>
+    </div>
+  </div>
+</template>