diff options
Diffstat (limited to 'Content/posts/2020-12-1-HTML-JS-RSS-Feed.md')
| -rw-r--r-- | Content/posts/2020-12-1-HTML-JS-RSS-Feed.md | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/Content/posts/2020-12-1-HTML-JS-RSS-Feed.md b/Content/posts/2020-12-1-HTML-JS-RSS-Feed.md new file mode 100644 index 0000000..00f4fa3 --- /dev/null +++ b/Content/posts/2020-12-1-HTML-JS-RSS-Feed.md @@ -0,0 +1,207 @@ +--- +date: 2020-12-01 20:52 +description: Short code-snippet for an RSS feed, written in HTML and JavaScript +tags: Tutorial, Code-Snippet, HTML, JavaScript +--- +# RSS Feed written in HTML + JavaScript + +If you want to directly open the HTML file in your browser after saving, don't forget to set `CORS_PROXY=""` + +```html +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title> + RSS Feed + </title> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> +</head> +<body> + +<h1 align="center" class="display-1">RSS Feed</h1> +<main> + <div class="container"> + <div class="list-group pb-4" id="contents"></div> +<div id="feed"> +</div></div> +</main> + +<script src="https://gitcdn.xyz/repo/rbren/rss-parser/master/dist/rss-parser.js"></script> +<script> + +const feeds = { + "BuzzFeed - India": { + "link":"https://www.buzzfeed.com/in.xml", + "summary":true + }, + "New Yorker": { + "link":"http://www.newyorker.com/feed/news", + }, + "Vox":{ + "link":"https://www.vox.com/rss/index.xml", + "limit": 3 + }, + "r/Jokes":{ + "link":"https://reddit.com/r/Jokes/hot/.rss?sort=hot", + "ignore": ["repost","discord"] + } +} + +const config_extra = { +"Responsive-Images": true, +"direct-link": false, +"show-date":false, +"left-column":false, +"defaults": { + "limit": 5, + "summary": true +} +} + +const CORS_PROXY = "https://cors-anywhere.herokuapp.com/" + +var contents_title = document.createElement("h2") +contents_title.textContent = "Contents" +contents_title.classList.add("pb-1") +document.getElementById("contents").appendChild(contents_title) + +async function myfunc(key){ + + var count_lim = feeds[key]["limit"] + var count_lim = (count_lim === undefined) ? config_extra["defaults"]["limit"] : count_lim + + var show_summary = feeds[key]["summary"] + var show_summary = (show_summary === undefined) ? config_extra["defaults"]["summary"] : show_summary + + var ignore_tags = feeds[key]["ignore"] + var ignore_tags = (ignore_tags === undefined) ? [] : ignore_tags + + var contents = document.createElement("a") + contents.href = "#" + key + contents.classList.add("list-group-item","list-group-item-action") + contents.textContent = key + document.getElementById("contents").appendChild(contents) + var feed_div = document.createElement("div") + feed_div.id = key + feed_div.setAttribute("id", key); + var title = document.createElement("h2"); + title.textContent = "From " + key; + title.classList.add("pb-1") + feed_div.appendChild(title) + document.getElementById("feed").appendChild(feed_div) + var parser = new RSSParser(); + var countPosts = 0 + parser.parseURL(CORS_PROXY + feeds[key]["link"], function(err, feed) { + if (err) throw err; + feed.items.forEach(function(entry) { + if (countPosts < count_lim) { + + var skip = false + for(var i = 0; i < ignore_tags.length; i++) { + if (entry.title.includes(ignore_tags[i])){ + var skip = true + } else if (entry.content.includes(ignore_tags[i])){ + var skip = true + } + } + + if (!skip) { + + var node = document.createElement("div"); + node.classList.add("card","mb-3"); + var row = document.createElement("div") + row.classList.add("row","no-gutters") + + if (config_extra["left-column"]){ + var left_col = document.createElement("div") + left_col.classList.add("col-md-2") + var left_col_body = document.createElement("div") + left_col_body.classList.add("card-body") + } + + var right_col = document.createElement("div") + if (config_extra["left-column"]){ + right_col.classList.add("col-md-10") + } + var node_title = document.createElement("h5") + + node_title.classList.add("card-header") + node_title.innerHTML = entry.title + + node_body = document.createElement("div") + node_body.classList.add("card-body") + + node_content = document.createElement("p") + + if (show_summary){ + node_content.innerHTML = entry.content + } + node_content.classList.add("card-text") + + if (config_extra["direct-link"]){ + node_link = document.createElement("p") + node_link.classList.add("card-text") + node_link.innerHTML = "<b>Link:</b> <a href='" + entry.link +"'>Direct Link</a>" + if (config_extra["left-column"]){ + left_col_body.appendChild(node_link) + } else { + node_content.appendChild(node_link) + } + } + + if (config_extra["show-date"]){ + node_date = document.createElement("p") + node_date.classList.add("card-text") + node_date.innerHTML = "<p><b>Date: </b>" + entry.pubDate + "</p>" + if (config_extra["left-column"]){ + left_col_body.appendChild(node_date) + } else { + node_content.appendChild(node_date) + + } + } + + node.appendChild(node_title) + + node_body.appendChild(node_content) + + right_col.appendChild(node_body) + + if (config_extra["left-column"]){ + left_col.appendChild(left_col_body) + row.appendChild(left_col) + } + + row.appendChild(right_col) + + node.appendChild(row) + + document.getElementById(key).appendChild(node) + countPosts+=1 + } + } + }) + + if (config_extra["Responsive-Images"]){ + var inputs = document.getElementsByTagName('img') + for(var i = 0; i < inputs.length; i++) { + inputs[i].classList.add("img-fluid") + } + } + + }) + + return true +} +(async () => { +for(var key in feeds) { + let result = await myfunc(key); +}})(); + +</script> +<noscript>Uh Oh! Your browser does not support JavaScript or JavaScript is currently disabled. Please enable JavaScript or switch to a different browser.</noscript> +</body></html> +``` + |