Update requirements and enhance CSS styles

- Added new dependencies to requirements.txt: psycopg2-binary, pandas, and dotenv for improved functionality.
- Enhanced main.css by adding 'scroll-smooth' to the html element for better scrolling experience.

components/footer.vue

@@ -11,8 +11,5 @@ const localeLink = useLocalePath();
     <span class="text-xs mt-0 m-2 text-center align-center justify-center">
       Inspired by Ground.News
     </span>
-    <span class="">
-      <NuxtLink :to="localeLink('/sources')"> Sources </NuxtLink>
-    </span>
   </div>
 </template>

components/navigation.vue

@@ -30,15 +30,8 @@ const toggleDropdown = () => {
         class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
         >{{ t("nav.home") }}</NuxtLink
       >
-      &nbsp;
-      <NuxtLink
-        :to="localePath('/dailybriefing')"
-        class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
-        >{{ t("nav.dailybriefing") }}</NuxtLink
-      >
     </div>
     <div class="flex flex-row align-center justify-center text-center">
-      <div class="relative ml-0">
         <button
           @click="toggleDropdown"
           class="flex items-center space-x-1 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100 mr-5"
@@ -77,16 +70,6 @@ const toggleDropdown = () => {
             </a>
           </div>
         </Transition>
-      </div>
-      <div class="mr-2 ml-0">
-        <NuxtLink :to="localePath('/system/login')">
-          <button
-            class="text-white hover:text-[#C6C6C6] transition-all duration-150"
-          >
-            <i class="bi bi-person text-3xl"></i>
-          </button>
-        </NuxtLink>
-      </div>
     </div>
   </div>
 </template>

i18n/locales/en.json

@@ -13,7 +13,8 @@
       "miniWikipedia": "Mini Wikipedia",
       "newsComparePlatform": "news comparison platform"
     },
-    "startusing": "Let's Start!"
+    "startusing": "Let's Start!",
+    "learnmore": "Learn More",
   },
   "dailybriefing": "Daily Briefing",
   "Welcome": "Welcome",

i18n/locales/zh-tw.json

@@ -13,7 +13,8 @@
       "miniWikipedia": "米你維基百科",
       "newsComparePlatform": "新聞觀點比對平台"
     },
-    "startusing": "開始使用!"
+    "startusing": "開始使用!",
+    "learnmore": "了解更多"
   },
   "dailybriefing": "今日報導",
   "Welcome": "歡迎",

layouts/default.vue

@@ -12,4 +12,4 @@ import Footer from "~/components/footer.vue";
   <footer>
     <Footer />
   </footer>
-</template>
+</template>

pages/dailybriefing.vue

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

pages/home.vue

@@ -63,7 +63,7 @@ onMounted(() => {
       </NuxtLink>
       <NuxtLink to="#learnmore">
         <button
-          class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-full bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
+          class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
         >
           <span>{{ t("home.learnmore") }}</span>
         </button>
@@ -71,9 +71,18 @@ onMounted(() => {
       </div>
     </div>
     <div class="h-screen"></div>
-    <div class="">
-      <h1>Why?</h1>
-      <span>台灣的新聞是要痲是來自中國控制的媒體，或是來自只想獲得點閱的記者。</span>
+    <div id="learnmore"></div>
+    <div class="flex flex-row flex-wrap justify-center gap-x-10 gap-y-3">
+      <div class="flex flex-col justify-center items-center align-middle bg-[#C9C9C9]/60 rounded-xl shadow-lg p-5 m-5 w-[300px] h-[200px]">
+        <h1 class="text-8xl mt-0">🤔</h1>
+        <h2 class="text-xl font-bold">Why?</h2>
+        <span class="text-sm">台灣的新聞是要痲是來自中國控制的媒體，或是來自只想獲得點閱的記者。</span>
+      </div>
+      <div class="flex flex-col justify-center items-center align-middle bg-[#C9C9C9]/60 rounded-xl shadow-lg p-5 m-5 w-[300px] h-[200px]">
+        <h1 class="text-8xl mt-0">🧐</h1>
+        <h2 class="text-xl font-bold">How?</h2>
+        <span class="text-sm">We use web scraping to search for the latest news, and store it into a postgres database.</span>
+      </div>
     </div>
   </div>
 </template>

pages/topic/view/[slug].vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const route = useRoute();
-const slug = route.params.slug;
-const {
-  data: fetchNewsArticle,
-  pending,
-  error,
-} = await useFetch(`/api/objectstorage/files/${slug}`, {
-  method: "GET",
-});
-</script>
-<template>
-  <div class="">
-    <div class="content"></div>
-  </div>
-</template>

scraping/main.py

@@ -1,9 +1,24 @@
 # Going to love the stupid tab tab tab tab system, instead of using brances.
-import time
 import re # Regular expressions
 from urllib.request import urlopen # URL request lib.
 from bs4 import BeautifulSoup # BeautifulSoup lib.
 import json
+import psycopg2
+import pandas as pd
+import dotenv
+import os
+
+# Load environment variables from .env file
+dotenv.load_dotenv()
+
+# Connect to PostgresDB
+conn = psycopg2.connect(database=os.getenv("POSTGRES_DB"), 
+                        user=os.getenv("POSTGRES_USER"),
+                        password=os.getenv("POSTGRES_PASSWORD"),
+                        host=os.getenv("POSTGRES_HOST"),
+                        port=os.getenv("POSTGRES_PORT")
+)
+
 
 headers = {
     'User-Agent': 'NewsSceraperBot/1.0 (https://github.com/hpware/news-analyze)'

scraping/requirements.txt

@@ -1,2 +1,5 @@
 urlopen
-beautifulsoup4
+beautifulsoup4
+psycopg2-binary
+pandas
+dotenv

styles/main.css

@@ -4,7 +4,7 @@
 
 @layer base {
   html {
-    @apply bg-black;
+    @apply bg-black scroll-smooth;
   }
   body {
     @apply bg-black m-0 p-0 min-h-screen text-white;