# tha-hashnode-widget

> A very simple but responsive widget for loading blog posts from Hashnode in your personal website.

Latest version **1.0.1** (published 2022-06-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install tha-hashnode-widget
pnpm add tha-hashnode-widget
yarn add tha-hashnode-widget
bun add tha-hashnode-widget
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-06-12 |
| First published | 2022-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 675.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Haseeb Ahmed |
| Maintainers | thehaseebahmed |
| Keywords | hashnode, widget, blog |

## Links

- npm: https://www.npmjs.com/package/tha-hashnode-widget
- Repository: https://github.com/thehaseebahmed/js-hashnode-widget
- Homepage: https://github.com/thehaseebahmed/js-hashnode-widget#readme
- Issues: https://github.com/thehaseebahmed/js-hashnode-widget/issues
- npm.io page: https://npm.io/package/tha-hashnode-widget

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-06-12
- 1.0.0 — 2022-06-12

## README

<div id="top"></div>
<!--
*** Thanks for checking out the Best-README-Template. If you have a suggestion
*** that would make this better, please fork the repo and create a pull request
*** or simply open an issue with the tag "enhancement".
*** Don't forget to give the project a star!
*** Thanks again! Now go create something AMAZING! :D
-->

<!-- PROJECT SHIELDS -->
<!--
*** I'm using markdown "reference style" links for readability.
*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
*** See the bottom of this document for the declaration of the reference variables
*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
*** https://www.markdownguide.org/basic-syntax/#reference-style-links
-->

[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]

<!-- PROJECT LOGO -->
<br />
<div align="center">
  <h3 align="center">Hashnode Widget</h3>
  <p align="center">
    A very simple but responsive widget for loading blog posts from Hashnode in your personal website.
    <br />
    <br />
    <a href="https://thehaseebahmed.com/#blog-posts">View Demo</a>
    ·
    <a href="https://github.com/thehaseebahmed/js-hashnode-widget/issues">Report Bug</a>
    ·
    <a href="https://github.com/thehaseebahmed/js-hashnode-widget/issues">Request Feature</a>
  </p>
</div>

<!-- TABLE OF CONTENTS -->
<details>
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#about-the-project">About The Project</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#development-server">Development Server</a></li>
        <li><a href="#production-build">Production Build</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
    <li><a href="#contributing">Contributing</a></li>
    <li><a href="#license">License</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#acknowledgments">Acknowledgments</a></li>
  </ol>
</details>

<!-- ABOUT THE PROJECT -->

## About The Project

![Product Name Screen Shot][product-screenshot]

I wanted to embed my latest blog posts from my Hashnode blog to my personal website but unfortunately I could not find a plugin to do so. This seemed like something that other could benefit from as well therefore I went ahead and created one!

<p align="right">(<a href="#top">back to top</a>)</p>

### Built With

This project uses the following set of frameworks/libraries:

- [TypeScript](https://www.typescriptlang.org/)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- GETTING STARTED -->

## Getting Started

To get a local copy up and running follow these simple example steps.

### Prerequisites

- Node JS
  You can download and install the lastest version from the [official website](https://nodejs.org/en/).

### Development Server

1. Clone the repo
   ```sh
   git clone https://github.com/thehaseebahmed/js-hashnode-widget
   ```
2. Install NPM packages
   ```sh
   npm install
   ```
3. Start the dev compiler

   ```sh
   npm run dev
   ```

4. In a new tab (or window), start the local web server

   ```sh
   npm run serve
   ```

<p align="right">(<a href="#top">back to top</a>)</p>

### Production Build

1. Clone the repo
   ```sh
   git clone https://github.com/thehaseebahmed/js-hashnode-widget
   ```
2. Install NPM packages
   ```sh
   npm install
   ```
3. Create the build
   ```sh
   npm run build:prod
   ```

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- USAGE EXAMPLES -->

## Usage

I'm in process of publishing this to NPM and getting this hosted with CDN JS, as soon as that process is complete, I'll update the usage information here.

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- CONTRIBUTING -->

## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (`git checkout -b yourUsername/my-amazing-feature`)
3. Commit your Changes (`git commit -m 'Added an amazing feature'`)
4. Push to the Branch (`git push origin yourUsername/my-amazing-feature`)
5. Open a Pull Request

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- LICENSE -->

## License

Distributed under the MIT License. See `LICENSE` for more information.

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- CONTACT -->

## Contact

Haseeb Ahmed - [@thehaseebahm3d](https://twitter.com/thehaseebahm3d) - thehaseebahmed@outlook.com
<br/>
Project Link: [https://github.com/thehaseebahmed/js-hashnode-widget](https://github.com/thehaseebahmed/js-hashnode-widget)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- ACKNOWLEDGMENTS -->

## Acknowledgments

Here are a few resources that I found helpful during the development of this plugin and would like to give credit to.

- [Hashnode API - How To Display Your Blog Articles On Your Portfolio Page](https://catalins.tech/hashnode-api-how-to-display-your-blog-articles-on-your-portfolio-page)

<p align="right">(<a href="#top">back to top</a>)</p>

<!-- MARKDOWN LINKS & IMAGES -->
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->

[contributors-shield]: https://img.shields.io/github/contributors/thehaseebahmed/js-hashnode-widget.svg?style=for-the-badge
[contributors-url]: https://github.com/thehaseebahmed/js-hashnode-widget/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/thehaseebahmed/js-hashnode-widget.svg?style=for-the-badge
[forks-url]: https://github.com/thehaseebahmed/js-hashnode-widget/network/members
[stars-shield]: https://img.shields.io/github/stars/thehaseebahmed/js-hashnode-widget.svg?style=for-the-badge
[stars-url]: https://github.com/thehaseebahmed/js-hashnode-widget/stargazers
[issues-shield]: https://img.shields.io/github/issues/thehaseebahmed/js-hashnode-widget.svg?style=for-the-badge
[issues-url]: https://github.com/thehaseebahmed/js-hashnode-widget/issues
[license-shield]: https://img.shields.io/github/license/thehaseebahmed/js-hashnode-widget.svg?style=for-the-badge
[license-url]: https://github.com/thehaseebahmed/js-hashnode-widget/blob/main/LICENSE
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/thehaseebahmed
[product-screenshot]: ./docs/screenshot.png

---
_Source: https://npm.io/package/tha-hashnode-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
