Proof-of-concept TypeScript conversion. Need to fix types

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "no-trailing-spaces": [
+            2,
+            {
+                "skipBlankLines": false
+            }
+        ],
+        "no-multiple-empty-lines": [
+            "error",
+            {
+                "max": 2,
+                "maxEOF": 1
+            }
+        ],
+        "@typescript-eslint/no-var-requires": 0
+    }
+}

.gitignore

@@ -1,2 +1,4 @@
 node_modules/*
-output/index.html
+public/index.html
+dist/*
+.DS_Store

config/feeds.json

@@ -0,0 +1,6 @@
+{
+  "Blogs": [
+    "https://george.mand.is/feed.xml",
+    "https://joy.recurse.com/feed.atom"
+  ]
+}

feeds.json

@@ -0,0 +1,6 @@
+{
+  "Blogs": [
+    "https://george.mand.is/feed.xml",
+    "https://joy.recurse.com/feed.atom"
+  ]
+}

output/style.css

@@ -1,30 +0,0 @@
-body {
-  font-family:system-ui;
-  font-size: 18px;
-}
-
-
-
-  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;
-  }

package.json

@@ -1,17 +1,37 @@
 {
   "name": "bubo-reader",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A simple but effective feed reader (RSS, JSON)",
   "main": "src/index.js",
+  "type": "module",
   "scripts": {
-    "build": "node src/index.js > output/index.html",
+    "dev": "tsc --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc && node dist/index.js > public/index.html",
+    "build:bubo": "node dist/index.js > public/index.html"
+  },
+  "author": {
+    "name": "George Mandis",
+    "email": "george@mand.is",
+    "url": "https://george.mand.is"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/georgemandis"
   },
-  "author": "",
   "license": "ISC",
   "dependencies": {
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^3.1.0",
     "nunjucks": "^3.2.0",
     "rss-parser": "^3.6.3"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.10",
+    "@types/nunjucks": "^3.2.0",
+    "@types/xml2js": "^0.4.9",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint": "^8.3.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
   }
-}
+}

public/style.css

@@ -0,0 +1,28 @@
+body {
+  font-family: system-ui;
+  font-size: 18px;
+}
+
+
+
+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;
+}

src/@types/bubo.d.ts

@@ -0,0 +1,11 @@
+export interface ContentFromAllFeeds {
+  [key: string]: object[]
+}
+
+export interface Feeds {
+  [key: string]: FeedItem
+}
+
+export interface FeedItem {
+  [key: string]: string | FeedItem[];
+}

src/feeds.json

@@ -1,25 +0,0 @@
-{
-  "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://george.mand.is/feed.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"
-  ]
-}

src/index.js

@@ -1,129 +0,0 @@
-/*
- * 🦉 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);
-})();

src/index.ts

@@ -0,0 +1,73 @@
+/*
+ * 🦉 Bubo Reader
+ * ====
+ * Dead simple feed reader (RSS + JSON) 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)
+ */
+
+import fetch from "node-fetch";
+import Parser from "rss-parser";
+import { ContentFromAllFeeds, FeedItem } from "./@types/bubo";
+import { render } from "./renderer.js";
+import { getLink, getTitle, getTimestamp, parseFeed, getFeedList } from "./utilities.js";
+
+const DEBUG = false;
+
+const parser = new Parser();
+const feedList = await getFeedList();
+const contentFromAllFeeds: ContentFromAllFeeds = {};
+const errors = [];
+
+for (const [group, feeds] of Object.entries(feedList)) {
+  contentFromAllFeeds[group] = [];
+
+  for (const feed of feeds) {
+    try {
+
+      if (DEBUG) {
+        console.log(feed);
+      }
+
+      const response = await fetch(feed);
+      const body = await parseFeed(response);
+
+      // skip to the next one if this didn't work out
+      if (!body) continue;
+
+      const contents: any =
+          typeof body === "string" ? await parser.parseString(body) : body as { [key: string]: string };
+
+      contents.feed = feed;
+      contents.title = getTitle(contents);
+      contents.link = getLink(contents);
+      contentFromAllFeeds[group].push(contents);
+
+      // try to normalize date attribute naming
+      contents?.items?.forEach((item: { [key: string]: string }) => {
+        item.timestamp = getTimestamp(item);
+        item.title = getTitle(item);
+        item.link = getLink(item);
+      });
+
+    } catch (error) {
+      errors.push(feed);
+    }
+  }
+}
+
+// generate the static HTML output from our template renderer
+const output = render({
+  data: contentFromAllFeeds,
+  errors: errors
+});
+
+// return the rendered console and save it somewhere.
+if (!DEBUG) {
+  console.log(output);
+}
+

src/renderer.ts

@@ -0,0 +1,37 @@
+/*
+* Return our renderer.
+* Using Nunjucks out of the box.
+* https://mozilla.github.io/nunjucks/
+*/
+
+import nunjucks from "nunjucks";
+const env: nunjucks.Environment = nunjucks.configure({ autoescape: true });
+import { readFile } from "fs/promises";
+import { ContentFromAllFeeds } from "./@types/bubo";
+
+/**
+ * Global filters for my Nunjucks templates
+ */
+env.addFilter("formatDate", function (dateString): string {
+  const formattedDate: string = new Date(parseInt(dateString)).toLocaleDateString();
+  return formattedDate !== "Invalid Date" ? formattedDate : dateString;
+});
+
+env.addGlobal("now", (new Date()).toUTCString());
+
+// load the template
+const template: string =
+  (await readFile(
+    new URL("../config/template.html", import.meta.url)
+  )).toString();
+
+// generate the static HTML output from our template renderer
+const render = ({ data, errors }: { data: ContentFromAllFeeds; errors: unknown[] }) => {
+  return env.renderString(template, {
+    data,
+    errors
+  });
+};
+
+
+export { render };

src/utilities.ts

@@ -0,0 +1,72 @@
+/*
+  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.
+*/
+
+import { Response } from "node-fetch";
+import { readFile } from "fs/promises";
+
+export const getLink = (obj: { [key: string]: string }): string => {
+  const link_values: string[] = ["link", "url", "guid", "home_page_url"];
+  const keys: string[] = Object.keys(obj);
+  const link_property: string | undefined = link_values.find(link_value => keys.includes(link_value));
+  return link_property ? obj[link_property] : "";
+};
+
+
+// fallback to URL for the title if not present (coupled to my template)
+export const getTitle = (obj: { [key: string]: string }): string => {
+  const title_values: string[] = ["title", "url", "link"]; // fallback to url/link as title if omitted
+  const keys: string[] = Object.keys(obj);
+  const title_property: string | undefined = title_values.find(title_value => keys.includes(title_value));
+  return title_property ? obj[title_property] : "";
+};
+
+// More dependable way to get timestamps
+export const getTimestamp = (obj: { [key: string]: string }): string => {
+  const timestamp: number = 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.toString();
+};
+
+
+// parse RSS/XML or JSON feeds
+export async function parseFeed(response: Response): Promise<{ [key: string]: string } | unknown> {
+  const contentType = response.headers.get("content-type")?.split(";")[0];
+
+  if (!contentType) return {};
+
+  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 && rssFeed) || (jsonFeed && jsonFeed) || {};
+}
+
+
+export const getFeedList = async (): Promise<string> => {
+  return JSON.parse(
+    (await readFile(
+      new URL("../config/feeds.json", import.meta.url)
+    )).toString()
+  );
+};
+

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>

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "forceConsistentCasingInFileNames": true,
+    "removeComments": true,
+    "strict": true,
+    "importHelpers": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2021",
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "typeRoots": [
+      "src/@types"
+    ],
+    "paths": {
+      "*": [
+        "node_modules/*",
+        "src/@types"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ]
+}