Skip to content

Latest commit

 

History

History
155 lines (99 loc) · 8.67 KB

README-before.md

File metadata and controls

155 lines (99 loc) · 8.67 KB

Angular Headless Hashnode

Discord Open Source Project

Overview

The Angular Headless Hashnode Project aims to seamlessly connect your Angular application to the Hashnode GraphQL database, providing a template for integrating Angular with a headless Hashnode setup.

In other words - this project is very much like the starter kit that Hashnode provides, except that this project uses Angular for the frontend and deployment is set to be done through Netlify.

Project Goals

  • Develop a flexible template for Angular integration with headless Hashnode.
  • Connect the Angular app to Hashnode's GraphQL database to retrieve posts and blog data.
  • Responsive layout improvements for different devices
  • Support Angular v17 and up

Existing Setup & Features

LIVE VERSIONS

angular headless hashnode dark angular headless hashnode light

You can see the live versions on the DEMO SITE

Angular App Versions

angular-v17 - has no UI libraries LIVE

angular-v17-AnguMAT - has Angular Material LIVE

angular-v17-PrimeNG - has PrimeNG LIVE

Contributing

Most of the open issues feature engaging YouTube videos, providing step-by-step guidance on implementing requirements. Dive in and contribute without hesitation – your skills are valued, and you can make a meaningful impact! Join us in building something great together.🌟

the default branch is develop!

Fork the repository

  1. Fork the monacodelisa/angular-headles-hashnopde repo.

Working on Issues

  1. In your local or forked repository, make your changes in a new git branch:

    git checkout -b my-fix-branch develop

  2. Create your patch, including appropriate test cases.

  3. This is a monorepo that includes 6 versions of the app, make sure that you are working on the correct app version.

  4. Follow our Coding Rules.

  5. Commit your changes using a descriptive commit message as specified in Commit Message Guidelines.

    git commit --all

    Note: the optional commit --all command line option will automatically "add" and "rm" edited files.

  6. Push your branch to GitHub:

    git push origin my-fix-branch

  7. In GitHub, send a pull request to angular-headless-hashnode:develop.

Using the app with your Hashnode Blog

This app is still in its early stages, and it currently has limited features. At this point, I strongly encourage you to contribute to its development before actively using the app.

Fork the repository

  1. Fork the monacodelisa/angular-headles-hashnopde repo.

  2. Go to your chosen app version, and inside the graphql.operations.ts file, replace the URL of the blog to point to your blog.

  3. All three app versions can be deployed to Netlify or Vercel, so you just need to select an app version and deploy from an existing GitHub repo. (Your forked repo)

Be advised that a lot of features are yet to be implemented.

Run locally

  1. Clone this repository.
git clone https://github.com/your-username/angular-headless-hashnode.git
cd angular-headless-hashnode
  1. Select one of the available app versions
cd <chosen-app-version>
  1. Install dependencies.
npm install
  1. Run the app
npm start

or

ng serve

Contributors ✨

Esther White
Esther White
💻 🚧 👀 ✅ 🖋 🤔 🧑‍🏫 🎨 🚇		 cleancodecraft
cleancodecraft
🚇 ⚠️ 💻 📝 💡 🤔 🧑‍🏫		 czBalazs98
czBalazs98
💻 🎨 🤔		 Jhonatan Soto
Jhonatan Soto
💻 🎨 🛡️ 🤔		 Little Red Coding Hood
Little Red Coding Hood
💻 📝 🖋 🎨 🛡️ 🤔		 Sashikumar Yadav
Sashikumar Yadav
💻 🎨 🤔

This project follows the all-contributors specification. Contributions of any kind are welcome!

Celebrate Your Achievements!

If you've added exciting features or functionalities that the project currently lacks, we'd love to see what you've accomplished. Share your contributions, suggestions, or improvements to help enhance the overall app experience. Your input plays a crucial role in making the application even better, and we're eager to see the innovative strides you've taken!