RaviSagar.com - Site built with 100% HTML, CSS and a bit of Javascript to convert RSS/XML to HTML


Head over to RaviSagar.com & and you will see a site, my site :) yet another site but this one is different. This site has a dot com domain which I wanted to get for a long time. Believe it or not this domain was on sale for $2500 something dollars for years. I guess nobody bought it all these years and it was released in the market. I bought it immediately. Now since I already have this Drupal site and one more www.ravi.pro which I publish using only Emacs Org Mode, I wanted to do something different with RaviSagar.com. This site is 100% HTML, CSS and a bit of Javascript to pull in my latest posts from this site.

I searched online and found some script to convert RSS XML into HTML. I modified them little bit and wrote this one.

  1. $(document).ready(function() {
  2.     //feed to parse
  3.     var feed = "<a href="https://www.ravisagar.in/%3C/span%3Ehttps%3Cspan%20style%3D"color: #339933;">://www.ravisagar.in/rss.xml">https://www.ravisagar.in/rss.xml</a>";
  5.     let html = '';
  7.      $.ajax(feed, {
  8.         accepts:{
  9.             xml:"application/rss+xml"
  10.         },
  11.         dataType:"xml",
  12.         success:function(data) {
  13.             //Credit: <a href="http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript">http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-us…</a>
  15.             $(data).find("item").slice(0,2).each(function () { // or "item" or whatever suits your feed
  17.                 let html = ``;
  18.                 var el = $(this);                  
  19.                 html += `
  20.                 <article>
  21.                 <h3><a href="${el.find("link").text()}">${el.find("title").text()}</a></h3>
  23.                 ${el.find("description").text()}
  25.                 </article>
  27.                 `;
  29.             document.getElementById("rss-viewer").insertAdjacentHTML("beforeend", html);
  32.             });
  34.         }  
  35.     });
  37. });

I also had to enable CORS on my Drupal site to make the request in the Javascript code.

  • Copy sites/default/default.services.yml to sites/default/services.yml
  • Change cors.config: enabled: false to true
  • Clear cache

HTML and CSS I used on the site are bare minimum need to create a very simple responsive site. Although I love working on this site and sharing content in a very organised way but I was looking for something simpler and because I make lot of notes locally using Org Mode, I launched www.ravipro.com which was a great step in the right direction but with RaviSagar.com I am quite satisfied because it is pure HTML site and there is a immense satisfaction (a bit nostalgic) in creating simple HTML site. The Javascript I added to just make this site little bit dynamic so it show latest update from this site. I am quite happy with my setup so far. RaviSagar.com will act as my business card with links to my content.

Enjoy :)



Similar posts

Ravi Sagar Newsletter

Honestly I hardly send out mails but I guess there is no harm in at least having a newsletter. I will only send newsletter when I have something important to share or an update. People are busy and no one has time to read emails these days. If you really like my content then I guess you will remember my site and come back for more.

Want to contact me?