17 changed files with 383 additions and 707 deletions
--- a/.forgejo/workflows/deploy.yml
+++ b/.forgejo/workflows/deploy.yml
@ -1,32 +0,0 @@
-on:
-  push:
-    branches:
-      - main
-  schedule:
-    - cron: '0 * * * *' # every hour
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    container:
-      volumes:
-        - /var/www/bubo:/var/www/bubo
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Install rsync
-        run: apt-get update && apt-get install -y rsync
-
-      - name: Build Bubo
-        run: npm run build
-
-      - name: List built files
-        run: ls -la ./output/
-        
-      - name: Deploy to web root
-        run: |
-          rsync -avz --delete --exclude='.git' --exclude='.forgejo' \
-            ./output/ /var/www/bubo/
-          chmod -R 755 /var/www/bubo
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: georgemandis
+patreon: #
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: #
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,2 @@
 node_modules/*
-output/index.html
-cache.json
-data.json
+output/index.html
--- a/.node-version
+++ b/.node-version
@ -1 +0,0 @@
-v18.15.0
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+16.4.1
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 George Mandis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,37 +1,83 @@
-# 🦉 Bubo Reader (Fork)
+# 🦉 Bubo Reader

-![screenshot](./demo.png)
+Bubo Reader is a hyper-minimalist <acronym title="Really Simple Syndication">RSS</acronym> and <acronym title="JavaScript Object Notation">JSON</acronym> feed reader you can deploy on your own server, [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.

-[Demo Site](https://kevinfiol.com/rss-reader/)
+It is named after this [silly robot owl](https://www.youtube.com/watch?v=MYSeCfo9-NI) from Clash of the Titans (1981).

-This is a personal fork of the excellent [Bubo Reader](https://github.com/georgemandis/bubo-rss) by George Mandis. I've made several opinionated changes to the setup, including replacing dependencies with more compact alternatives. Please see below for deployment instructions.
+You can read more about how this project came about in my blog post '[Introducing Bubo RSS: An Absurdly Minimalist RSS Feed Reader](https://george.mand.is/2019/11/introducing-bubo-rss-an-absurdly-minimalist-rss-feed-reader/)'

-Original blogpost: [Introducing Bubo RSS: An Absurdly Minimalist RSS Feed Reader](https://george.mand.is/2019/11/introducing-bubo-rss-an-absurdly-minimalist-rss-feed-reader/)
+## Anatomy of Bubo Reader

-Blogpost about my fork: [A minimal RSS Feed Reader](https://kevinfiol.com/blog/a-minimal-rss-feed-reader/)
+- `src/index.html` - a [Nunjucks](https://mozilla.github.io/nunjucks/) template that lets you change how the feeds are displayed
+- `output/style.css` - a CSS file to stylize your feed output
+- `src/feeds.json` - a JSON file containing the URLs for various site's feeds separated into categories
+- `src/index.js` - the script that loads the feeds and does the actual parsing and rendering

-Some changes I made:
+## Demos

-* Replace `nunjucks` with template strings (less dependencies for shorter build times)
-* Replace `node-fetch` with Node's native `fetch`
-* Many styling changes, including using the `:target` CSS selector to switch between groups (inspired by https://john-doe.neocities.org/)
-* The build script now sorts the feeds in each group by which one has the latest updates (this greatly improves the experience, imo)
-* An "All Articles" view
-* Privacy-redirect support via config file
-* Dark mode via `@media (prefers-color-scheme: dark)`
+You can view live demos here:

-## How to build
+- [https://bubo-rss-demo.netlify.com/](https://bubo-rss-demo.netlify.com/)
+- [http://bubo-rss.glitch.me/](http://bubo-rss.glitch.me/)

-Node `>=18.x` required.
+Not the most exciting-looking demos, I'll admit, but they work!

-```shell
-npm install
-npm run build
-```
+**Getting Started**

-## How to host on Github Pages
+- [Deploying to Glitch](#glitch)
+- [Deploying to Netlify](#netlify)
+- [Keeping feeds updated](#updated)

-1. Fork this repo!
-2. Enable [Github Pages](https://pages.github.com/) for your repo (either as a project site, or user site)
-3. Configure `.github/workflows/build.yml` to your liking
-    * Uncomment the `schedule` section to enable scheduled builds
+<a id="glitch"></a>
+## Deploying to Glitch
+
+The quickest way is to remix the project on Glitch:
+[https://glitch.com/edit/#!/bubo-rss](https://glitch.com/edit/#!/bubo-rss)
+
+Just changed some feeds in `./src/feeds.json` file and you're set! If you'd like to modify the style or the template you can changed `./output/style.css` file or the `./src/template.html` file respectively.
+
+There is also a special `glitch` branch you can clone if you prefer:
+[https://github.com/georgemandis/bubo-rss/tree/glitch](https://github.com/georgemandis/bubo-rss/tree/glitch)
+
+The only difference between this branch and `master` is that it spins up a server using [Express](https://expressjs.com/) to serve your `./output/index.html` file on Glitch. Everything else is the same.
+
+<a id="netlify"></a>
+## Deploying to Netlify
+
+- [Fork the repository](https://github.com/georgemandis/bubo-rss/fork)
+- From your forked repository go to and edit `src/feeds.json` to manage your feeds and categories
+- [Create a new site](https://app.netlify.com/start) on Netlify from GitHub 
+
+The deploy settings should automatically import from the `netlify.toml` file. All you'll need to do is confirm and you're ready to go!
+
+<a id="updated"></a>
+### Keeping Feeds Updated
+
+#### Using Netlify Webhooks
+
+To keep your feeds up to date you'll want to [setup a Build Hook](https://www.netlify.com/docs/webhooks/#incoming-webhooks) for your Netlify site and use another service to ping it every so often to trigger a rebuild. I'd suggest looking into:
+
+- [IFTTT](https://ifttt.com/)
+- [Zapier](https://zapier.com/)
+- [EasyCron](https://www.easycron.com/)
+
+If you already have a server running Linux and some command-line experience it might be simpler to setup a [cron job](https://en.wikipedia.org/wiki/Cron). 
+
+#### Using GitHub Actions
+
+This approach is a little different and requires some modifications to the repository. Netlify started billing for [build minutes](https://www.netlify.com/pricing/faq/) very shortly after I published this project. Running `npm build` and downloading all of the RSS feeds took up a substantial number of these, particularly if you had a process pinging the webhook and triggering a build every 15 minutes or so.
+
+How is the The GitHub Action-based approach different? The same build process runs, but this time it's on GitHub's servers via the Action. It then **commits** the newly created file generated at `./output/index.html` back into the repository. Netlify still gets pinged when the repository is updated, but skips the `npm run build` step on their end. This significantly reduces the number of build minutes required.
+
+**TLDR**: use the [`github-action-publishing`](https://github.com/georgemandis/bubo-rss/tree/github-action-publishing) branch for now if you'd prefer to use GitHub Actions.
+
+**Note:** The GitHub Action is setup to build and commit directly to the `master` branch, which is not the best practice. I'd suggest creating a separate branch to checkout and commit changes to in the action. You could then specify that same branch as the one to checkout and publish on Netlify.
+
+## Support
+
+If you found this useful please consider sponsoring me or this project. If you'd rather run this on your own server please consider using one of these affiliate links to setup a micro instance on [Linode](https://www.linode.com/?r=8729957ab02b50a695dcea12a5ca55570979d8b9), [Digital Ocean](https://m.do.co/c/31f58d367777) or [Vultr](https://www.vultr.com/?ref=8403978).
+
+## Showcase
+
+Here are some websites using Bubo Reader:
+- [Kevin Fiol](https://kevinfiol.com/reader/) ([repo](https://github.com/kevinfiol/reader))
--- a/netlify.toml
+++ b/netlify.toml
@ -0,0 +1,4 @@
+[build]  
+  command = "npm run build"
+  publish = "output/"
+
--- a/output/style.css
+++ b/output/style.css
@ -1,276 +1,30 @@
-:root {
-  --font-size: 14px;
-
-  --color: #111;
-  --bg-color: #fffff8;
-  --faded-bg: #f9f9f2;
-
-  --title-font-size: 16px;
-  --title-font-weight: 600;
-
-  --main-padding-right: 8rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color: #ddd;
-    --bg-color: #151515;
-    --faded-bg: #1b1b1b;
-  }
-}
-
-@media screen and (max-width: 900px) {
-  :root {
-    --main-padding-right: 0;
-  }
-
-  article.item {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-  }
-
-  .menu-label,
-  .menu-btn {
-    display: block !important;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 99;
-  }
-
-  .menu-btn {
-    display: none !important;
-  }
-
-  .menu-label {
-    padding: 1rem 2rem;
-    background-color: var(--faded-bg);
-  }
-
-  .menu-label::after {
-    content: 'groups';
-  }
-
-  .menu-btn:checked ~ .sidebar {
-    display: block !important;
-  }
-
-  .menu-btn:checked ~ main {
-    display: none !important;
-  }
-
-  .menu-btn:checked ~ .menu-label::after {
-    content: 'back';
-  }
-
-  .sidebar {
-    display: none !important;
-    padding: 1rem;
-    position: absolute;
-    top: 0;
-    left: 5px;
-    height: 100%;
-    background-color: var(--bg-color);
-  }
-
-  .sidebar
-    > header
-    > .group-selector {
-      list-style: none;
-      padding: 0;
-    }
-
-  .sidebar
-    > header
-    > .group-selector
-    > li {
-      font-size: 1.2em;
-    }
-}
-
-@keyframes details-show {
-  from {
-    opacity:0;
-    transform: var(--details-translate, translateY(-0.5em));
-  }
-}
-
 body {
-  color: var(--color);
-  background-color: var(--bg-color);
-  margin: 0;
-  padding: 0;
-  font-family: serif;
-  font-size: var(--font-size);
-  overflow: hidden;
-}
-
-details[open] > *:not(summary),
-section {
-  animation: details-show 100ms ease-in-out;
-}
-
-h1, h2, h3 {
-  font-family: monospace;
-}
-
-a:link {
-  color: inherit;
-}
-
-a:visited {
-  color: #b58c8c;
-}
-
-a:hover {
-  opacity: .75;
-}
-
-summary {
-  position: sticky;
-  top: 0;
-  padding-top: 0.65rem;
-  padding-bottom: 0.65rem;
-  user-select: none;
-  cursor:pointer;
-  font-family: monospace;
-  background-color: var(--bg-color);
-}
-
-summary:hover span,
-summary:hover div {
-  opacity:.75;
-}
-
-.menu-btn,
-.menu-label {
-  display: none;
-}
-
-.group-selector a,
-.group-selector a:visited {
-  color: inherit;
-  font-family: monospace;
-  line-height: 1.5em;
-}
-
-.feed-title {
-  font-weight: var(--title-font-weight);
-  font-size: var(--title-font-size);
-}
-
-.feed-url, .feed-timestamp {
-  color:#aaa;
-}
-
-.feed-url {
-  /**/
-}
-
-.feed-timestamp {
-  margin-left: 1.45rem;
-}
-
-.monospace {
-  font-family: monospace;
-}
-
-.inline {
-  display: inline;
-}
-
-.app {
-  display: flex;
-  gap: 2rem;
-  padding: 0 0rem 1rem 1rem;
-}
-
-.sidebar {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-header {
-  padding-top: 1rem;
-}
-
-main {
-  flex: 5;
-  height: 100vh;
-  overflow-y: auto;
-  padding-right: var(--main-padding-right);
-}
-
-article.item {
-  max-width: 85%;
-  padding: 0.15rem 0.75rem;
-  margin-left: 1.5rem;
-  margin-right: 1.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  background-color: var(--faded-bg);
-}
-
-#all-articles > article.item {
-  margin-left: 0;
-}
-
-article.item header.item__header {
-  font-size: var(--title-font-size);
-}
-
-.item__feed-url {
-  opacity: 0.25;
-}
-
-ul.article-links {
-  list-style: none;
-  padding-left: 0;
-}
-
-ul.article-links > li {
-  display:  inline-block;
-  margin-right: .5rem;
-}
-
-footer {
-  opacity: 0.25;
-  font-size: 0.75em;
-}
-
-footer:hover {
-  opacity: 1;
-}
-
-section {
-  z-index: 1;
-  /* ! Everything below is needed ! */
-  display: none;
-  height: 100%;
-  width: 100%;
-  background-color: var(--bg-color);
-}
-
-section > h2 {
-  margin-top: 0;
-  padding-top: 19px;
-}
-
-section:target { /* Show section */
-  display: block;
-}
-
-section:target ~ .default-text {
-  display: none;
+  font-family:system-ui;
+  font-size: 18px;
 }


-.default-text {
-  text-align: center;
-  position: relative;
-  top: 5%;
-  font-family: monospace;
-  font-size: 2em;
-}
+
+  details:focus,
+  details:focus-within,
+  details:hover {
+    /* background:#ffeb3b; */
+    /* outline:2px #000 solid; */
+  }
+
+
+  details ul li {
+  
+  }
+
+  summary {
+    cursor:pointer;
+  }
+
+  summary:hover {
+    opacity:.75;
+  }
+
+  .feed-url {
+    color:#aaa;
+  }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,61 +1,71 @@
 {
-  "name": "reader",
+  "name": "bubo-reader",
  "version": "1.0.0",
-  "lockfileVersion": 3,
+  "lockfileVersion": 1,
  "requires": true,
-  "packages": {
-    "": {
-      "name": "reader",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "rss-parser": "^3.6.3"
-      },
-      "engines": {
-        "node": ">=18.x"
-      }
+  "dependencies": {
+    "a-sync-waterfall": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
+      "integrity": "sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA=="
    },
-    "node_modules/entities": {
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg=="
+    },
+    "entities": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
+    "nunjucks": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.3.tgz",
+      "integrity": "sha512-psb6xjLj47+fE76JdZwskvwG4MYsQKXUtMsPh6U0YMvmyjRtKRFcxnlXGWglNybtNTNVmGdp94K62/+NjF5FDQ==",
+      "requires": {
+        "a-sync-waterfall": "^1.0.0",
+        "asap": "^2.0.3",
+        "commander": "^5.1.0"
      }
    },
-    "node_modules/rss-parser": {
+    "rss-parser": {
      "version": "3.12.0",
      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.12.0.tgz",
      "integrity": "sha512-aqD3E8iavcCdkhVxNDIdg1nkBI17jgqF+9OqPS1orwNaOgySdpvq6B+DoONLhzjzwV8mWg37sb60e4bmLK117A==",
-      "dependencies": {
+      "requires": {
        "entities": "^2.0.3",
        "xml2js": "^0.4.19"
      }
    },
-    "node_modules/sax": {
+    "sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
    },
-    "node_modules/xml2js": {
+    "xml2js": {
      "version": "0.4.23",
      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-      "dependencies": {
+      "requires": {
        "sax": ">=0.6.0",
        "xmlbuilder": "~11.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
      }
    },
-    "node_modules/xmlbuilder": {
+    "xmlbuilder": {
      "version": "11.0.1",
      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "engines": {
-        "node": ">=4.0"
-      }
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -1,19 +1,17 @@
 {
-  "name": "reader",
-  "version": "1.0.0",
-  "description": "A somewhat dumb but effective feed reader (RSS, JSON & Twitter)",
-  "type": "module",
-  "engines": {
-    "node": ">=18.x"
-  },
+  "name": "bubo-reader",
+  "version": "1.0.1",
+  "description": "A simple but effective feed reader (RSS, JSON)",
+  "main": "src/index.js",
  "scripts": {
-    "build": "node src/build.js",
-    "write": "node src/build.js --write",
-    "cached": "node src/build.js --cached"
+    "build": "node src/index.js > output/index.html",
+    "test": "echo \"Error: no test specified\" && exit 1"
  },
-  "author": "kevinfiol",
+  "author": "",
  "license": "ISC",
  "dependencies": {
+    "node-fetch": "^2.6.1",
+    "nunjucks": "^3.2.0",
    "rss-parser": "^3.6.3"
  }
 }
--- a/src/build.js
+++ b/src/build.js
@ -1,208 +0,0 @@
-/**
- * 🦉 Bubo RSS Reader
- * ====
- * Dead, dead simple feed reader that renders an HTML
- * page with links to content from feeds organized by site
- *
- */
-
-import Parser from 'rss-parser';
-import { resolve } from 'node:path';
-import { readFileSync, writeFileSync } from 'node:fs';
-import { template } from './template.js';
-
-const WRITE = process.argv.includes('--write');
-const USE_CACHE = !WRITE && process.argv.includes('--cached');
-
-const CACHE_PATH = './src/cache.json';
-const OUTFILE_PATH = './output/index.html';
-const CONTENT_TYPES = [
-  'application/json',
-  'application/atom+xml',
-  'application/rss+xml',
-  'application/xml',
-  'application/octet-stream',
-  'text/xml'
-];
-
-const config = readCfg('./src/config.json');
-const feeds = USE_CACHE ? {} : readCfg('./src/feeds.json');
-const cache = USE_CACHE ? readCfg(CACHE_PATH) : {};
-
-await build({ config, feeds, cache, writeCache: WRITE });
-
-async function build({ config, feeds, cache, writeCache = false }) {
-  let allItems = cache.allItems || [];
-  const parser = new Parser();
-  const errors = [];
-  const groupContents = {};
-
-  for (const groupName in feeds) {
-    groupContents[groupName] = [];
-
-    const results = await Promise.allSettled(
-      Object.values(feeds[groupName]).map(url =>
-        fetch(url, { method: 'GET' })
-          .then(res => [url, res])
-          .catch(e => {
-            throw [url, e];
-          })
-      )
-    );
-
-    for (const result of results) {
-      if (result.status === 'rejected') {
-        const [url, error] = result.reason;
-        errors.push(url);
-        console.error(`Error fetching ${url}:\n`, error);
-        continue;
-      }
-
-      const [url, response] = result.value;
-
-      try {
-        // e.g., `application/xml; charset=utf-8` -> `application/xml`
-        const contentType = response.headers.get('content-type').split(';')[0];
-
-        if (!CONTENT_TYPES.includes(contentType))
-          throw Error(`Feed at ${url} has invalid content-type.`)
-
-        const body = await response.text();
-        const contents = typeof body === 'string'
-          ? await parser.parseString(body)
-          : body;
-        const isRedditRSS = contents.feedUrl && contents.feedUrl.includes("reddit.com/r/");
-
-        if (!contents.items.length === 0)
-          throw Error(`Feed at ${url} contains no items.`)
-
-        contents.feed = url;
-        contents.title = contents.title || contents.link;
-        groupContents[groupName].push(contents);
-
-        // item sort & normalization
-        contents.items.sort(byDateSort);
-        contents.items.forEach((item) => {
-          // 1. try to normalize date attribute naming
-          const dateAttr = item.pubDate || item.isoDate || item.date || item.published;
-          item.timestamp = new Date(dateAttr).toLocaleDateString();
-
-          // 2. correct link url if it lacks the hostname
-          if (item.link && item.link.split('http').length === 1) {
-            item.link =
-              // if the hostname ends with a /, and the item link begins with a /
-              contents.link.slice(-1) === '/' && item.link.slice(0, 1) === '/'
-                ? contents.link + item.link.slice(1)
-                : contents.link + item.link;
-          }
-
-          // 3. parse subreddit feed comments
-          if (isRedditRSS && item.contentSnippet && item.contentSnippet.startsWith('submitted by    ')) {
-            // matches anything between double quotes, like `<a href="matches this">foo</a>`
-            const quotesContentMatch = /(?<=")(?:\\.|[^"\\])*(?=")/g;
-            let [_submittedBy, _userLink, contentLink, commentsLink] = item.content.split('<a href=');
-            item.link = contentLink.match(quotesContentMatch)[0];
-            item.comments = commentsLink.match(quotesContentMatch)[0];
-          }
-
-          // 4. redirects
-          if (config.redirects) {
-            // need to parse hostname methodically due to unreliable feeds
-            const url = new URL(item.link);
-            const tokens = url.hostname.split('.');
-            const host = tokens[tokens.length - 2];
-            const redirect = config.redirects[host];
-            if (redirect) item.link = `https://${redirect}${url.pathname}${url.search}`;
-          }
-
-          // 5. escape html in titles
-          item.title = escapeHtml(item.title);
-        });
-
-        // add to allItems
-        allItems = [...allItems, ...contents.items];
-      } catch (e) {
-        console.error(e);
-        errors.push(url)
-      }
-    }
-  }
-
-  const groups = cache.groups || Object.entries(groupContents);
-
-  if (writeCache) {
-    writeFileSync(
-      resolve(CACHE_PATH),
-      JSON.stringify({ groups, allItems }),
-      'utf8'
-    );
-  }
-
-  // for each group, sort the feeds
-  // sort the feeds by comparing the isoDate of the first items of each feed
-  groups.forEach(([_groupName, feeds]) => {
-    feeds.sort((a, b) => byDateSort(a.items[0], b.items[0]));
-  });
-
-  // sort `all articles` view
-  allItems.sort((a, b) => byDateSort(a, b));
-
-  const now = getNowDate(config.timezone_offset).toString();
-  const html = template({ allItems, groups, now, errors });
-
-  writeFileSync(resolve(OUTFILE_PATH), html, { encoding: 'utf8' });
-  console.log(`Reader built successfully at: ${OUTFILE_PATH}`);
-}
-
-/**
- * utils
- */
-function parseDate(item) {
-  let date = item
-    ? (item.isoDate || item.pubDate)
-    : undefined;
-
-  return date ? new Date(date) : undefined;
-}
-
-function byDateSort(dateStrA, dateStrB) {
-  const [aDate, bDate] = [parseDate(dateStrA), parseDate(dateStrB)];
-  if (!aDate || !bDate) return 0;
-  return bDate - aDate;
-}
-
-function getNowDate(offset = 0) {
-  let d = new Date();
-  const utc = d.getTime() + (d.getTimezoneOffset() * 60000);
-  d = new Date(utc + (3600000 * offset));
-  return d;
-}
-
-function readCfg(path) {
-  let contents, json;
-
-  try {
-    contents = readFileSync(resolve(path), { encoding: 'utf8' });
-  } catch (e) {
-    console.warn(`Warning: Config at ${path} does not exist`);
-    return {};
-  }
-
-  try {
-    json = JSON.parse(contents);
-  } catch (e) {
-    console.error('Error: Config is Invalid JSON: ' + path);
-    process.exit(1);
-  }
-
-  return json;
-}
-
-
-function escapeHtml(html) {
-  return html.replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('\'', '&apos;')
-    .replaceAll('"', '&quot;');
-}
--- a/src/config.json
+++ b/src/config.json
@ -1,6 +0,0 @@
-{
-  "timezone_offset": 1.0,
-  "redirects": {
-    "medium": "scribe.rip"
-  }
-}
--- a/src/feeds.json
+++ b/src/feeds.json
@ -1,13 +1,25 @@
 {
-  "feeds": [
-    "https://la-poterie-des-chemins-creux.fr/feed/"
+  "Web Development": [
+    "https://hacks.mozilla.org/feed/",
+    "https://blog.mozilla.org/feed/",
+    "https://web.dev/feed.xml",
+    "https://v8.dev/blog.atom",
+    "https://alistapart.com/main/feed/",
+    "https://css-tricks.com/feed/",
+    "https://dev.to/feed"
  ],
-  "blogs": [
-    "https://drewdevault.com/blog/index.xml",
-    "https://maia.crimew.gay/feed.xml",
+  "Blogs": [
    "https://george.mand.is/feed.xml",
-    "https://invisibleup.com/atom.xml",
-    "https://www.wheresyoured.at/rss/",
-    "https://solar.lowtechmagazine.com/fr/posts/index.xml"
+    "https://joy.recurse.com/feed.atom"
+  ],
+  "My GitHub Projects": [
+    "https://github.com/georgemandis.atom",
+    "https://github.com/georgemandis/bubo-rss/releases.atom",
+    "https://github.com/georgemandis/konami-js/releases.atom",
+    "https://github.com/georgemandis/konami-js/commits/main.atom",
+    "https://github.com/javascriptforartists/cheer-me-up-and-sing-me-a-song/commits/master.atom",
+    "https://github.com/georgemandis/circuit-playground-midi-multi-tool/commits/master.atom",
+    "https://github.com/georgemandis/remote-working-list/commits/master.atom",
+    "https://github.com/georgemandis/tweeter-totter/commits/master.atom"
  ]
-}
+}
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,129 @@
+/*
+ * 🦉 Bubo RSS Reader
+ * ====
+ * 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");
+const Parser = require("rss-parser");
+const parser = new Parser();
+
+const nunjucks = require("nunjucks");
+const env = nunjucks.configure({ autoescape: true });
+
+const feeds = require("./feeds.json");
+
+/**
+ * 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());
+
+// parse RSS/XML or JSON feeds
+function parseFeed(response) {
+  const contentType = response.headers.get("content-type")
+    ? response.headers.get("content-type").split(";")[0]
+    : false;
+
+  const rssFeed = [contentType]
+    .map(item =>
+      [
+        "application/atom+xml",
+        "application/rss+xml",
+        "application/xml",
+        "text/xml",
+        "text/html" // this is kind of a gamble
+      ].includes(item)
+        ? response.text()
+        : false
+    )
+    .filter(_ => _)[0];
+
+  const jsonFeed = [contentType]
+    .map(item =>
+      ["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 = [];
+
+  for (const group in feeds) {
+    contentFromAllFeeds[group] = [];
+
+    for (let index = 0; index < feeds[group].length; index++) {
+      try {
+        const response = await fetch(feeds[group][index]);
+        const body = await parseFeed(response);
+        const contents =
+          typeof body === "string" ? await parser.parseString(body) : body;
+
+        contents.feed = feeds[group][index];
+        contents.title = getTitle(contents);
+        contents.link = getLink(contents);
+        contentFromAllFeeds[group].push(contents);
+
+        // try to normalize date attribute naming
+        contents?.items?.forEach(item => {
+          item.timestamp = getTimestamp(item);
+          item.title = getTitle(item);
+          item.link = getLink(item);
+        });
+
+      } catch (error) {
+        errors.push(feeds[group][index]);
+      }
+    }
+  }
+
+  const output = env.render("./src/template.html", {
+    data: contentFromAllFeeds,
+    errors: errors
+  });
+  console.log(output);
+})();
--- a/src/template.html
+++ b/src/template.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>🦉 Bubo Reader</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+
+  <h1>🦉 Bubo Reader</h1>
+
+  {% for group, feeds in data %}    
+  <h2>{{ group }}</h2>
+    {% for feed  in feeds %} 
+      <details>
+        <summary>
+          <span class="feed-title">{{ feed.title }}</span> 
+          <span class="feed-url">({{ feed.feed }})</span>
+        </summary>
+        <ul>
+          {% for item in feed.items %}
+            <li>              
+              {{ item.timestamp | formatDate }} - <a href="{{ item.link }}" target='_blank' rel='noopener norefferer nofollow'>{{ item.title }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      </details>
+    {% endfor %}
+  {% endfor %}  
+
+  {% if errors | length > 0 %}
+    <h2>Errors</h2>
+    <p>There were errors trying to parse these feeds:</p>
+    <ul>
+    {% for error in errors %}
+      <li>{{ error }}</li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+
+  <hr>
+  <p>
+    Last updated {{ now }}. Powered by <a href="https://github.com/georgemandis/bubo-rss">Bubo Reader</a>, a project by <a href="https://george.mand.is">George Mandis</a>
+  </p>
+</body>
+</html>
--- a/src/template.js
+++ b/src/template.js
@ -1,110 +0,0 @@
-const forEach = (arr, fn) => {
-  let str = '';
-  arr.forEach(i => str += fn(i) || '');
-  return str;
-};
-
-const article = (item) => `
-  <article class="item">
-    <header class="item__header">
-      <a href="${item.link}" target='_blank' rel='noopener norefferer nofollow'>
-        ${item.title}
-      </a>
-    </header>
-
-    <small>
-      ${item.feedUrl ? `<span class="item__feed-url monospace">${item.feedUrl}</span>` : ''}
-      ${item.feedTitle ? `<span class="item__feed-title">${item.feedTitle}</span>` : ''}
-      <ul class="article-links">
-        <li class="monospace">${item.timestamp || ''}</li>
-        ${item.comments ? `
-          <li><a href="${item.comments}" target='_blank' rel='noopener norefferer nofollow'>comments</a></li>
-        ` : ''
-        }
-      </ul>
-    </small>
-  </article>
-`;
-
-export const template = ({ allItems, groups, errors, now }) => (`
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>rss reader</title>
-  <link rel="stylesheet" href="./style.css">
-</head>
-<body>
-  <div class="app">
-    <input type="checkbox" class="menu-btn" id="menu-btn" />
-    <label class="menu-label" for="menu-btn"></label>
-
-    <div class="sidebar">
-      <header>
-        <h1 class="inline" style="user-select: none;">rss</h1>
-        <ul class="group-selector">
-          <li><a href="#all-articles">all articles</a></li>
-          ${forEach(groups, group => `
-            <li><a href="#${group[0]}">${group[0]}</a></li>
-          `)}
-        </ul>
-      </header>
-
-      <footer>
-        ${errors.length > 0 ? `
-          <h2>Errors</h2>
-          <p>There were errors trying to parse these feeds:</p>
-          <ul>
-          ${forEach(errors, error => `
-            <li>${error}</li>
-          `)}
-          </ul>
-        ` : ''
-        }
-
-        <p>
-          Last updated ${now}. Powered by <a href="https://github.com/kevinfiol/rss-reader">Bubo Reader</a>, a project by <a href="https://george.mand.is">George Mandis</a> and <a href="https://kevinfiol.com">Kevin Fiol</a>.
-        </p>
-      </footer>
-    </div>
-
-    <main>
-      <section id="all-articles">
-        <h2>all articles</h2>
-        ${forEach(allItems, item => article(item))}
-      </section>
-
-      ${forEach(groups, ([groupName, feeds]) => `
-        <section id="${groupName}">
-          <h2>${groupName}</h2>
-
-          ${forEach(feeds, feed => `
-            <details>
-              <summary>
-                <span class="feed-title">${feed.title}</span> 
-                <span class="feed-url">
-                  <small>
-                    (${feed.feedUrl})
-                  </small>
-                </span>
-                <div class="feed-timestamp">
-                  <small>Latest: ${feed.items[0] && feed.items[0].timestamp || ''}</small>
-                </div>
-              </summary>
-              ${forEach(feed.items, item => article(item))}
-            </details>
-          `)}
-        </section>
-      `)}
-
-        <div class="default-text">
-          <p>welcome to bubo rss reader</p>
-          <p>select a feed group to get started</p>
-        </div>
-    </main>
-  </div>
-</body>
-</html>
-`);