claude rework

vue/src/components/RssFeeds.vue

@@ -11,7 +11,7 @@ const showModal = ref(false)
 
 async function getReadable(feed, index) {
   try {
-    const response = await axios.post("feeds/read", {
+    const response = await axios.post("/api/v1/article/read", {
       url: feed.url
     },
       {
@@ -22,6 +22,12 @@ async function getReadable(feed, index) {
       })
 
     const doc = new DOMParser().parseFromString(response.data.content, 'text/html');
+    // Scraped articles often contain image/link URLs that are relative to the
+    // source site. A <base> tag makes the browser (and Readability) resolve
+    // them against the article's original URL instead of our own origin.
+    const base = doc.createElement('base');
+    base.setAttribute('href', feed.url);
+    doc.head.prepend(base);
     const article = new Readability(doc).parse();
     feeds.value[index].content = article.content;
   } catch (error) {
@@ -32,7 +38,7 @@ async function getReadable(feed, index) {
 
 async function markRead(id) {
   try {
-    const response = await axios.put("feeds/read/" + id,
+    const response = await axios.put("/api/v1/article/read/" + id,
       null,
       {
         headers: {
@@ -61,14 +67,14 @@ function showMessageForXSeconds(text, seconds) {
 const fetchData = async () => {
   const user_id = localStorage.getItem("user-id")
   try {
-    const response = await axios.get("feeds/get/" + user_id, {
+    const response = await axios.get("/api/v1/article/get/" + user_id, {
       headers: {
         'Content-Type': 'application/json',
         'user-token': localStorage.getItem("user-token")
       }
     });
     response.data.feeds.forEach(feed => {
-      feeds.value.push(...feed.items);
+      feed.items.forEach(item => feeds.value.push({ ...item, feedTitle: feed.title }));
     });
     await nextTick();
     setupIntersectionObserver();
@@ -80,7 +86,7 @@ const fetchData = async () => {
 
 async function sync() {
   try {
-    const response = await axios.post('feeds/sync', {
+    const response = await axios.post('/api/v1/article/sync', {
       user_id: parseInt(localStorage.getItem("user-id"))
     },
       {
@@ -119,21 +125,15 @@ function setupIntersectionObserver() {
 
 async function handleIntersection(entries) {
   // The callback function for when the target element enters or exits the viewport
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      console.log('Element is in sight');
-    } else if (initialLoad === true) {
-      console.log(entry.isIntersecting)
-      // Element is out of sight
-      if (entry.isVisible === false && entry.boundingClientRect.y < 0) {
-        console.log('Element is out of sight ' + entry.intersectionRatio);
-        //console.log(feeds.value[entry.target.id])
-        markRead(feeds.value[entry.target.id].id).await
-        removeFeed(entry.target.id)
-        document.getElementById(0).scrollIntoView()
-      }
+  for (const entry of entries) {
+    // An article that has scrolled above the viewport (not intersecting,
+    // bounding box above the top edge) has been read — mark it and remove it.
+    if (initialLoad === true && !entry.isIntersecting && entry.boundingClientRect.y < 0) {
+      await markRead(feeds.value[entry.target.id].id)
+      removeFeed(entry.target.id)
+      document.getElementById(0)?.scrollIntoView()
     }
-  })
+  }
 }
 
 function removeFeed(index) {
@@ -142,9 +142,9 @@ function removeFeed(index) {
 }
 
 let initialLoad = false
-onMounted(() => {
+onMounted(async () => {
   initialLoad = false
-  fetchData().await
+  await fetchData()
   setTimeout(function () {
     initialLoad = true
     console.log('set to true')
@@ -153,20 +153,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <nav>
-        <p @click="sync">Sync</p>
-        <!-- <p @click="updateShow(true)">Add RSS</p> -->
-        <p @click="showModal = true">Add RSS</p>
-        <!-- <RouterLink to="/">Home</RouterLink> -->
-        <!-- <RouterLink to="/about">About</RouterLink> -->
-        <!-- <RouterLink to="/feeds">Feeds</RouterLink> -->
-      </nav>
-    </div>
-  </header>
+  <div class="feed-actions">
+    <p @click="sync">Sync</p>
+    <p @click="showModal = true">Add RSS</p>
+  </div>
   <Teleport to="body">
-    <!-- use the modal component, pass in the prop -->
     <modal :show="showModal" @close="showModal = false">
       <template #header>
         <h3>Add RSS Feed</h3>
@@ -174,12 +165,13 @@ onMounted(() => {
     </modal>
   </Teleport>
   <div>
-    <h1>Feeds</h1> <!-- <button @click="sync">{{ buttonText }}</button> -->
+    <h1>Feeds</h1>
     <div v-if="showMessage" class="message">{{ message }}</div>
     <div id='article' class='article'>
       <p v-if="feeds.length == 0">No unread articles.</p>
       <template v-for="(   feed, index   ) in    feeds   ">
         <div v-bind:id="index" class="observe">
+          <p class="feed-source">{{ feed.feedTitle }}</p>
           <h2 @click="getReadable(feed, index)" class="feed-title">{{ feed.title }}</h2>
           <h3>{{ feed.timestamp }}</h3>
           <p class="feed-content" v-html='feed.content'></p>