From 2f20d4909126cbba07131c9edac9a08d0d007c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Tue, 6 May 2025 19:31:53 +0800
Subject: [PATCH] feat: integrate animate.css for animations, enhance layout,
 and improve localization files

---
 app.vue                                  |   4 +-
 bun.lock                                 |   3 +
 components/footer.vue                    |  10 +-
 components/navigation.vue                | 123 ++++++++++++++---------
 i18n/i18n.config.ts                      |   4 +
 i18n/locales/de.json                     |   6 +-
 i18n/locales/en.json                     |  21 ++--
 i18n/locales/i18n.config.ts              |   4 -
 i18n/locales/zh-tw.json                  |  21 ++--
 layouts/default.vue                      |  22 ++--
 layouts/newsorg.vue                      |  22 ++--
 nuxt.config.ts                           |  43 ++++----
 package.json                             |   3 +-
 pages/home.vue                           |  10 +-
 pages/newsOrgAbout/[slug].vue            |  56 +++++++----
 server/api/getData/fetchNewsOrgInfo.ts   |  27 +++--
 server/api/objectstorage/files/[slug].ts |  10 +-
 server/components/s3.ts                  |   2 +-
 server/routes/feed.json.ts               |   4 +-
 styles/main.css                          |  14 +--
 tailwind.config.js                       |  15 ++-
 21 files changed, 252 insertions(+), 172 deletions(-)
 create mode 100644 i18n/i18n.config.ts
 delete mode 100644 i18n/locales/i18n.config.ts

diff --git a/app.vue b/app.vue
index 1bce92f..75c910a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import "bootstrap-icons/font/bootstrap-icons.css";
+import "animate.css";
 const { t } = useI18n();
-
 </script>
 <template>
   <!--A yhw_tw project-->
   <NuxtLayout>
-    <NuxtPage/>
+    <NuxtPage />
   </NuxtLayout>
 </template>
diff --git a/bun.lock b/bun.lock
index e0dcac5..cff7a70 100644
--- a/bun.lock
+++ b/bun.lock
@@ -12,6 +12,7 @@
         "@nuxtjs/tailwindcss": "6.14.0",
         "@tailwindcss/vite": "^4.1.5",
         "@uploadthing/nuxt": "^7.1.7",
+        "animate.css": "^4.1.1",
         "bootstrap-icons": "^1.12.1",
         "gsap": "^3.13.0",
         "nuxt": "^3.17.2",
@@ -605,6 +606,8 @@
 
     "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
 
+    "animate.css": ["animate.css@4.1.1", "", {}, "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="],
+
     "ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
diff --git a/components/footer.vue b/components/footer.vue
index 27e0f69..68a8ed0 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -1,3 +1,9 @@
 <template>
-    
-</template>
\ No newline at end of file
+  <div
+    class="flex flex-row justify-center align-center text-center absolute inset-x-0"
+  >
+    <span class="text-xs m-4"
+      >{{ new Date().getFullYear() }} &copy; 吳元皓</span
+    >
+  </div>
+</template>
diff --git a/components/navigation.vue b/components/navigation.vue
index 1077dfb..c0be7e6 100644
--- a/components/navigation.vue
+++ b/components/navigation.vue
@@ -1,62 +1,91 @@
 <script setup lang="ts">
-import { gsap } from 'gsap';
-import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
-gsap.registerPlugin(ScrambleTextPlugin) 
+import { gsap } from "gsap";
+import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
+gsap.registerPlugin(ScrambleTextPlugin);
 
 const { t, locale, locales } = useI18n();
-const switchLocalePath = useSwitchLocalePath()
+const switchLocalePath = useSwitchLocalePath();
 
 const dropdownOpen = ref(false);
 const title = ref(null);
 
 const availableLocales = computed(() => {
-  return locales.value.filter(i => i.code !== locale.value)
-})
+  return locales.value.filter((i) => i.code !== locale.value);
+});
 
 const toggleDropdown = () => {
-    dropdownOpen.value = !dropdownOpen.value;
-}
+  dropdownOpen.value = !dropdownOpen.value;
+};
 
 const runAnimation = () => {
-    gsap.to(title.value, {
-  duration: 1, 
-  scrambleText: "BlindSpec",
-});
-}
+  gsap.to(title.value, {
+    duration: 1,
+    scrambleText: "BlindSpec",
+  });
+};
 </script>
 <template>
-    <!--Spent too much time trying to set a Navbar....-->
-    <div class="fixed top-0 inset-x-0 bg-[#81611a]/70 backdrop-blur-sm h-[55px] flex align-center flex-row text-white pl-4 pt-2 gap-x-5 justify-between z-50 rounded-3xl m-2">
-        <div class="text-3xl text-bold">
-            <!--Use mouseenter instead of hover-->
-            <a href="/" @mouseenter="runAnimation" ref="title">
-                BlindSpec
-            </a>
-        </div>
-        <div class="text-[0.9em] text-center align-center">
-            <a href="/" class="hover:text-blue-500 cursor-pointer transiton-all duration-100">{{ t("nav.home") }}</a>
-            &nbsp;
-            <a href="/dailybriefing" class="hover:text-blue-500 cursor-pointer transiton-all duration-100">{{ t("nav.dailybriefing") }}</a>
-        </div>
-        <div class="relative">
-            <button @click="toggleDropdown" 
-                    class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100">
-                <span>{{ locale }}</span>
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
-                          d="M19 9l-7 7-7-7"/>
-                </svg>
-            </button>
-            
-            <div v-if="dropdownOpen" 
-                 class="absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
-                <a v-for="loc in availableLocales" 
-                   :key="loc.code"
-                   :href="switchLocalePath(loc.code)"
-                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
-                    {{ loc.name || loc.code }}
-                </a>
-            </div>
-        </div>
+  <!--Spent too much time trying to set a Navbar....-->
+  <div
+    class="fixed top-0 inset-x-0 bg-[#81611a]/70 backdrop-blur-sm h-[55px] flex align-center flex-row text-white pl-4 pt-2 gap-x-5 justify-between z-50 rounded-3xl m-2"
+  >
+    <div class="text-3xl text-bold">
+      <!--Use mouseenter instead of hover-->
+      <a href="/" @mouseenter="runAnimation" ref="title"> BlindSpec </a>
     </div>
-</template>
\ No newline at end of file
+    <div class="text-[0.9em] text-center align-center">
+      <a
+        href="/"
+        class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
+        >{{ t("nav.home") }}</a
+      >
+      &nbsp;
+      <a
+        href="/dailybriefing"
+        class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
+        >{{ t("nav.dailybriefing") }}</a
+      >
+    </div>
+    <div class="relative">
+      <button
+        @click="toggleDropdown"
+        class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100"
+      >
+        <span>{{ locale }}</span>
+        <svg
+          class="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <Transition
+        enter-active-class="animate__animated animate__fadeInDown animate__faster"
+        leave-active-class="animate__animated animate__fadeOutUp animate__faster"
+      >
+        <div
+          v-if="dropdownOpen"
+          class="absolute top-full right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1"
+        >
+          <a
+            v-for="loc in availableLocales"
+            :key="loc.code"
+            :href="switchLocalePath(loc.code)"
+            v-on:click="dropdownOpen = false"
+            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-all duration-100"
+          >
+            {{ loc.name || loc.code }}
+          </a>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
diff --git a/i18n/i18n.config.ts b/i18n/i18n.config.ts
new file mode 100644
index 0000000..26ca22f
--- /dev/null
+++ b/i18n/i18n.config.ts
@@ -0,0 +1,4 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: "en",
+}));
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 205fd3d..baafd17 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -1,4 +1,4 @@
 {
-    "dailybriefing": "",
-    "Welcome": ""
-}
\ No newline at end of file
+  "dailybriefing": "",
+  "Welcome": ""
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7969a9a..17981df 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,11 +1,12 @@
 {
-    "core": {
-        "sitename": "BlindSpec"
-    },
-    "nav": {
-        "home": "Home"
-    },
-    "dailybriefing": "Daily Briefing",
-    "Welcome": "Welcome",
-    "loading": "Loading..."
-}
\ No newline at end of file
+  "core": {
+    "sitename": "BlindSpec"
+  },
+  "nav": {
+    "home": "Home",
+    "dailybriefing": "Daily Briefing"
+  },
+  "dailybriefing": "Daily Briefing",
+  "Welcome": "Welcome",
+  "loading": "Loading..."
+}
diff --git a/i18n/locales/i18n.config.ts b/i18n/locales/i18n.config.ts
deleted file mode 100644
index 7d8fbf9..0000000
--- a/i18n/locales/i18n.config.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default defineI18nConfig(() => ({
-    legacy: false,
-    locale: 'en',
-  }))
\ No newline at end of file
diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json
index 9b49287..c0aaf52 100644
--- a/i18n/locales/zh-tw.json
+++ b/i18n/locales/zh-tw.json
@@ -1,11 +1,12 @@
 {
-    "core": {
-        "sitename": "新聞盲點平台"
-    },
-    "nav": {
-        "home": "首頁"
-    },
-    "dailybriefing": "今日報導",
-    "Welcome": "歡迎",
-    "loading": "載入中..."
-}
\ No newline at end of file
+  "core": {
+    "sitename": "新聞盲點平台"
+  },
+  "nav": {
+    "home": "首頁",
+    "dailybriefing": "今日報導"
+  },
+  "dailybriefing": "今日報導",
+  "Welcome": "歡迎",
+  "loading": "載入中..."
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 0d2fa0e..3be07b1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import Navigation from '~/components/navigation.vue';
+import Navigation from "~/components/navigation.vue";
 import Footer from "~/components/footer.vue";
 </script>
 <template>
-    <nav>
-        <Navigation/>
-    </nav>
-    <main class="pt-[60px]">
-        <slot/>
-    </main>
-    <footer>
-        <Footer/>
-    </footer>
-</template>
\ No newline at end of file
+  <nav>
+    <Navigation />
+  </nav>
+  <main class="pt-[60px]">
+    <slot />
+  </main>
+  <footer>
+    <Footer />
+  </footer>
+</template>
diff --git a/layouts/newsorg.vue b/layouts/newsorg.vue
index 0d2fa0e..3be07b1 100644
--- a/layouts/newsorg.vue
+++ b/layouts/newsorg.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import Navigation from '~/components/navigation.vue';
+import Navigation from "~/components/navigation.vue";
 import Footer from "~/components/footer.vue";
 </script>
 <template>
-    <nav>
-        <Navigation/>
-    </nav>
-    <main class="pt-[60px]">
-        <slot/>
-    </main>
-    <footer>
-        <Footer/>
-    </footer>
-</template>
\ No newline at end of file
+  <nav>
+    <Navigation />
+  </nav>
+  <main class="pt-[60px]">
+    <slot />
+  </main>
+  <footer>
+    <Footer />
+  </footer>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7facdd4..5d2e862 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,19 +1,25 @@
 export default defineNuxtConfig({
-  compatibilityDate: '2025-05-06',
+  compatibilityDate: "2025-05-06",
   devtools: { enabled: true },
   routeRules: {
-    "/": { redirect: "/home"},
-    "/zh_tw": { redirect: "/zh_tw/home"},
-  } ,     
-  css: ['~/styles/main.css'],
-  modules: ['@nuxt/image', '@nuxtjs/robots', '@nuxtjs/seo', '@nuxtjs/i18n', "@nuxtjs/tailwindcss"],
+    "/": { redirect: "/home" },
+    "/zh_tw": { redirect: "/zh_tw/home" },
+  },
+  css: ["~/styles/main.css"],
+  modules: [
+    "@nuxt/image",
+    "@nuxtjs/robots",
+    "@nuxtjs/seo",
+    "@nuxtjs/i18n",
+    "@nuxtjs/tailwindcss",
+  ],
   i18n: {
-    defaultLocale: 'en',
-    vueI18n: './i18n.config.ts',
+    defaultLocale: "en",
+    vueI18n: "./i18n.config.ts",
     locales: [
-      { code: 'en', name: 'English', file: 'en.json' },
-      { code: 'zh_tw', name: 'Chinese Tradional', file: 'zh-tw.json' },
-    ]
+      { code: "en", name: "English", file: "en.json" },
+      { code: "zh_tw", name: "Chinese Tradional", file: "zh-tw.json" },
+    ],
   },
   site: {
     url: "https://news.yuanhau.com",
@@ -22,20 +28,23 @@ export default defineNuxtConfig({
   },
   app: {
     head: {
-      title: "", 
+      title: "",
       meta: [
         { "http-equiv": "X-UA-Compatible", content: "IE=edge" },
         { charset: "utf-8" },
         { name: "viewport", content: "width=device-width, initial-scale=1" },
         { name: "og:author", content: "@hpware on GitHub" },
-        { name: "og:author:email", content: "public+newscompareauthor@yuanhau.com" },
-      ]
-    }
+        {
+          name: "og:author:email",
+          content: "public+newscompareauthor@yuanhau.com",
+        },
+      ],
+    },
   },
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
-    },// Add your content paths here
+    }, // Add your content paths here
   },
-})
\ No newline at end of file
+});
diff --git a/package.json b/package.json
index f293603..adb7986 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@nuxtjs/tailwindcss": "6.14.0",
     "@tailwindcss/vite": "^4.1.5",
     "@uploadthing/nuxt": "^7.1.7",
+    "animate.css": "^4.1.1",
     "bootstrap-icons": "^1.12.1",
     "gsap": "^3.13.0",
     "nuxt": "^3.17.2",
@@ -33,4 +34,4 @@
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/home.vue b/pages/home.vue
index 8676ac0..cf68daa 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -1,7 +1,5 @@
 <template>
-    <div>
-        <h1 class="text-3xl font-bold text-center">
-            嗨！
-        </h1>
-    </div>
-</template>
\ No newline at end of file
+  <div>
+    <h1 class="text-3xl font-bold text-center">嗨！</h1>
+  </div>
+</template>
diff --git a/pages/newsOrgAbout/[slug].vue b/pages/newsOrgAbout/[slug].vue
index dff4cf9..b7fe7a6 100644
--- a/pages/newsOrgAbout/[slug].vue
+++ b/pages/newsOrgAbout/[slug].vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
-import { gsap } from 'gsap';
-import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
-gsap.registerPlugin(ScrambleTextPlugin) 
+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(); 
+const { t, locale } = useI18n();
 
 definePageMeta({
   layout: "newsorg",
 });
 
-const { data: fetchNewsOrgInfo, pending, error } = useFetch("/api/getData/fetchNewsOrgInfo", {
+const {
+  data: fetchNewsOrgInfo,
+  pending,
+  error,
+} = useFetch("/api/getData/fetchNewsOrgInfo", {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
@@ -32,10 +36,10 @@ useSeoMeta({
 const orgNameAnimation = ref(null);
 
 onMounted(() => {
-    gsap.to(orgNameAnimation.value, {
-  duration: 1, 
-  scrambleText: fetchNewsOrgInfo.value?.title,
-});
+  gsap.to(orgNameAnimation.value, {
+    duration: 1,
+    scrambleText: fetchNewsOrgInfo.value?.title,
+  });
 });
 
 // Import Icons
@@ -44,17 +48,33 @@ import { GlobeAltIcon } from "@heroicons/vue/24/outline";
 <template>
   <div>
     <div class="text-center align-center justify-center">
-      <div class="flex flex-row bg-[#AAACAAFF] rounded-3xl p-3 gap-3 m-3">
-        <NuxtImg :src="fetchNewsOrgInfo?.logoUrl" class="w-48 h-48 rounded-[10px]"/>
+      <div
+        class="flex flex-row bg-[#AAACAAFF] 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">{{ fetchNewsOrgInfo?.title }}</h1>
-          <span class="text-ms m-1 mt-5 text-left text-wrap">{{ fetchNewsOrgInfo?.description }}</span>
+          <h1 class="text-4xl font-bold m-3 text-left">
+            {{ 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
+        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>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/server/api/getData/fetchNewsOrgInfo.ts b/server/api/getData/fetchNewsOrgInfo.ts
index 76fbe63..e23374a 100644
--- a/server/api/getData/fetchNewsOrgInfo.ts
+++ b/server/api/getData/fetchNewsOrgInfo.ts
@@ -1,14 +1,13 @@
-export default defineEventHandler(async(event) => {
-    const body = await readBody(event); 
-        return {
-            body: body,
-            title: "News Org 1",
-            slug: "taisounds",
-            website: "https://www.taisounds.com.tw",
-            description: "wah wah wah wah wah wah I dont fucking care",
-            facebook: "https://www.facebook.com/taisounds",
-            logoUrl: "https://cdn.discordapp.com/avatars/918723093646684180/4eecc27ac05ee8a701fa167808610c7a.jpg",
-        }
-})
-
-    
\ No newline at end of file
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  return {
+    body: body,
+    title: "News Org 1",
+    slug: "taisounds",
+    website: "https://www.taisounds.com.tw",
+    description: "wah wah wah wah wah wah I dont fucking care",
+    facebook: "https://www.facebook.com/taisounds",
+    logoUrl:
+      "https://cdn.discordapp.com/avatars/918723093646684180/4eecc27ac05ee8a701fa167808610c7a.jpg",
+  };
+});
diff --git a/server/api/objectstorage/files/[slug].ts b/server/api/objectstorage/files/[slug].ts
index 49295da..edcd27f 100644
--- a/server/api/objectstorage/files/[slug].ts
+++ b/server/api/objectstorage/files/[slug].ts
@@ -1,6 +1,10 @@
 import s3 from "~/server/components/s3";
 
 export default defineEventHandler(async (event) => {
-    const slug = getRouterParam(event, "slug");
-    return sendRedirect(event, `${process.env.S3_ENDPOINT}/${process.env.S3_BUCKETNAME}/${slug}`, 302);
-})
\ No newline at end of file
+  const slug = getRouterParam(event, "slug");
+  return sendRedirect(
+    event,
+    `${process.env.S3_ENDPOINT}/${process.env.S3_BUCKETNAME}/${slug}`,
+    302,
+  );
+});
diff --git a/server/components/s3.ts b/server/components/s3.ts
index 460f5af..88f9dd2 100644
--- a/server/components/s3.ts
+++ b/server/components/s3.ts
@@ -8,4 +8,4 @@ const s3config = new S3Client({
   endpoint: process.env.S3_ENDPOINT,
 });
 
-export default s3config;
\ No newline at end of file
+export default s3config;
diff --git a/server/routes/feed.json.ts b/server/routes/feed.json.ts
index d1c0e8d..0d6b1b1 100644
--- a/server/routes/feed.json.ts
+++ b/server/routes/feed.json.ts
@@ -1,3 +1 @@
-export default defineEventHandler(async () => {
-    
-});
+export default defineEventHandler(async () => {});
diff --git a/styles/main.css b/styles/main.css
index b098d33..ad8e690 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -3,10 +3,10 @@
 @tailwind utilities;
 
 @layer base {
-    html {
-      @apply bg-black;
-    }
-    body {
-      @apply bg-black m-0 p-0 min-h-screen text-white;
-    }
-  }
\ No newline at end of file
+  html {
+    @apply bg-black;
+  }
+  body {
+    @apply bg-black m-0 p-0 min-h-screen text-white;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index baa5128..d9e0450 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-
-}
\ No newline at end of file
+  content: [],
+  theme: {
+    extend: {
+      backgroundColor: {
+        page: "#000000",
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: true,
+  },
+};