gablaxy/bubo-rss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
George Mandis 2021-11-27 19:09:23 -08:00
parent 78250bd9a2
commit d207f805ab
17 changed files with 3279 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
.eslintrc.json Normal file
View file

@ -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
}
}

4
.gitignore vendored
View file

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

6
config/feeds.json Normal file
View file

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

0
src/template.html → config/template.html
View file

6
feeds.json Normal file
View file

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

30
output/style.css
View file

@ -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;
}

2894
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

32
package.json
View file

@ -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",
"test": "echo \"Error: no test specified\" && exit 1"
"dev": "tsc --watch",
"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"
}
}
}

28
public/style.css Normal file
View file

@ -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;
}

11
src/@types/bubo.d.ts vendored Normal file
View file

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

25
src/feeds.json
View file

@ -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"
]
}

129
src/index.js
View file

@ -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);
})();

73
src/index.ts Normal file
View file

@ -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);
}

37
src/renderer.ts Normal file
View file

@ -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 };

72
src/utilities.ts Normal file
View file

@ -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()
);
};

48
template.html Normal file
View file

@ -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>

30
tsconfig.json Normal file
View file

@ -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/**/*"
]
}