Refactor image loading logic in createCard function

src/scripts.js

@@ -192,21 +192,25 @@ function loadSubscribedFeeds() {
     : refreshFeeds();
 }
 
-function refreshFeeds() {
-  const { subscribedFeeds } = getSubscribedFeeds();
-  const serviceWorker = navigator.serviceWorker.controller;
-  if (!serviceWorker) {
-    console.error("Service worker is not active or not controlled.");
-    return;
+async function refreshFeeds() {
+  try {
+      const { subscribedFeeds } = await getSubscribedFeeds();
+      const serviceWorker = navigator.serviceWorker.controller;
+      if (!serviceWorker) {
+          throw new Error("Service worker is not active or not controlled.");
+      }
+      feedList.subscribedFeeds = subscribedFeeds;
+      lastRefreshed = new Date().getTime();
+      serviceWorker.postMessage({
+          action: "fetchRSS",
+          feedUrls: feedList.subscribedFeeds
+      });
+  } catch (error) {
+      console.error("Failed to refresh feeds:", error);
   }
-  feedList.subscribedFeeds = subscribedFeeds;
-  lastRefreshed = new Date().getTime();
-  serviceWorker.postMessage({
-    action: "fetchRSS",
-    feedUrls: feedList.subscribedFeeds
-  });
 }
 
+
 function discoverFeeds() {
   const serviceWorker = navigator.serviceWorker.controller;
   if (serviceWorker) {
@@ -235,12 +239,13 @@ async function updateDisplayOnNewTab() {
 }
 
 function initializeMasonry() {
-  msnry = new Masonry(feedContainer, {
+ msnry = new Masonry(feedContainer, {
     itemSelector: ".card",
     columnWidth: ".card",
     gutter: 24,
-    fitWidth: true
-  });
+    transitionDuration: '0.25s', // set the transition duration
+    stagger: 30 // set the stagger delay
+});
   document.querySelectorAll(".masonry-item").forEach(item => {
     item.addEventListener("load", () => {
       msnry.layout();
@@ -250,7 +255,7 @@ function initializeMasonry() {
   });
   const debouncedLayout = debounce(() => {
     msnry.layout();
-  }, 300);
+  }, 100);
   window.addEventListener("resize", debouncedLayout);
 }
 

src/scripts/cards.js

@@ -12,12 +12,13 @@ function sanitizeHTML(html) {
 }
 
 function createImageContainer(thumbnailUrl, siteTitle) {
+    const imageProxyURL = "https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:0:300:0/g:no/plain/" + thumbnailUrl;
     const imageContainer = createElement('div', { className: 'image-container loading' });
     const cardbg = createElement('div', { className: 'card-bg' });
 
     if (thumbnailUrl) {
-        imageContainer.innerHTML = `<img data-src="${thumbnailUrl}" id="thumbnail-image" alt="${siteTitle} Thumbnail" class="thumbnail-image lazyload masonry-item">`;
-        cardbg.innerHTML = `<div class=noise></div><img data-src="${thumbnailUrl}" alt="${siteTitle} Thumbnail" class="card-bg lazyload">`;
+        imageContainer.innerHTML = `<img data-src="${imageProxyURL}" id="thumbnail-image" alt="${siteTitle} Thumbnail" class="thumbnail-image lazyload masonry-item">`;
+        cardbg.innerHTML = `<div class=noise></div><img data-src="${imageProxyURL}" alt="${siteTitle} Thumbnail" class="card-bg lazyload">`;
 
     }
 

src/scripts/modal.js

@@ -14,9 +14,9 @@ async function showReaderView(url) {
 
       const html = await response.text();
       console.log("response", html);
-      const pure = DOMPurify.sanitize(html);
+      // const pure = DOMPurify.sanitize(html);
       const parser = new DOMParser();
-      const doc = parser.parseFromString(pure, "text/html");
+      const doc = parser.parseFromString(html, "text/html");
       const reader = new Readability(doc);
       article = reader.parse();
       const item = findItemFromUrl(getFeedItems(), url);

src/styles.css

@@ -116,6 +116,7 @@ body {
   z-index: -2;
   filter: brightness(.7);
   background-repeat: no-repeat;
+  object-fit: cover;
   background-size: cover;
   transition: all .1s linear
 }
@@ -674,6 +675,13 @@ body {
   position: relative;
   border-radius: 7px
 }
+
+cite {
+  display:block;
+  text-align: center;
+  opacity:.7;
+  font-size: .9rem;
+}
 .reader-view-modal hr.solid {
   border-top: 1px solid #bbb
 }