├── CrimsonText.ttf
├── README.md
├── index.html
├── rss.js
├── style.css
└── urls.json
/CrimsonText.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hongkiat/js-rss-reader/cf4ddfecde0b6ac37bb6617229c4ba0a93f7da2d/CrimsonText.ttf
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # RSS Reader (JavaScript)
2 | RSS reader written in JavaScript.
3 |
4 | >💁 If you're getting `Cross origin requests are only supported for HTTP` error while opening the HTML with `file:///` protocol, just open and save the HTML file using a text editor, that should resolve the issue. Or, for a quick test, you can also use a browser add-on such as [CORS Everywhere for Firefox](https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/).
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | RSS Feed
6 |
7 | RSS Reader (JavaScript)
11 | Loading...
12 |
13 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/rss.js:
--------------------------------------------------------------------------------
1 | const DOMPARSER = new DOMParser().parseFromString.bind(new DOMParser())
2 | /* Fetch URLs from JSON */
3 | fetch('urls.json').then((res) => {
4 | res.text().then((data) => {
5 | var frag = document.createDocumentFragment()
6 | var hasBegun = true
7 | JSON.parse(data).urls.forEach((u) => {
8 | try {
9 | var url = new URL(u)
10 | }
11 | catch (e) {
12 | console.error('URL invalid');
13 | return
14 | }
15 | fetch(url).then((res) => {
16 | res.text().then((htmlTxt) => {
17 | /* Extract the RSS Feed URL from the website */
18 | try {
19 | let doc = DOMPARSER(htmlTxt, 'text/html')
20 | var feedUrl = doc.querySelector('link[type="application/rss+xml"]').href
21 | } catch (e) {
22 | console.error('Error in parsing the website');
23 | return
24 | }
25 | /* Fetch the RSS Feed */
26 | fetch(feedUrl).then((res) => {
27 | res.text().then((xmlTxt) => {
28 | /* Parse the RSS Feed and display the content */
29 | try {
30 | let doc = DOMPARSER(xmlTxt, "text/xml")
31 | let heading = document.createElement('h1')
32 | heading.textContent = url.hostname
33 | frag.appendChild(heading)
34 | doc.querySelectorAll('item').forEach((item) => {
35 | let temp = document.importNode(document.querySelector('template').content, true);
36 | let i = item.querySelector.bind(item)
37 | let t = temp.querySelector.bind(temp)
38 | t('h2').textContent = !!i('title') ? i('title').textContent : '-'
39 | t('a').textContent = t('a').href = !!i('link') ? i('link').textContent : '#'
40 | t('p').innerHTML = !!i('description') ? i('description').textContent : '-'
41 | t('h3').textContent = url.hostname
42 | frag.appendChild(temp)
43 | })
44 | } catch (e) {
45 | console.error('Error in parsing the feed')
46 | }
47 | if(hasBegun) {
48 | document.querySelector('output').textContent = '';
49 | hasBegun = false;
50 | }
51 | document.querySelector('output').appendChild(frag)
52 | })
53 | }).catch(() => console.error('Error in fetching the RSS feed'))
54 | })
55 | }).catch(() => console.error('Error in fetching the website'))
56 | })
57 | })
58 | }).catch(() => console.error('Error in fetching the URLs json'))
59 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @font-face{
2 | font-family: 'Crimson Text';
3 | src: url('CrimsonText.ttf');
4 | }
5 | html {
6 | font-family: 'Crimson Text', serif;
7 | font-size: 11pt;
8 | }
9 | body{
10 | width: 480px;
11 | margin: auto;
12 | }
13 | body > h1{
14 | text-align: center;
15 | }
16 | h2{
17 | color: orangered;
18 | margin-bottom: 0;
19 | font-size: 16pt;
20 | }
21 |
22 | a:link{
23 |
24 | color: dodgerblue;
25 | }
26 | h2+a:link{
27 |
28 | font-weight: bold;
29 | }
30 | h3{
31 | margin-top: 0;
32 | margin-bottom: 0;
33 | font-size: 10pt;
34 | }
35 | p{
36 | margin: 0;
37 | }
38 | output h1 {
39 | background-color: orangered;
40 | text-indent: 5px;
41 | color:white;
42 | font-size: 18pt;
43 | }
44 |
--------------------------------------------------------------------------------
/urls.json:
--------------------------------------------------------------------------------
1 | {
2 | "urls": ["https://hacks.mozilla.org", "http://www.hongkiat.com/blog/", "https://webkit.org/blog/"]
3 | }
4 |
--------------------------------------------------------------------------------