vishalqw78/github-blog-cards

Github Blog Cards enables automatic rendering of dynamic blog cards, showcasing from your 10 latest articles from platforms like Medium, Dev, Hashnode. Elevate your profile, save time, and engage readers directly on your GitHub readme.

Get Dynamic Blog Card on your READMEs!

Introduction

Github Blog Cards enables automatic rendering of dynamic blog cards, showcasing from your 10 latest articles from platforms like Medium, Dev, Hashnode. Elevate your profile, save time, and engage readers directly on your GitHub readme.

By integrating this feature, your profile gains visual appeal and keeps visitors informed about your latest writings.

Usage and Features

• Github Blog Card
  • Demo
  • Usage
    • Username and Blogname
    • Available Blog Sites Examples
      • Medium Example
      • Hashnode Example
      • Dev Example
    • Index
    • Themes
      • Available Themes
      • Themes Demo

Github Blog Card

Paste this into your markdown content.

Change the ?username= and &blogname= value to your GitHub username and blogname from options medium , dev and hashnode.

<a href="https://github-blog-cards.vercel.app/blog?username=vishalqw78&blogname=medium">
<img src="https://github-blog-cards.vercel.app/blog?username=vishalqw78&blogname=medium"/>
</a>

Demo

Usage

How to use the Github Blog Cards

Parameter

There are 4 Different Parameter that can be used

Username and Blogname

The Paramter username and blogname are used with each other at a same time.

Note

The Default Value of username is Vishalqw78 (Project Owner's Username) and blogname is medium.

Warning

Provide the correct value of Username and blogname otherwise it will result in error

Change the following the render the cards.

Available Blog Sites Examples

There are Three Available Blog Site to fetch and display the Blog Post Cards. Medium Dev Hashnode

Medium Example

<a href="https://github-blog-cards.vercel.app/blog?username=vishalqw78&blogname=medium">
<img src="https://github-blog-cards.vercel.app/blog?username=vishalqw78&blogname=medium"/>
</a>

That Card that rendered

Hashnode Example

<a href="https://github-blog-cards.vercel.app/blog?username=nevodavid10&blogname=hashnode">
<img src="https://github-blog-cards.vercel.app/blog?username=nevodavid10&blogname=hashnode"/>
</a>

That Card that rendered

Dev Example

<a href="https://github-blog-cards.vercel.app/blog?username=corpcubite&blogname=dev">
<img src="https://github-blog-cards.vercel.app/blog?username=corpcubite&blogname=dev"/>
</a>

That Card that rendered

Index

The Index Parameter is used to fetch the n^th from last Blog.

Example

This will result in fetching the 2^nd and 3^rd last Blog from Hashnode of user profile.

Note

If the index is not available or greater than 10 it will result in fetching the Most Recent Blog.

<a href="https://github-blog-cards.vercel.app/blog?username=https://lo-victoria.com/&blogname=hashnode&index=2">
<img src="https://github-blog-cards.vercel.app/blog?username=https://lo-victoria.com/&blogname=hashnode&index=2"/>
</a>
<a href="https://github-blog-cards.vercel.app/blog?username=https://lo-victoria.com/&blogname=hashnode&index=3">
<img src="https://github-blog-cards.vercel.app/blog?username=https://lo-victoria.com/&blogname=hashnode&index=3"/>
</a>

Themes

You can use the ?theme= to change between the different theme.

Available Themes

👀 Available Themes

default

default_repocard

transparent

shadow_red

shadow_green

shadow_blue

dark

radical

merko

gruvbox

gruvbox_light

tokyonight

onedark

cobalt

synthwave

highcontrast

dracula

prussian

monokai

vue

vue-dark

shades-of-purple

nightowl

buefy

blue-green

algolia

great-gatsby

darcula

bear

solarized-dark

solarized-light

chartreuse-dark

nord

gotham

material-palenight

graywhite

vision-friendly-dark

ayu-mirage

midnight-purple

calm

flag-india

omni

react

jolly

maroongold

yeblu

blueberry

slateorange

kacho_ga

outrun

ocean_dark

city_lights

github_dark

github_dark_dimmed

discord_old_blurple

aura_dark

panda

noctis_minimus

cobalt2

swift

aura

apprentice

moltack

codeSTACKr

rose_pine

date_night

one_dark_pro

rose

holi

neon

blue_navy

calm_pink

Themes Demo

👀 The RSS Feed Of Available Blogs

Site	RSS Feed
Medium	https://medium.com/feed/@your-username
Dev.to	https://dev.to/feed/your-username
Hashnode	https://blogname/rss.xml