Displaying Hashnode Posts on Personal Site with RSS

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 with which you can achieve above task easily.

Solutions

Hashnode Official API

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

For more information, refer this article by Catalin Pit.

RSS Parsing

Another way is RSS Parsing. In this, RSS URL of 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 have created Backend NodeJS API in which I have installed rss-parser package to parse RSS feed of 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 parser return whole array, which further mapped with specific key/value object and return as API response.

In the frontend side, which is 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 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.

You can filter and process RSS in different way as per you need.

Conclusion

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