chore: cleaned up logging

internal/feeds/refresh.go

@@ -44,7 +44,7 @@ func RefreshFeed(feedUrl string) Feed {
 			feed = *foundFeed
 		}
 	} else if err != nil {
-		fmt.Printf("Failed to refresh %s\n%v\n", feedUrl, err)
+		fmt.Printf("Failed to refresh %s - %v\n", feedUrl, err)
 	} else {
 		imageURL := ""
 		if f.Image != nil {

internal/server/main.go

@@ -2,10 +2,7 @@ package server
 
 import (
 	"fmt"
-	"html/template"
-	"time"
 
-	"github.com/dustin/go-humanize"
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/template/html"
 
@@ -24,21 +21,6 @@ func Start(port string) error {
 	engine := html.New("./views", ".html")
 	engine.Reload(true)
 
-	engine.AddFunc("htmlSafe", func(html string) template.HTML {
-		return template.HTML(html)
-	})
-	engine.AddFunc("humanDate", func(date time.Time) template.HTML {
-		return template.HTML(humanize.Time(date))
-	})
-	engine.AddFunc("coalesce", func(args ...*string) string {
-		for _, s := range args {
-			if s != nil && *s != "" {
-				return *s
-			}
-		}
-		return ""
-	})
-
 	app := fiber.New(fiber.Config{
 		Views: engine,
 	})

views/index.html

@@ -16,10 +16,11 @@
 			}
     </script>
 
-<script src="/static/feed-item.js" defer></script>
-<script src="/static/favicon.js"></script>
+    <script src="/static/feed-item.js" defer></script>
+    <script src="/static/favicon.js"></script>
 
     <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue-progressbar@0.7.5/dist/vue-progressbar.min.js"></script>
     <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
     <script src="https://unpkg.com/dayjs@1.9.5/plugin/relativeTime.js"></script>
     <script>dayjs.extend(window.dayjs_plugin_relativeTime)</script>
@@ -118,7 +119,7 @@
               <div class="card-content">
                 <div class="menu">
                   <button title="Show IFrame" v-on:click="showIframe(item)" :disabled="isBusy">
-                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"width="24" height="24" viewBox="0 0 426 426" enable-background="new 0 0 426.001 426.001"><g><path d="M406.8 54.2H19.2A19.2 19.2 0 000 73.4v279.2c0 10.6 8.6 19.2 19.2 19.2h387.6c10.6 0 19.2-8.6 19.2-19.2V73.4c0-10.6-8.6-19.2-19.2-19.2zM368.4 82a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm-48 0a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm-48 0a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm115.2 251.5H38.4V141.6h349.2v191.8z"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 426 426" ><path d="M406.8 54.2H19.2A19.2 19.2 0 000 73.4v279.2c0 10.6 8.6 19.2 19.2 19.2h387.6c10.6 0 19.2-8.6 19.2-19.2V73.4c0-10.6-8.6-19.2-19.2-19.2zM368.4 82a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm-48 0a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm-48 0a17.8 17.8 0 110 35.7 17.8 17.8 0 010-35.7zm115.2 251.5H38.4V141.6h349.2v191.8z" :style="{'fill': item.IframeVisible ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg>
                   </button>
                   <button title="Save" v-on:click="saveItem(item)" :disabled="isBusy">
                     <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 5.6l-.8.8-.8-.8a5.4 5.4 0 00-7.6 7.6l7.9 7.9c.3.3.7.3 1 0l8-8a5.4 5.4 0 10-7.7-7.5z" :style="{'fill': item.Save ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg>
@@ -136,10 +137,34 @@
           </div>
         </div>
 
-
+        <vue-progress-bar></vue-progress-bar>
       </div>
 
       <script>
+        function isInViewport(element) {
+          const rect = element.getBoundingClientRect();
+          return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+          );
+        }
+
+        Vue.use(VueProgressBar, {
+          color: '#00bcd4',
+          failedColor: '#ff2e88',
+          thickness: '5px',
+          transition: {
+            speed: '1s',
+            opacity: '0.8s',
+            termination: 100
+          },
+          autoRevert: true,
+          location: 'top',
+          inverse: false
+        });
+
         const vm = new Vue({
           el: '#app',
           data: {
@@ -188,6 +213,11 @@
               setFavicon(this.unread);
             },
             setBusy(isBusy) {
+              if (isBusy) {
+                this.$Progress.start();
+              } else {
+                this.$Progress.finish();
+              }
               this.isBusy = isBusy;
               document.body.style.cursor = isBusy ? "wait" : "";
               this.setPageTitle();
@@ -199,7 +229,10 @@
             },
             loadFeed(feed) {
               this.selectedItem = undefined;
-              this.items.forEach(item => item.Read = item.Read || item.PendingRead);
+              this.items.forEach(item => {
+                item.Read = item.Read || item.PendingRead;
+                item.IframeVisible = false;
+              });
               this.selectedFeed = feed;
               window.location.hash = feed;
             },
@@ -209,7 +242,9 @@
                 this.selectedItem = undefined;
               } else {
                 this.selectedItem = item.ID;
+                if (!isInViewport(document.getElementById(this.selectedItem))) {
                   document.getElementById(this.selectedItem).scrollIntoView();
+                }
                 item.PendingRead = true;
                 fetch(`/api/read/${item.ID}`, {method: "POST"})
               }
@@ -230,6 +265,7 @@
                 })
             },
             showIframe(item) {
+              item.IframeVisible = !item.IframeVisible;
               document.querySelector(`feed-item[item-id='${item.ID}'`).showIframe();
             },
             deleteFeed(feed) {
@@ -377,7 +413,7 @@
             this.setBusy(true);
             Promise.all([
               fetch(`/api/feeds`).then(res => res.json()).then(feeds => this.feeds = feeds),
-              fetch(`/api/unread`).then(res => res.json()).then(items => this.items = items.map(item => {item.PendingRead = false; return item;})),
+              fetch(`/api/unread`).then(res => res.json()).then(items => this.items = items.map(item => {item.PendingRead = false; item.IframeVisible = false; return item;})),
               fetch(`/api/saved`).then(res => res.json()).then(items => this.savedItems = items)
               ])
               .then(() => {
@@ -414,13 +450,24 @@
               }
             };
 
+            let inView = true;
+            window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function (e) {
+              if ({focus:1, pageshow:1}[e.type]) {
+                if (inView) return;
+                inView = true;
+              } else if (inView) {
+                inView = false;
+              }
+            };
+
             // Fetch updates every 5 minutes
             setInterval(() => {
+              if (!inView) {
                 fetch(`/api/unread`)
                   .then(res => res.json())
                   .then(items => {
                     if (!this.showRead) {
-                    if (!items.some(i => i.ID == this.selectedItem)) {
+                      if (this.selectedItem && !items.some(i => i.ID == this.selectedItem)) {
                         items.unshift(this.items.find(i => i.ID == this.selectedItem));
                       }
 
@@ -434,7 +481,8 @@
                     }
 
                     this.setPageTitle();
-                })
+                  });
+              }
             }, 5 * 60 * 1000);
 
             document.addEventListener('keydown', this._keyListener.bind(this));

views/static/feed-item.js

@@ -9,13 +9,6 @@ class FeedItem extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @font-face {
-      font-family: "charter";
-      src: url("https://glyph.medium.com/font/be78681/0-3j_4g_6bu_6c4_6c8_6c9_6cc_6cd_6ci_6cm/charter-400-normal.woff") format("woff");
-      font-style: normal;
-      font-weight: 400;
-      unicode-range: U+0-7F, U+A0, U+200A, U+2014, U+2018, U+2019, U+201C, U+201D, U+2022, U+2026;
-    }
 
     :host {
       width: 100% !important;
@@ -36,7 +29,9 @@ class FeedItem extends HTMLElement {
       margin: auto auto !important;
     }
     h1, h2, h3, h4 {
+      font-family: "Atkinson Hyperlegible Bold";
       margin-top: 1.3em;
+      line-height: 1em;
     }
     :root > h1 {
       margin-top: 0;
@@ -44,18 +39,34 @@ class FeedItem extends HTMLElement {
     p, a {
       line-height: 1.2em;
     }
-    p {
-      font-family: charter, Georgia, "Times New Roman", Times, serif;
+    p, li, div {
+      font-family: "Atkinson Hyperlegible Regular";
       font-style: normal;
       font-weight: 400;
-      letter-spacing: -0.063px;
+      letter-spacing: 0.05em
+    }
+    em {
+      font-family: "Atkinson Hyperlegible Italic";
+      font-style: normal;
+    }
+    strong {
+      font-weight: 500;
+      font-family: "Atkinson Hyperlegible Bold";
+    }
+    em strong, strong em {
+      font-family: "Atkinson Hyperlegible BoldItalic";
+    }
+    li {
+      margin: 0.6em 0;
     }
     a {
       color: #333;
-      font-weight: bold;
+      font-family: "Atkinson Hyperlegible Bold";
+      font-weight: 500;
+      letter-spacing: 0.05em
     }
     :host(.dark) a {
-      color: #ccc;
+      color: #eee;
     }
     a:hover, :host(.dark) a:hover {
       color: #ff2e88;
@@ -117,9 +128,14 @@ class FeedItem extends HTMLElement {
   }
 
   showIframe() {
+    if (this.shadowRoot.querySelector(".feedContent").style.display != "none") {
       this.shadowRoot.querySelector(".feedContent").style.display = "none";
       this.shadowRoot.querySelector("iframe").src = this.shadowRoot.querySelector("iframe").dataset.src;
       this.shadowRoot.querySelector("iframe").style.display = "block";
+    } else {
+      this.shadowRoot.querySelector(".feedContent").style.display = "block";
+      this.shadowRoot.querySelector("iframe").style.display = "none";
+    }
   }
 }
 customElements.define('feed-item', FeedItem);

views/static/style.css

@@ -1,3 +1,48 @@
+@font-face {
+  font-family: "Atkinson Hyperlegible Bold";
+  font-style: normal;
+  font-weight: normal;
+  font-display: block;
+  src: url("/static/fonts/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"),
+    url("/static/fonts/Atkinson-Hyperlegible-Bold-102a.woff") format("woff"),
+    url("/static/fonts/Atkinson-Hyperlegible-Bold-102a.ttf") format("ttf"),
+    url("/static/fonts/Atkinson-Hyperlegible-Bold-102a.eot") format("eot"),
+    url("/static/fonts/Atkinson-Hyperlegible-Bold-102a.svg") format("svg");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Regular";
+  font-style: normal;
+  font-weight: normal;
+  font-display: block;
+  src: url("/static/fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"),
+    url("/static/fonts/Atkinson-Hyperlegible-Regular-102a.woff") format("woff"),
+    url("/static/fonts/Atkinson-Hyperlegible-Regular-102a.ttf") format("ttf"),
+    url("/static/fonts/Atkinson-Hyperlegible-Regular-102a.eot") format("eot"),
+    url("/static/fonts/Atkinson-Hyperlegible-Regular-102a.svg") format("svg");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible Italic";
+  font-style: normal;
+  font-weight: normal;
+  font-display: block;
+  src: url("/static/fonts/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2"),
+    url("/static/fonts/Atkinson-Hyperlegible-Italic-102a.woff") format("woff"),
+    url("/static/fonts/Atkinson-Hyperlegible-Italic-102a.ttf") format("ttf"),
+    url("/static/fonts/Atkinson-Hyperlegible-Italic-102a.eot") format("eot"),
+    url("/static/fonts/Atkinson-Hyperlegible-Italic-102a.svg") format("svg");
+}
+@font-face {
+  font-family: "Atkinson Hyperlegible BoldItalic";
+  font-style: normal;
+  font-weight: normal;
+  font-display: block;
+  src: url("/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2"),
+    url("/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff") format("woff"),
+    url("/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.ttf") format("ttf"),
+    url("/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.eot") format("eot"),
+    url("/static/fonts/Atkinson-Hyperlegible-BoldItalic-102a.svg") format("svg");
+}
+
 body {
   padding-bottom: 20px;
 }
@@ -171,7 +216,7 @@ button:not(:disabled):hover svg path {
 }
 
 .item-content .card-content p {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Atkinson Hyperlegible Regular"; /*'Roboto', sans-serif;*/
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0em;
@@ -182,8 +227,8 @@ button:not(:disabled):hover svg path {
   color: #333;
   font-weight: bold;
 }
-.dark .item-content .card-content a {
-  color: #ccc;
+.dark {
+  color: #eee;
 }
 
 .card-header {