Skip to content

Commit e378583

Browse files
Souravdey777Souravdey777
committed
Merge branch 'main' of https://github.com/Souravdey777/HashnodeBlogCards into main
2 parents 70e6016 + 5e8ce30 commit e378583

1 file changed

Lines changed: 332 additions & 10 deletions

File tree

‎README.md‎

Lines changed: 332 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,353 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
<p align="center">
2+
<a href="https://hashnode-blog-cards.vercel.app/" target="_blank">
3+
<img src="./public/hashnode-logo.png?raw=true" width=100px title="Hashnode Blog Cards" alt="Hashnode Blog Cards"/>
4+
</a>
5+
</p>
6+
<p align="center">
7+
<a href="https://hashnode-blog-cards.vercel.app/" target="_blank">
8+
<img src="https://img.shields.io/badge/-Hashnode Blog Cards-2962FF?style=flat&logo=hashnode&logoColor=white" height="30px" title="Hashnode Blog Cards" alt="Hashnode Blog Cards"/>
9+
</a>
10+
</p>
11+
12+
13+
# `Hashnode Blog Cards`
14+
15+
Are you a blogger 📝 on **[Hashnode](https://hashnode.com/)**?
16+
17+
18+
Reference Link 🔗 of Blogs are not enough, Give your blogs what it actually deserves with Blog Cards 🔥
19+
20+
⚡ Fetch the Blogs from Hashnode and put it anywhere in .md file, or any markdown editor. It can also be added to any website with HTML syntax.
21+
22+
<p >
23+
<a href="https://hashnode-blog-cards.vercel.app/" target="_blank">
24+
<b>Go to Hashnode Blog Cards &rarr;</b>
25+
</a>
26+
</p>
27+
28+
<p align="center">
29+
<a href="https://flexbox-guide.souravdey777.vercel.app" target="_blank">
30+
<img src="./public/cover.jpg?raw=true" width=1280px title="Flexbox-Guide: A Flexbox Code Generator" alt="Flexbox-Guide"/>
31+
</a>
32+
</p>
33+
34+
### Table of Contents
35+
36+
- [About `Hashnode Blog Cards`](#about-hashnode-blog-cards)
37+
- [About The API Endpoints](#about-the-api-endpoints)
38+
39+
- [Features](#features)
40+
- [Technologies](#technologies)
41+
- [Setup](#setup)
42+
- [Contribution and Support](#contribution-and-support)
43+
- [License](#license)
44+
- [Contact](#contact)
45+
- [Learn More about `nextjs`](#learn-more-about-nextjs)
46+
47+
## About `Hashnode Blog Cards`
48+
49+
##### What is Hashnode?
50+
51+
> **Hashnode** is a free developer blogging platform that allows developers to publish articles on their own domain and helps them stay connected with a global developer community. This gives them a huge advantage: Google and other search engines send traffic directly to the authors' domain, and Hashnode community members discover articles on their feed.
52+
53+
##### What is Hashnode Blog Cards
254

3-
## Getting Started
55+
>⚡ The Hashnode Blog Cards is a set of GET requests which will fetch the Blogs from your Hashnode ids with few parameters and will create SVG cards to bring 😎 awesomeness to your blog links. 🎉
456
5-
First, run the development server:
57+
It can be added anywhere in Github, Hashnode, Devpost, Postman Documentation, or any markdown editor. It can also be added to any website with HTML syntax with just the img tag
658

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
59+
It is simple to use and the APIs can be explored with the `Hashnode Blog Cards API Playground`.
60+
61+
**Why wait? Straightaway go to the website and join the `Awesomeness`** 😎
62+
63+
[https://hashnode-blog-cards.vercel.app](https://hashnode-blog-cards.vercel.app)
64+
65+
<!--<p align="center">
66+
<a href="https://flexbox-guide.souravdey777.vercel.app" target="_blank">
67+
<img src="./public/flexbox-guide.gif" width=1280px title="Flexbox-Guide: A Flexbox Code Generator" alt="Flexbox-Guide"/>
68+
</a>
69+
</p>
70+
71+
<!-- ##### Video Demo-->
72+
## You can also Check my blog on `Hashnode Blog Cards`
73+
74+
[![Blog on Hashnode Blog Cards](https://hashnode-blog-cards.souravdey777.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/hashnode-blog-cards-reference-link-of-blogs-are-not-enough-give-your-blogs-what-it-deserves-with-blog-cards&large=true&theme=light)](https://souravdey777.hashnode.dev/hashnode-blog-cards-reference-link-of-blogs-are-not-enough-give-your-blogs-what-it-deserves-with-blog-cards)
75+
76+
## About The API Endpoints
77+
78+
#### How to use it?
79+
80+
---
81+
82+
#### getHashnodeBlog
83+
84+
This API endpoint will fetch a specific blog by its URL
85+
86+
```
87+
https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=light
1188
```
1289

90+
Response
91+
92+
![](https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=light)
93+
94+
#### List of parameters
95+
96+
- `url`= The URL of the specific blog
97+
98+
This is a mandatory parameter
99+
100+
eg. `https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool`
101+
102+
- `theme`= The theme of the Card.
103+
104+
This is not a mandatory parameter and the default value is `light`.
105+
Other values are possible values are `dark` or `blue`
106+
107+
- `large`= The size of the Card.
108+
109+
This is not a mandatory parameter and the default value is `false`. And when set to true gives a larger Card.
110+
111+
---
112+
113+
#### getHashnodeBlogBySequence
114+
115+
This API endpoint will fetch a specific blog by the Hashnode username of the author and the serial no of the blog starting from 1 being the latest.
116+
117+
```
118+
https://hashnode-blog-cards.vercel.app/api/getHashnodeBlogBySequence?username=Souravdey777&sequence=1&large=true&theme=light
119+
```
120+
121+
Response
122+
123+
![](https://hashnode-blog-cards.vercel.app/api/getHashnodeBlogBySequence?username=Souravdey777&sequence=1&large=true&theme=light)
124+
125+
#### List of parameters
126+
127+
- `username`= The hashnode username of the blogger.
128+
129+
This is a mandatory parameter.
130+
131+
eg. `souravdey777` this is my hashnode username.
132+
133+
- `sequence`= The serial no of the blog starting from 1 being the latest. Because of this parameter, the blogs will be changing when you add them to your website or Github profile whenever you add a new blog.
134+
135+
This is a mandatory parameter.
136+
137+
eg. `souravdey777` this is my hashnode username.
138+
139+
- `theme`= The theme of the Card.
140+
141+
This is not a mandatory parameter and the default value is `light`.
142+
Other values are possible values are `dark` or `blue`
143+
144+
- `large`= The size of the Card.
145+
146+
This is not a mandatory parameter and the default value is `false`. And when set to true gives a larger Card.
147+
148+
---
149+
150+
#### getLatestHashnodeBlog
151+
152+
This API endpoint will fetch a set of the latest blogs by the Hashnode username of the author and the limit up to which the blogs are needed
153+
154+
```
155+
https://hashnode-blog-cards.vercel.app/api/getLatestHashnodeBlog?username=Souravdey777&limit=3&large=true&theme=light
156+
```
157+
Response
158+
159+
![](https://hashnode-blog-cards.vercel.app/api/getLatestHashnodeBlog?username=Souravdey777&limit=3&large=true&theme=light)
160+
161+
#### List of parameters
162+
163+
- `username`= The hashnode username of the blogger.
164+
165+
This is a mandatory parameter.
166+
167+
eg. `souravdey777` this is my hashnode username.
168+
169+
- `limit`= The no of the blog starting from latest to the limit defined or all blog you have if the no of blog you have is less than the limit defined.
170+
171+
It is not a mandatory param and the default value is `3`. The maximum possible value is 6.
172+
173+
eg. `souravdey777` this is my hashnode username.
174+
175+
- `theme`= The theme of the Card.
176+
177+
This is not a mandatory parameter and the default value is `light`.
178+
Other values are possible values are `dark` or `blue`
179+
180+
- `large`= The size of the Card.
181+
182+
This is not a mandatory parameter and the default value is `false`. And when set to true gives a larger Card.
183+
184+
---
185+
186+
Now let's see what are the themes we have,
187+
188+
`theme=light`,`theme=dark` and `theme=blue`
189+
190+
<p align="center">
191+
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=light"/>
192+
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=dark"/>
193+
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=blue"/>
194+
</p>
195+
196+
---
197+
198+
Now let's see the different size we have
199+
200+
`large=true` and `large=false`
201+
202+
<p align="center">
203+
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=light"/>
204+
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=false&theme=light"/>
205+
</p>
206+
207+
**For 'img' tag custom size defined with `width` and `height` attributes.**
208+
209+
---
210+
211+
#### Markdown Syntax
212+
213+
```
214+
[![Hashnode Blog Card](https://hashnode-blog-cards.vercel.app/api/API_ENDPOINT?PARAMS)](BLOG_URL)
215+
```
216+
217+
#### HTML
218+
219+
```
220+
<a href="BLOG_URL">
221+
<img src="https://hashnode-blog-cards.vercel.app/api/getHashnodeBlog?url="https://hashnode-blog-cards.vercel.app/api/API_ENDPOINT?PARAMS" alt="Sourav Dey's Hashnode Blog Cards" />
222+
</a>
223+
```
224+
225+
## Features
226+
227+
- Dynamic URL creation
228+
- Dynamic SVG
229+
- Tool to share your Hashnode Blog
230+
231+
## Technologies
232+
233+
- nextjs
234+
- reactjs
235+
- nodejs
236+
- lottie animation
237+
238+
##### Dependencies
239+
240+
```
241+
"dependencies": {
242+
"axios": "^0.21.1",
243+
"next": "10.0.5",
244+
"prop-types": "^15.7.2",
245+
"react": "17.0.1",
246+
"react-dom": "17.0.1",
247+
"react-lottie": "^1.2.3"
248+
},
249+
"devDependencies": {
250+
"eslint": "^7.19.0",
251+
"eslint-config-prettier": "^7.2.0",
252+
"eslint-plugin-jsx-a11y": "^6.4.1",
253+
"eslint-plugin-prettier": "^3.3.1",
254+
"eslint-plugin-react": "^7.22.0",
255+
"eslint-plugin-react-hooks": "^4.2.0",
256+
"eslint-plugin-simple-import-sort": "^7.0.0",
257+
"prettier": "^2.2.1"
258+
}
259+
260+
```
261+
262+
## Setup
263+
264+
##### Clone/download the repository on your local machine.
265+
266+
`git clone https://github.com/Souravdey777/HashnodeBlogCards.git`
267+
268+
##### Install dependencies
269+
270+
`npm install` or `yarn install`
271+
272+
##### Run `dev` server on your local machine. 🚀
273+
274+
`npm run dev` or `yarn run dev`
275+
13276
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14277

15278
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16279

17280
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18281

19282
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
283+
284+
##### Or you can open it using Gitpod
285+
286+
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Souravdey777/HashnodeBlogCards)
287+
288+
## Contribution and Support
289+
290+
Loved it!. ⭐ `Star the Repository` and support the project.
291+
292+
Upvote in 🚀 **Product Hunt**.
20293

21-
## Learn More
294+
<a href="https://www.producthunt.com/posts/hashnode-blog-cards?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-hashnode-blog-cards" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=283707&theme=light" alt="Hashnode Blog Cards - ⚡ Give your blogs what it actually deserves with Blog Cards. | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
22295

23-
To learn more about Next.js, take a look at the following resources:
296+
297+
- [Ask for a new `feature` or `theme`](https://github.com/Souravdey777/HashnodeBlogCards/discussions/)
298+
299+
- [Open a Pull Request](https://github.com/Souravdey777/HashnodeBlogCards/pulls)
300+
301+
- [Raise an Issue](https://github.com/Souravdey777/HashnodeBlogCards/issues/new)
302+
303+
👨‍🚀 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
304+
305+
<a href="https://www.buymeacoffee.com/Souravdey777" target="_blank">
306+
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="160" >
307+
</a>
308+
309+
## License
310+
311+
📝 Distributed under the `MIT` License. See [LICENSE](https://github.com/Souravdey777/HashnodeBlogCards/blob/main/LICENSE) for more information.
312+
313+
## Contact
314+
315+
[![Portfolio](http://img.shields.io/badge/-Portfolio%20Website-ffffff?style=flat&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEYSURBVDiNxdHNK4RRFMfxzzMzhVJeirKwIZKVyG4WY22nrCwoG%2FkHbGYzO%2FkfLKysZSHFgmxtKCJkNTLEyEtZTGPx3KnpaWSS8q3bOffcc37ndC7%2FTYRldKKCdMJ%2Bxwbm8QJ57GMOV5jFaRD5iXyEHZzjCb24D7bYhEAugwOsNpHciCiNa7wlHiYTE%2FSggHEM4CTEsynxMmAME8GfRg6D4f6Kh%2BDf1HdKBTsaio4xhAscYhH96K4Ty2IF64hqAo%2FoQitmsIV2tKCMEs7QFk4ae6jWBEpYwzAy%2BAh%2BIYzfh6nQoBUj2BSUsjjCe5jkUrzUIj7rdvAs%2Fuo7bIu%2F%2BzYTOtaohIQkVew2iC9EWEJHg8dmKP%2By7g%2F5Ahl%2FO9wcY8OAAAAAAElFTkSuQmCC&logoColor=white)][website]
316+
[![LinkedIn](http://img.shields.io/badge/-LinkedIn-0077B5?style=flat&logo=linkedIn&logoColor=white)][linkedin]
317+
[![Twitter](http://img.shields.io/badge/-Twitter-1DA1F2?style=flat&logo=twitter&logoColor=white)][twitter]
318+
[![Mail](https://img.shields.io/badge/-Gmail-D14836?style=flat&logo=gmail&logoColor=white)][mail]
319+
[![Medium](http://img.shields.io/badge/-Hashnode-2962ff?style=flat&logo=hashnode&logoColor=white)][hashnode]
320+
[![Medium](http://img.shields.io/badge/-Medium-black?style=flat&logo=medium&logoColor=white)][medium]
321+
[![Coder Rank](http://img.shields.io/badge/-Coders%20Rank-67A4AC?style=flat&logo=CodersRank&logoColor=white)][codersrank]
322+
[![Product Hunt](http://img.shields.io/badge/-Product%20Hunt-DA552F?style=flat&logo=Product%20Hunt&logoColor=white)][producthunt]
323+
[![Speaker Deck](http://img.shields.io/badge/-Speaker%20Deck-009287?style=flat&logo=Speaker%20deck&logoColor=white)][speakerdeck]
324+
[![Instagram](http://img.shields.io/badge/-Instagram-E4405F?style=flat&logo=instagram&logoColor=white)][instagram]
325+
326+
[website]: https://souravdey777.github.io/Portfolio/
327+
[mail]:mailto:piyush.kolkata@gmail.com
328+
[twitter]: https://twitter.com/Souravdey777
329+
[codersrank]: https://profile.codersrank.io/user/souravdey777
330+
[youtube]: https://youtube.com/
331+
[instagram]: https://www.instagram.com/souravdey777/
332+
[linkedin]: https://www.linkedin.com/in/sourav-dey/
333+
[hashnode]: https://souravdey777.hashnode.dev/
334+
[medium]: https://medium.com/@Souravdey777
335+
[producthunt]: https://www.producthunt.com/@souravdey777
336+
[speakerdeck]: https://speakerdeck.com/Souravdey777
337+
338+
339+
## Learn More about `Nextjs`
340+
341+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
342+
343+
##### To learn more about `Next.js`, take a look at the following resources:
24344

25345
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26346
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27347

28-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
348+
##### To learn about `React`, check out the [React documentation](https://reactjs.org/).
349+
350+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/)
29351

30352
## Deploy on Vercel
31353

0 commit comments

Comments
 (0)