Added readable mode for article content

vue/src/assets/main.css

@@ -14,7 +14,17 @@ a,
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }
-
+.message {
+  background-color: #3498db;
+  color: white;
+  padding: 10px;
+  border-radius: 4px;
+  position: fixed;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+}
 @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);

vue/src/components/RssFeeds.vue

@@ -1,10 +1,55 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import axios from 'axios';
+import { Readability } from '@mozilla/readability';
 
+const showMessage = ref(false)
 const feeds = ref([]);
+const message = ref('')
 const buttonText = 'Sync'
 
+async function getReadable(feed, index) {
+  try {
+    const response = await axios.post("feeds/read", {
+      url: feed.url
+    },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'user-token': localStorage.getItem("user-token")
+        }
+      })
+
+    const doc = new DOMParser().parseFromString(response.data.content, 'text/html');
+    const article = new Readability(doc).parse();
+    feeds.value[index].content = article.content;
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    showMessageForXSeconds(error, 5)
+  }
+  // try {
+  //   const response = await fetch(feed.url);
+  //   const html = await response.text();
+  //   const doc = new DOMParser().parseFromString(html, 'text/html');
+  //   const article = new Readability(doc).parse();
+  //   feeds.value[index].content = article.content;
+  // } catch (error) {
+  //   console.error(error);
+  //   showMessageForXSeconds(error, 5);
+  // }
+}
+
+function showMessageForXSeconds(text, seconds) {
+  message.value = text;
+  showMessage.value = true;
+
+  // Set a timeout to hide the message after x seconds
+  setTimeout(() => {
+    showMessage.value = false;
+    message.value = '';
+  }, seconds * 1000); // Convert seconds to milliseconds
+}
+
 const fetchData = async () => {
   const user_id = localStorage.getItem("user-id")
   try {
@@ -16,14 +61,15 @@ const fetchData = async () => {
     });
     feeds.value = response.data.feeds[0].items;
   } catch (error) {
-    console.error('Error fetching data:', error);
+    console.error('Error fetching data:', error)
+    showMessageForXSeconds(error, 5)
   }
 };
 
 async function sync() {
   try {
-    const repsponse = await axios.post('feeds/sync', {
-      user_id: 1 //localStorage.getItem("user-id")
+    const response = await axios.post('feeds/sync', {
+      user_id: parseInt(localStorage.getItem("user-id"))
     },
       {
         headers: {
@@ -32,8 +78,12 @@ async function sync() {
         }
       })
 
+    if (response.status == 200) {
+      showMessageForXSeconds('Sync successful.', 5)
+    }
   } catch (error) {
     console.error('Error sync', error)
+    showMessageForXSeconds(error, 5)
   }
 }
 
@@ -46,11 +96,14 @@ onMounted(() => {
 <template>
   <div>
     <h1>Feeds</h1> <button @click="sync">{{ buttonText }}</button>
+    <div v-if="showMessage" class="message">{{ message }}</div>
     <div id='aricle'>
       <p v-if="feeds.length == 0">No unread articles.</p>
-      <template v-for="feed in feeds">
-        <h2>{{ feed.title }}</h2>
-        <p v-html='feed.content'></p>
+      <template v-for="(feed, index) in feeds">
+        <div v-bind:id="'article_' + index">
+          <h2 @click="getReadable(feed, index)">{{ feed.title }}</h2>
+          <p v-html='feed.content'></p>
+        </div>
       </template>
     </div>
   </div>