Fixed JSON feed parsing issues + bumped ot v1.0.1

README.md

@@ -1,6 +1,6 @@
 # 🦉 Bubo Reader
 
-Bubo Reader is a somewhat irrationally minimalist <acronym title="Really Simple Syndication">RSS</acronym> and <acronym title="JavaScript Object Notation">JSON</acronym> feed reader you can deploy on [Netlify](https://netlify.com) in a few steps or [Glitch](https://glitch.com) in even fewer steps! The goal of the project is to generate a webpage that shows a list of links from a collection of feeds organized by category and website. That's it.
+Bubo Reader is a borderline-irrationally minimalist <acronym title="Really Simple Syndication">RSS</acronym> and <acronym title="JavaScript Object Notation">JSON</acronym> feed reader you can deploy anywhere. Your own server, [Netlify](https://netlify.com) in a few steps or [Glitch](https://glitch.com) in even fewer steps! The goal of this project is to generate a page that shows a list of links from a collection of feeds organized by category and website. That's it.
 
 It is named after this [silly robot owl](https://www.youtube.com/watch?v=MYSeCfo9-NI) from Clash of the Titans (1981).
 
@@ -8,6 +8,10 @@ You can read more about how this project came about in my blog post '[Introducin
 
 ## Getting Started
 
+Run `npm install` from the root of the folder. When the dependencies are finished installing run `npm run build`. The `output` folder will contain the final page build and can be opened right away.
+
+## Deploying
+
 How to deploy Bubo Reader in a few easy steps with Netlify or Glitch:
 
 ### Deploying to Glitch

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bubo-reader",
-  "version": "1.0.0",
-  "description": "A somewhat dumb but effective feed reader (RSS, JSON & Twitter)",
+  "version": "1.0.1",
+  "description": "A simple but effective feed reader (RSS, JSON)",
   "main": "src/index.js",
   "scripts": {
     "build": "node src/index.js > output/index.html",

src/index.js

@@ -1,9 +1,13 @@
-/**
+/*
  * 🦉 Bubo RSS Reader
  * ====
- * Dead, dead simple feed reader that renders an HTML
+ * Dead simple feed reader that renders an HTML
  * page with links to content from feeds organized by site
- *
+ * 
+ * Code: https://github.com/georgemandis/bubo-rss
+ * Copyright (c) 2019 George Mandis (https://george.mand.is)
+ * Version: 1.0.1 (11/14/2021)
+ * Licensed under the MIT License (http://opensource.org/licenses/MIT)
  */
 
 const fetch = require("node-fetch");
@@ -15,14 +19,17 @@ const env = nunjucks.configure({ autoescape: true });
 
 const feeds = require("./feeds.json");
 
-env.addFilter("formatDate", function(dateString) {
+/**
+ * Global filters for my Nunjucks templates
+ */
+env.addFilter("formatDate", function (dateString) {
   const formattedDate = new Date(dateString).toLocaleDateString()
   return formattedDate !== 'Invalid Date' ? formattedDate : dateString;
 });
 
-env.addGlobal('now', (new Date()).toUTCString() );
+env.addGlobal('now', (new Date()).toUTCString());
 
-// parse XML or JSON feeds
+// parse RSS/XML or JSON feeds
 function parseFeed(response) {
   const contentType = response.headers.get("content-type")
     ? response.headers.get("content-type").split(";")[0]
@@ -44,13 +51,44 @@ function parseFeed(response) {
 
   const jsonFeed = [contentType]
     .map(item =>
-      ["application/json"].includes(item) ? response.json() : false
+      ["application/json", "application/feed+json"].includes(item) ? response.json() : false
     )
     .filter(_ => _)[0];
 
   return rssFeed || jsonFeed || false;
 }
 
+/*
+  There's a little inconcistency with how feeds report certain things like
+  title, links and timestamps. These helpers try to normalize that bit and
+  provide an order-of-operations list of properties to look for.
+
+  Note: these are tightly-coupled to the template and a personal preference.
+*/
+
+const getLink = (obj) => {
+  const link_values = ["link", "url", "guid", "home_page_url"];
+  const keys = Object.keys(obj);
+  const link_property = link_values.find(link_value => keys.includes(link_value));
+  return obj[link_property];
+}
+
+
+// fallback to URL for the title if not present (coupled to my template)
+const getTitle = (obj) => {
+  const title_values = ["title", "url", "link"]; // fallback to url/link as title if omitted
+  const keys = Object.keys(obj);
+  const title_property = title_values.find(title_value => keys.includes(title_value));
+  return obj[title_property];
+}
+
+// More dependable way to get timestamps
+const getTimestamp = (obj) => {
+  const timestamp = new Date(obj.pubDate || obj.isoDate || obj.date || obj.date_published).getTime();
+  return isNaN(timestamp) ? (obj.pubDate || obj.isoDate || obj.date || obj.date_published) : timestamp;
+}
+
+// fetch the feeds and build the object for our template
 (async () => {
   const contentFromAllFeeds = {};
   const errors = [];
@@ -66,14 +104,16 @@ function parseFeed(response) {
           typeof body === "string" ? await parser.parseString(body) : body;
 
         contents.feed = feeds[group][index];
-        contents.title = contents.title ? contents.title : contents.link;
+        contents.title = getTitle(contents);
+        contents.link = getLink(contents);
         contentFromAllFeeds[group].push(contents);
-        
+
         // try to normalize date attribute naming
-        contents.items.forEach(item => {
-          const timestamp = new Date(item.pubDate || item.isoDate || item.date).getTime();          
-          item.timestamp = isNaN(timestamp) ? (item.pubDate || item.isoDate || item.date) : timestamp;
-        });        
+        contents?.items?.forEach(item => {
+          item.timestamp = getTimestamp(item);
+          item.title = getTitle(item);
+          item.link = getLink(item);
+        });
 
       } catch (error) {
         errors.push(feeds[group][index]);
@@ -86,4 +126,4 @@ function parseFeed(response) {
     errors: errors
   });
   console.log(output);
-})();
+})();