Plume XML RSS and/or JSON => HTML

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rss-parser.min.js"></script>
<h1>Convertion from <a href="https://joinplu.me/">Plume</a> (the federated blog) RSS feed to JSON then to HTML Snippet</h1>
<small>cortesy of <a href="https://rss-to-json-serverless-api.vercel.app"> RSS feed to JSON API</a> </small>

<p>comments:</p>
<ul>
  <li> the content of each entry underneath each title will be truncate to 20 words</li>
  <li>Errors in external content fetching will be shown in console</li>
  <li><a href="#example">1st</a> is a local example is made with a JSON variable with only 2 elements</li>
  <li><a href="#plume_feed">2nd</a> is an external example fetched from a blogger's RSS XML feed from Plume, transformed to JSON thanks to the API and converted into HTML content</li>
  <li><a href="#xml_feed">3rd</a> example is made with rss-parser CDN js lib getting directly the XML file converting it to HTML in one go, here we're getting help from https://corsproxy.io/ service to fetch the XML file without issues</li>
</ul>


<div id="example"></div>
<div id="plume_feed"></div>
<div id="xml_feed"></div>

<script src="script.js"></script>

plume-xml-rss-and-or-json-html.markdown

Plume XML RSS and/or JSON => HTML

this is an snippet to include RSS feed in your web page with 3 examples, this could be used to consume RSS content in a web page or understand better AJAX/RSS/XML/JSON concepts as I did

A Pen by Ivan Robles on CodePen.

License.

script.js

var example = document.getElementById("example");
var plume_feed = document.getElementById("plume_feed");
var xml_feed = document.getElementById("xml_feed");



// example data: JSON -> HTML
let example_data = {
  "items": [
    {
      "title": "<![CDATA[Use the Gboard Secret Trackpad [Android]]]>",
      "id": "https://fediverse.blog/~/CedSaid/Use%20the%20Gboard%20Secret%20Trackpad%20%5BAndroid%5D/",
      "url": "https://fediverse.blog/~/CedSaid/Use%20the%20Gboard%20Secret%20Trackpad%20%5BAndroid%5D/",
      "link": "https://fediverse.blog/~/CedSaid/Use%20the%20Gboard%20Secret%20Trackpad%20%5BAndroid%5D/",
      "author": "Ced Ledesma",
      "published": 1689497461725,
      "created": 1689486592186,
      "category": [],
      "content": "<![CDATA[<p dir=\"auto\">While on the Compose screen on any document or conversation:</p>\n<ul dir=\"auto\">\n<li>\n<p dir=\"auto\">Long-tap and hold on the spacebar</p>\n</li>\n<li>\n<p dir=\"auto\">While still holding the spacebar, glide your finger to the left or right, to move the cursor</p>\n</li>\n</ul>\n<br>]]>",
      "enclosures": []
    },
    {
      "title": "<![CDATA[Share Your WiFi Password Easily [Android]]]>",
      "id": "https://fediverse.blog/~/CedSaid/Share%20Your%20WiFi%20Password%20Easily%20%5BAndroid%5D/",
      "url": "https://fediverse.blog/~/CedSaid/Share%20Your%20WiFi%20Password%20Easily%20%5BAndroid%5D/",
      "link": "https://fediverse.blog/~/CedSaid/Share%20Your%20WiFi%20Password%20Easily%20%5BAndroid%5D/",
      "author": "Ced Ledesma",
      "published": 1689497461725,
      "created": 1689150843276,
      "category": [],
      "content": "<![CDATA[<p dir=\"auto\">For phones with Android 10 and newer, you can just share your Wi-Fi password by letting your friends scan it from your phone.</p>\n<p dir=\"auto\">Using your Android phone that is connected to the Wi-Fi:</p>\n<ul dir=\"auto\">\n<li>Go to Settings</li>\n<li>Tap Wi-Fi (or Network &amp; Internet, then Internet)</li>\n<li>Choose the network you want to share</li>\n<li>Have your friend scan the QR code with their phone</li>\n</ul>\n<p dir=\"auto\">That’s it. :)</p>\n]]>",
      "enclosures": []
    }]};
example.innerHTML += "<h1>Local Example:</h1>";
for(let index in example_data["items"]){
  const line = document.createElement("hr");
  const title_link = document.createElement("a");
  const title = document.createElement("h2");
  const content = document.createElement("p");
  //line
  example.insertAdjacentElement("beforeend",line);
  //title
  example.insertAdjacentElement("beforeend",title_link);
  title_link.setAttribute('href', example_data["items"][index]["id"]);
  title_link.appendChild(title);
  title.textContent = example_data["items"][index]["title"].replace("<![CDATA[", "").replace("]]>", "");
  //content
  example.insertAdjacentElement("beforeend",content);
  content.innerHTML = example_data["items"][index]["content"].replace("<![CDATA[", "").replace("]]>", "").split(" ").splice(0,19).join(" ")+" ...";
}



//fetching external content XML -> JSON -> HTML
var feed_json = fetch('https://rss-to-json-serverless-api.vercel.app/api?feedURL=https://fediverse.blog/@/cedled/atom.xml')
  .then((res) => res.json())
  .then(json_feed)
  .catch(console.error);
function json_feed(feeds){
  plume_feed.innerHTML += "<h1>External Example:</h1>";
  plume_feed.innerHTML += "<h3>From: "+feeds["title"]+"</h3>";
  for(let index in feeds["items"]){
    const line = document.createElement("hr");
    const title_link = document.createElement("a");
    const title = document.createElement("h2");
    const content = document.createElement("p");
    //line
    plume_feed.insertAdjacentElement("beforeend",line);
    //title
    plume_feed.insertAdjacentElement("beforeend",title_link);
    title_link.setAttribute('href', feeds["items"][index]["id"]);
    title_link.appendChild(title);
    title.textContent = feeds["items"][index]["title"].replace("<![CDATA[", "").replace("]]>", "");
    //content
    plume_feed.insertAdjacentElement("beforeend",content);
  content.innerHTML = feeds["items"][index]["content"].replace("<![CDATA[", "").replace("]]>", "").split(" ").splice(0,19).join(" ")+" ...";
  }
}



//fetching external content: XML -> HTML
xml_feed.innerHTML += "<h1>External Example Using rss-parser CDN lib (XML -> HTML):</h1>";
let parser = new RSSParser({
  requestOptions: {
    rejectUnauthorized: false
  }
});
URL = 'https://corsproxy.io/?'+encodeURIComponent('https://fediverse.blog/@/cedled/atom.xml');
parser.parseURL(URL, function(err, feed) {
  if (err) throw err;
  feed.items.forEach(function(entry) {
    const line = document.createElement("hr");
    const title_link = document.createElement("a");
    const title = document.createElement("h2");
    const content = document.createElement("p");
    //line
    xml_feed.insertAdjacentElement("beforeend",line);
    //title
    xml_feed.insertAdjacentElement("beforeend",title_link);
    title_link.setAttribute('href', entry.id);
    title_link.appendChild(title);
    title.textContent = entry.title.replace("<![CDATA[", "").replace("]]>", "");
    //content
    xml_feed.insertAdjacentElement("beforeend",content);
    content.innerHTML = entry.content.replace("]]>", "").split(" ").splice(0,19).join(" ")+" ...";
  })
})