Fetch And Display RSS Feeds With Custm Template – vanilla-rss

Preview:

Description:

A vanilla JavaScript RSS parser library that fetches and displays RSS/Atom feeds on the webpage.

jQuery Wrapper is available here.

How to use it:

1. Load the core JavaScript file rss.global.min.js in the document.

<script src="./dist/rss.global.min.js"></script>

2. Create a container element to place the RSS feeds.

<div id="rss-feeds"></div>

3. Initialize the library and define the path to the RSS(s).

const rss = new RSS(
      document.querySelector('#rss-feeds'),
      "https://cssscript.com/feed/",
      {
        // options here
      }
);
// or multiple feeds
const rss = new RSS(
      document.querySelector('#rss-feeds'),
      [
        "rss url 1",
        "rss url 2",
        "rss url 3"
      ],
      {
        // options here
      }
);

4. Customize the rendering template. Available tokens:

• url
• author
• date
• title
• body
• shortBody
• bodyPlain
• shortBodyPlain
• teaserImage: the first image in the post’s body
• teaserImageUrl: the url of the first image in the post’s body
• index: the index of the current entry
• totalEntries: the total count of the entries
• feed: contains high level information of the feed (e.g. title of the website)

const rss = new RSS(
      document.querySelector('#rss-feeds'),
      "https://cssscript.com/feed/",
      {
        layoutTemplate: "<ul>{entries}</ul>",
        entryTemplate: "<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>"
      }
);

5. Limit the number of entries to fetch.

const rss = new RSS(
      document.querySelector('#rss-feeds'),
      "https://cssscript.com/feed/",
      {
        limit: 10
      }
);

6. Override the default RSS parser service. Default: http://www.feedrapp.info/.

const rss = new RSS(
      document.querySelector('#rss-feeds'),
      "https://cssscript.com/feed/",
      {
        host: "www.feedrapp.info"
      }
);

7. Render the RSS feeds on the page and execute a function after rendering.

rss.render()
.then(() => console.log('cool'));

8. Full configuration options and callback functions.

{
  ssl: true,
  host: "www.feedrapp.info",
  support: true // enables ads
  limit: 4,
  layoutTemplate: "<ul>{entries}</ul>",
  entryTemplate:
    '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>',
  tokens: { additional token definition for in-template-usage
    foo: 'bar',
    bar: function(entry, tokens) { return entry.title }
  },
  outputMode: "json",
  dateFormat: "dddd MMM Do",
  dateFormatFunction: function(date){},
  dateLocale: "en",
  order: '-publishedDate', // All entry properties; title, link, content, contentSnippet, publishedDate, categories, author, thumbnail
  fetchFeed: (apiUrl) => {
    return new Promise((resolve) => {
      $.getJSON(apiUrl, resolve);
    });
  },
  offsetStart: false, // offset start point
  offsetEnd: false, // offset end point
  filterLimit: 10, // filter results
  encoding: 'ISO-8859-1 ',
  filter: function(entry, tokens) {
    return tokens.title.indexOf('my filter') > -1
  }
}

9. Available event listeners.

rss
  .on('data', (data) => {
    console.log(data.rss); // Returns the rss instance
    console.log(data.feed); // Returns the feed meta information
    console.log(data.entries); // Returns the feed entries
})

Changelog:

v1.4.0 (11/17/2019)

• Add support for sorting entries

v1.3.0 (11/17/2019)

• Add support for multiple feed URLs

v1.2.0 (11/07/2019)

• Add encoding option