feat: update environment setup scripts and enhance animation styles

.env.example

@@ -1,4 +1,8 @@
+# Please use .env.exmaple as an starting point. Rename it to .env and follow the instructions below to your platform.
+# If you are using Mac / Linux, run bash clone-env.sh in the terminal.
+# If you are using Windows, run ps1 clone-env.ps1 in the terminal.
 
+# This is the default .env file.
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_BUCKETNAME=
@@ -10,3 +14,10 @@ GROQ_API_KEY=
 
 NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 NUXT_CLERK_SECRET_KEY=
+
+# SCRAPING
+POSTGRES_DB=""
+POSTGRES_USER=""
+POSTGRES_PASSWORD=""
+POSTGRES_HOST=""
+POSTGRES_PORT=""

clone-env.ps1

@@ -0,0 +1 @@
+Copy-Item "./.env" -Destination "./scraping/.env"

clone-env.sh

@@ -0,0 +1 @@
+cp ./env scraping/.env

components/navigation.vue

@@ -73,8 +73,3 @@ const toggleDropdown = () => {
     </div>
   </div>
 </template>
-<style scoped>
-.animate_fastest {
-  --animate-duration: 0.2s;
-}
-</style>

pages/app/index.vue

@@ -82,13 +82,14 @@ const showLogin = () => {
 }
 const openWindow = (windowName?: string) => {
   console.log(windowName);
+  menuOpen.value = false;
 }
 // menus
 const menuItems = [
   { name: "Hot News", windowName: "hotnews"} ,
   { name: "News", windowName: "news"},
   { name: "Sources", windowName: "sources"},
-  { name: 'About This Website', },
+  { name: 'About This Website', windowName: "about"},
   { name: 'Settings', windowName: "settings"},
   { name: 'Leave', windowName: "leave"},
 ]
@@ -113,7 +114,11 @@ const toggleLangMenu = () => {
     <div class="text-gray-400">{{ currentDate }}</div>
   </div>
   <div class="w-full h-[2.5em]"></div>
-  <div class="m-2 p-2 bg-gray-800 shadow-lg w-fit rounded-[10px]" v-if="menuOpen">
+  <Transition
+    enter-active-class="animate__animated animate__fadeInDown animate_fast03"
+    leave-active-class="animate__animated animate__fadeOutUp animate_fast03"
+  >
+    <div class="m-2 p-2 bg-gray-800 shadow-lg w-fit rounded-[10px]" v-if="menuOpen">
     <div v-for="item in menuItems" :key="item.name" class="">
       <button @click="openWindow(item.windowName)" class="flex flex-row items-center gap-x-2 text-gray-400 hover:text-gray-600 transition-all duration-100">
         <span>{{ item.name }}</span>
@@ -121,6 +126,7 @@ const toggleLangMenu = () => {
       </button>
     </div>
   </div>
+  </Transition>
   <div
     class="flex flex-col justify-center align-center text-center absolute w-full h-screen inset-x-0 inset-y-0 z-[-1]"
     id="desktop"

styles/main.css

@@ -13,6 +13,12 @@
   body {
     font-family: "Noto Sans TC Variable", "Fira Sans", sans-serif;
   }
+  .animate_fastest {
+    --animate-duration: 0.1s;
+  }
+  .animate_fast03 {
+    --animate-duration: 0.3s;
+  }
   :root {
     --background: bg-black;
     --foreground: 0 0% 98%;