Creating a Feed Reader from StatusCafe

This is a tutorial on how to create a feed reader directly from StatusCafe. This is useful for those who already have an account on StatusCafe, and want to create a microblog out of it. It is possible to modify the CSS in your StatusCafe account and then put it in an iframe, but creating a feed reader allows for more customization, if needed.

1) Getting StatusCafe's Feed

You can get your StatusCafe feed from the URL below. All you would need to do is replace YOUR_STATUSCAFE_USERNAME with your StatusCafe username.

https://status.cafe/users/YOUR_STATUSCAFE_USERNAME.atom

Example: https://status.cafe/users/bechnokid.atom

2) Creating the HTML Element

Somewhere in your HTML code, create an element where the Feed Reader will be. This can be a <div>, <span>, whichever you'd like. The most important thing is to label it, either with an id or class attribute.

According to the HTML standard, since there will be only one feed reader, I'll be giving it an id attribute called "feed-reader".

<div id='feed-reader'></div>

3) Making the Script

Next, we will be creating the script.

Make sure that the script is in a <script> tag is below the HTML element you created.

I usually like to put the <script> tag right above the </body> tag, as shown below:

<html>
  <head></head>
  <body>
    ...
    ...
    <script></script> <-- Right here.
  </body>
</html>

Put the following code into the <script> tag:

const feedURL = 'https://status.cafe/users/[YOUR_STATUSCAFE_USERNAME].atom';

fetch(feedURL)
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    const entries = data.querySelectorAll("entry")
  });

What this code is doing is converting the feed into XML, which Javascript can then extract the feed's data. The script then takes all of the posts you created in StatusCafe and stores them into the "entries" variable.

4) Preparing the Data

This section will show how to prepare the data of your StatusCafe posts using the stored feed data.

The way how StatusCafe sets up their feeds makes things a little difficult, and it took me a while to figure everything out. Hopefully the next few steps won't be too confusing.

Underneath "const entries = data.querySelectorAll("entry")", add the following:

let html = ``;

entries.forEach(el => {
  let title = el.querySelector("title").innerHTML.slice(0, NUMBER_OF_CHARACTERS).trim();
  let content = el.querySelector("content").textContent.trim();
  let dateString = el.querySelector("published").innerHTML.slice(0,10);
});

This loop takes the data from each StatusCafe post and splits them into different variables that we can put into the "html" variable later on. I'll explain each one.

  • title - Displays your StatusCafe username along with the emoji picked when creating the post. Note the NUMBER_OF_CHARACTERS shown in the code block. This number should be equal to the number of characters in your username. However, if you want to include the emoji associated with the status, just add 3 to the number of characters in your username.
    • For example, my username "bechnokid" contains 9 characters. If I wanted to include the emoji, I would replace NUMBER_OF_CHARACTERS with 9 + 3, which would be 12.
    • The final line would then be: "let title = el.querySelector("title").innerHTML.slice(0, 12).trim()"
  • content - Displays the full status. Self-explanatory.
  • dateString - This is optional, but this displays the date when the status was posted. It will also display the full date instead of the "...days ago" that StatusCafe displays.

5) Setting up the HTML

We will be adding the extracted data into the "html" variable that I previously mentioned.

This part requires the most customization as it entirely depends on how you want your feed to be displayed. For simplicity's sake, I'll use <p> tags.

Add the following underneath "let dateString = el.querySelector("published").innerHTML.slice(0,10)":

html += `
  <p>${title} - ${dateString}</p>
  <p>${content}</p>
`;

This sets up the HTML of one of your posts, putting your username and the date on line line, and then the status on the next line.

Then, place the following outside the "entries.forEach()" loop:

document.getElementById("feed-reader").innerHTML = html;

This line will look for the HTML element with the id attribute "feed reader" and fill it with the data stored in the "html" variable.

6) The Finished HTML

The finished HTML should look something like this:

<html>
  <head></head>
  <body>
    <div id='feed-reader'></div>
    <script>
      const feedURL = 'https://status.cafe/users/[YOUR_STATUSCAFE_USERNAME].atom';

      fetch(feedURL)
        .then(response => response.text())
        .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
        .then(data => {
          const entries = data.querySelectorAll("entry");
          let html = ``;

          entries.forEach(el => {
            let title = el.querySelector("title").innerHTML.slice(0, NUMBER_OF_CHARACTERS).trim();
            let content = el.querySelector("content").textContent.trim();
            let dateString = el.querySelector("published").innerHTML.slice(0,10);
            html += `
              <p>${title} - ${dateString}</p>
              <p>${content}</p>
            `;
          })
          document.getElementById("feed-reader").innerHTML = html;
        })
    </script>
  </body>
</html>

Again, be sure to replace YOUR_STATUSCAFE_USERNAME with your StatusCafe username and NUMBER_OF_CHARACTERS with the number of characters in your StatusCafe username (+ 3 if you want to include the emoji).

7) Finishing the Reader

Using the script above, your feed reader should look something like the following (without any formatting):

From here, since Javascript created HTML elements, it is possible to apply CSS styles, either through the <style> tags, inline styling, or an external stylesheet.

8) Shortening the Reader

Note: This step is optional.

Note that using the forEach() will loop through every post you made on StatusCafe. If you have more than fifty statuses, it can be overwhelming to scroll through a nearly endless list of statuses.

There are some options for this, such as implementing pagination, but the easiest (and my favorite) method is showing only a certain number of statuses. Let's say, for this example, that I only want to show 3 statuses from StatusCafe, and then provide a link to my StatusCafe account.

The first change will be to convert the forEach() loop into a for loop with an index. The second change will be to change el within the loop into entries[i].

Applying the changes will change the loop into something like the following:

for (i = 0; i < STATUS_LIMIT; i++) {
  let title = entries[i].querySelector("title").innerHTML.slice(0, NUMBER_OF_CHARACTERS).trim();
  let content = entries[i].querySelector("content").textContent.trim();
  let dateString = entries[i].querySelector("published").innerHTML.slice(0,10);
  html += `
    
${title} - ${dateString}

    
${content}

  `;
}
html += `<p><a href='https://status.cafe/users/bechnokid'>See more at StatusCafe</a></p>`;
document.getElementById("feed-reader").innerHTML = html;

You might have noticed that there is a new variable now: STATUS_LIMIT. This can be changed to the number of posts you want the feed reader to generate. If we change this number to 3, the feed reader will generate 3 posts, resulting in the following:

9) Closing Thoughts

Thank you for reading this tutorial! Like I said previously, it is entirely possible to use an iframe with StatusCafe as its source, but I've started to enjoy this method just for its customization options. Regardless, I hope you find this useful!

If you come across any issues or mistakes with this tutorial, feel free to email me at bechnokid@yahoo.com!