Displaying Hashnode Posts on Personal Site with RSS

Displaying Hashnode Posts on Personal Site with RSS

How to Process the RSS feed of Hashnode Blog and display related post data to the personal site.

ยท

2 min read

Introduction

Hello,

I hope you are writing articles on Hashnode, either in Personal, community or company blogs. You may want to link and display your written articles in your personal websites or portfolio where others can see only your article with other content. Here we'll see two ways in which you can achieve the above task easily.

Solutions

Hashnode Official API

Hashnode provides an official GraphQL API from which you can retrieve various content and display it. You can test their playground here. With this API you can get a various type of content like featured posts, users posts and publications, and manipulate articles and related data. You may require PAT(Personal Access Token) for some of the access.

For more information, refer to this article by Catalin Pit.

RSS Parsing

Another way is RSS Parsing. In this, the RSS URL of the publication is required to retrieve and process data. Here I'll take my blogs RSS and process it and display articles which are written by me(aka Piyush Goyani).

First, I created a Backend NodeJS API in which I installed rss-parser package to parse the RSS feed of the blog.

import Parser = require('rss-parser');

async getRss() {
  const parser: Parser = new Parser();
  const url = 'https://blog.thesourcepedia.org/rss.xml';
  const feed = await parser.parseURL(url);
  return feed.items.map((item) => {
    return {
      title: item['title'],
      coverImage: item['cover_image'],
      creator: item['creator'],
      link: item['link'],
      pubDate: item['pubDate'],
    };
  });
}

Here, as you can see, RSS feed URL is parsed and the parser returns the entire array, which is further mapped with a specific key/value object and return as an API response.

On the frontend side, which is the Vue component where All articles are being rendered by calling API.

<template>
  <div>
    {{ items }} // render posts
  </div>
</template>
export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    fetch("https://api.thesourcepedia.org/blog/getRss")
      .then((res) => res.json())
      .then((data) => {
        this.items = data.filter((post) => post.creator === "Piyush Goyani");
      });
  },
};

Here I'm calling /getRss API which returns the article array, and here I can filter which specific author(e.g myself) and display only those posts which I have written in my personal site.

PersonalSitePosts.png

You can filter and process RSS differently as per your need.

Conclusion

I hope you enjoyed this article and found it useful. Give a thumb and subscribe for more interesting stuff.

Did you find this article valuable?

Support TheSourcePedia's Blog by becoming a sponsor. Any amount is appreciated!

ย