AyushSaini00 / hashnode-postcard

Hashnode blogpost cards for your website 🗃

Hashnode Postcard

Hashnode blogpost cards for your website using a single HTML element. import it anywhere you want.

install

npm i hashnode-postcard

or

yarn add hashnode-postcard

usage

• using import statement:

<hashnode-postcard data-username="ayushcodes"></hashnode-postcard>

<script type="module">
  import "hashnode-postcard";
</script>

• using script tag:

<hashnode-postcard data-username="ayushcodes"></hashnode-postcard>

<script
  src="https://unpkg.com/hashnode-postcard@latest/dist/hashnode-postcard.umd.js"
  type="module"
></script>

demo

• import demo & script demo
• react/nextjs demo

api

• <hashnode-postcard data-username="YOUR_HASHNODE_USERNAME"></hashnode-postcard>

customize

Following data attributes are available to customize the postcard.

data attribute	description	examples	type
data-username	your hashnode username	ayushcodes	required
data-width	width of the postcard	600px	optional
data-height	height of the blogposts wrapper	500px	optional
data-cover-image	to show the post cover images	true	optional (default is true)
data-followers	to show the number of followers	false	optional (default is true)
data-brief	to show the brief description of blogposts	true	optional (default is true)
data-theme	to change the theme of the interface	default	optional (default is default)

available themes

No.	theme-name	reference
1	default	https://hashnode.com
2	devto	https://dev.to
3	hashnode-light	https://hashnode.com
4	dracula	https://draculatheme.com
5	nord-light	https://www.nordtheme.com
6	nord-dark	https://www.nordtheme.com
7	gruvbox-light	https://github.com/morhetz/gruvbox
8	gruvbox-dark	https://github.com/morhetz/gruvbox
9	synthwave	https://github.com/robb0wen/synthwave-vscode