Adding a list of my Hashnode posts to my personal website.
Table of contents
About me
So, my personal website is a bit lame. Actually, I would say it's very lame. I don't really do front-end.
Why the update?
After starting yet another additional blog, I thought it would be a nice way to drive traffic to it if I added a feed of my posts to my personal website. On a sidenote, I don't know why I insisted on writing all my previous blogs from scratch. Moving to Hashnode is looking like a good idea.
Well, the back-end of my website is built with Python, so let's use that to query the Hashnode API. I followed a tutorial which I will link below, and customized it a little, before making a little wrapper for it.
]Python code
import requests
class Hashnode(object):
_api_url = 'https://api.hashnode.com'
def __init__(self, api_key: str):
self.headers = {
'Authorization': api_key
}
def get_user_posts(self, username: str, page: int = 0) -> (str, list):
"""
Accepts a str username as input.
Returns the blog domain (str), and a list of posts (dicts)
"""
query = '''{
user(username: "<username>") {
publication {
posts(page: <page>) {
title
brief
slug
coverImage
}
}
publicationDomain
}
}'''.replace('<username>', username).replace('<page>', str(page))
req = requests.post(self._api_url, json={'query': query}, headers=self.headers)
res = req.json()['data']['user']
return res['publicationDomain'], res['publication']['posts']
Using this, I added the following snippet to my Flask template
<div id='posts'>
<!-- Loop through posts -->
{% for post in posts %}
<div class='post'>
<h3>{{ post.title }}</h3>
<p>{{ post.brief }}</p>
{% if post.coverImage %}
<img src='{{ post.coverImage }}' alt='Cover Image'>
{% endif %}
<a href='{{ blogDomain }}/{{ post.slug }}'>Read more</a>
</div>
{% endfor %}
</div>
With some CSS (generated by ChatGPT to fit the rest of my website), it fit right in.