readability integration

template/static/images/book.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>

template/static/javascripts/api.js

@@ -83,5 +83,10 @@
         body: new FormData(form),
       })
     },
+    crawl: function(url) {
+      return fetch('/page?url=' + url).then(function(res) {
+        return res.text()
+      })
+    }
   }
 })()

template/static/javascripts/app.js

@@ -43,6 +43,7 @@ var vm = new Vue({
       },
       'itemSelected': null,
       'itemSelectedDetails': {},
+      'itemSelectedReadability': '',
       'itemSearch': '',
       'settings': 'create',
       'loading': {
@@ -115,6 +116,7 @@ var vm = new Vue({
       this.refreshItems()
     },
     'itemSelected': function(newVal, oldVal) {
+      this.itemSelectedReadability = ''
       this.itemSelectedDetails = this.itemsById[newVal]
       if (this.itemSelectedDetails.status == 'unread') {
         this.itemSelectedDetails.status = 'read'
@@ -303,5 +305,18 @@ var vm = new Vue({
         vm.refreshFeeds()
       })
     },
+    getReadable: function(item) {
+      if (item.link) {
+        var vm = this
+        api.crawl(item.link).then(function(body) {
+          if (!body.length) return
+          var doc = new DOMParser().parseFromString(body, 'text/html')
+          var parsed = new Readability(doc).parse()
+          if (parsed && parsed.content) {
+            vm.itemSelectedReadability = parsed.content
+          }
+        })
+      }
+    },
   }
 })