Merge branch 'master' of https://github.com/BumpyClock/calm-new-tab-page

BumpyClock · Apr 20, 2024 · feb0e2d · feb0e2d
2 parents 4194f15 + 52bde06
commit feb0e2d
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 45 deletions.
diff --git a/src/newtab.html b/src/newtab.html
@@ -23,18 +23,18 @@
     <script src="./scripts/utils/purify.min.js"></script>
     <script src="./scripts/utils/imagesloaded.pkgd.min.js"></script>
 
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap"
-    />
+
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]"
     />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Lato"
-    />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+Mono:wdth,[email protected],100..900&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"

diff --git a/src/scripts/modal.js b/src/scripts/modal.js
@@ -91,7 +91,7 @@ function createReaderViewModal(article) {
             <span class="reader-view-close material-symbols-rounded">close</span>
             <h1 class="reader-view-title"><span id="website-info-placeholder"></span>${article.title}</h1>
             ${article.byline
-              ? `<h2 class="reader-view-author">${article.byline}</h2>`
+              ? `<h4 class="reader-view-author">${article.byline}</h4>`
               : ""}
             <p class="reader-view-reading-time">${estimateReadingTime(
               article.textContent

diff --git a/src/service-worker.js b/src/service-worker.js
@@ -195,22 +195,27 @@ async function fetchRSSFeedAndUpdateCache(feedUrls) {
 
 //Get thumbnailUrl from the feed items and cache the images
 async function fetchRSSFeed(feedUrls) {
-  const apiUrl = await getApiUrl();
-  const requestUrl = `${apiUrl}/parse`;
-  const requestOptions = createRequestOptions(feedUrls);
-
-  console.log("fetchRSSFeed: getApiUrl" + apiUrl);
-
-  const response = await fetch(requestUrl, requestOptions);
-  const fetchedFeedData = await response.json();
-
-  if (response.ok) {
-    // Filter out feeds with a status other than "ok"
-    fetchedFeedData.feeds = fetchedFeedData.feeds.filter(feed => feed.status === "ok");
-    return fetchedFeedData;
-  } else {
-    console.error("API response: ", JSON.stringify(fetchedFeedData));
-    throw new Error("Failed to fetch RSS feeds");
+  try {
+    const apiUrl = await getApiUrl();
+    const requestUrl = `${apiUrl}/parse`;
+    const requestOptions = createRequestOptions(feedUrls);
+
+    console.log("fetchRSSFeed: getApiUrl" + apiUrl);
+
+    const response = await fetch(requestUrl, requestOptions);
+    const fetchedFeedData = await response.json();
+
+    if (response.ok) {
+      // Filter out feeds with a status other than "ok"
+      fetchedFeedData.feeds = fetchedFeedData.feeds.filter(feed => feed.status === "ok");
+      return fetchedFeedData;
+    } else {
+      console.error("API response: ", JSON.stringify(fetchedFeedData));
+      throw new Error("Failed to fetch RSS feeds");
+    }
+  } catch (error) {
+    console.error('An error occurred:', error);
+    throw error;  // re-throw the error if you want it to propagate
   }
 }
 
@@ -230,11 +235,16 @@ self.addEventListener('activate', async (event) => {
 
 
 async function fetchJson(url, options) {
-  const response = await fetch(url, options);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${url}`);
+  try {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${url}`);
+    }
+    return response.json();
+  } catch (error) {
+    console.error('An error occurred:', error);
+    throw error;  // re-throw the error if you want it to propagate
   }
-  return response.json();
 }
 
 async function getCachedBingImageBlob() {

diff --git a/src/styles.css b/src/styles.css
@@ -5,7 +5,7 @@
   font-style: normal
 }
 :root {
-  --font-family: "Lato","Open Sans","Noto Sans","GeistVariableVF","Roboto",sans-serif;
+  --font-family: "Noto Sans","Open Sans", "Lato","Open Sans","Noto Sans","GeistVariableVF","Roboto",sans-serif;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
@@ -90,6 +90,8 @@ body {
   margin: 0;
   overflow-x: hidden
 }
+
+
 .material-symbols-rounded {
   font-variation-settings: "FILL" 0,"wght" 400,"GRAD" 0,"opsz" 48
 }
@@ -298,7 +300,7 @@ body > :not(.background-image-container)::selection {
 .card p {
   margin: 0;
   margin-bottom: 12px;
-  font-size: 14px;
+  font-size: 1rem;
   line-height: 1.33
 }
 .card a {
@@ -346,7 +348,7 @@ body > :not(.background-image-container)::selection {
 .card .text-content .website-info p {
   width: -webkit-fill-available;
   font-weight: 600;
-  font-size: 12px;
+  font-size: .8rem;
   font-kerning: none;
   display: -webkit-box;
   margin-top: 4px;
@@ -406,7 +408,7 @@ body > :not(.background-image-container)::selection {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 10px;
-  font-size: 14px;
+  font-size: 1rem;
   font-weight: 400
 }
 .long-description {
@@ -701,10 +703,10 @@ cite {
 .reader-view-page-content blockquote p{
   margin: 0;
   padding: 0;
-  font-size: 1.15rem;
+  font-size: 1.25rem;
   font-style: italic;
   font-weight: 400;
-  line-height: 1.8;
+  line-height: 2.3rem;
   font-family: var(--font-family);
   color: var(--color);
   margin-bottom: 1rem;
@@ -941,7 +943,7 @@ a {
 }
 #subscribed-feeds-list .list-item .website-info p {
   font-family: var(--font-family);
-  font-size: 12px;
+  font-size: .8rem;
   font-weight: 600;
   opacity: .8;
   color: var(--color);
@@ -1021,6 +1023,39 @@ a {
   font-family: var(--font-family);
   font-weight: 500
 }
+
+.reader-view-modal h1 {
+  font-size: 2rem;
+  margin: 1.5rem 0 .8rem 0;
+  line-height: 1.5;
+}
+
+.reader-view-modal h2 {
+  font-size: 2rem;
+  margin: 1.5rem 0;
+  line-height: 1.2
+}
+
+.reader-view-modal h3 {
+  font-size: 1.75rem;
+  margin: 1.5rem 0;
+  line-height: 1.2
+}
+
+.reader-view-modal h4 {
+  font-size: 1.5rem;
+  margin: 1.5rem 0;
+  line-height: 1.2;
+  font-weight:600;
+}
+
+.reader-view-modal h5 {
+  font-size: 1.25rem;
+  margin: 1.5rem 0;
+  line-height: 1.2
+}
+
+
 .reader-view-modal a {
   clear: both;
   color: var(--accent-color);
@@ -1039,7 +1074,10 @@ a {
   stroke: #000
 }
 .reader-view-modal p {
-  margin: 1.33em 0
+  margin: 2rem 0;
+  font-size: 1.05rem;
+  line-height: 2.3rem;
+  font-weight: var(--font-weight-regular);
 }
 .reader-view-modal figcaption {
   font-size: 14px;
@@ -1080,15 +1118,16 @@ a {
   color: var(--color)
 }
 .reader-view-author {
-  font-size: 16px;
-  margin: 0;
-  font-weight: 400
+  font-size: .9rem !important;
+  margin: 0 !important;
+  font-weight: 500;
 }
 .reader-view-reading-time {
-  font-size: 14px;
+  font-size: .9rem !important;
   margin: 8px 0!important;
-  margin-bottom: 4px;
-  font-weight: var(--font-weight-medium)!important;
+  margin-bottom: 12px !important;
+  line-height: 1.2 !important;
+  font-weight: var(--font-weight-bold)!important;
   opacity: .7
 }
 .reader-view-reading-time p {
@@ -1203,7 +1242,7 @@ a {
 }
 .site-title p {
   color: var(--color);
-  font-size: 12px;
+  font-size: .8rem;
   text-align: center;
   font-weight: 400;
   overflow: hidden;
@@ -1521,7 +1560,7 @@ a {
   color: var(--color)
 }
 .settings-section .infoContainer p {
-  font-size: 14px;
+  font-size: 1rem;
   font-weight: 400;
   color: var(--color);
   opacity: .7