Saturday, July 30, 2022
HomeWordPress DevelopmentI Made a Internet App to Showcase all of your GitHub Initiatives...

I Made a Internet App to Showcase all of your GitHub Initiatives 😍✨




Introducing Initiatives

Current all of your initiatives in type with an excellent customizable net app! ✨

Initiatives makes use of the GitHub API to listing all of your GitHub initiatives in a pleasant searchable grid.
Additionally reveals fairly programming icons utilizing devicons.



Inspiration

Wanted a technique to show all my initiatives, used my portfolio’s challenge part as inspiration.



Getting Initiatives

To get initiatives, comply with these steps:

git clone https://github.com/2kabhishek/initiatives
cd initiatives
Enter fullscreen mode

Exit fullscreen mode



Setup Your Personal Initiatives

You’ll be able to simply arrange initiatives to point out your personal repos.

  • Fork the repo
  • Clone it
  • Open up script.js and replace the username variable to your GitHub username.
  • Push your modifications
  • Go to repo settings on GitHub and allow GitHub Pages.

The location must be stay on https://<your-username>.github.io/initiatives

Here is the profile for @sindresorhus

sindresorhus's projects



Quantity Of Repos

The variety of repos is managed by the maxPages variable, the GitHub API helps 100 repos per web page max.
When you have lower than 100 repos, set maxPages to 1, when you have 300 then 3.

You can too edit the fetch question to scale back the per web page repo depend.

There isn’t any pagination, all repos are proven on the identical web page.



Authenticated Requests

If you’re working regionally and see the API isn’t sending over knowledge, it is likely to be due to price restrict on GitHub API requests.

You’ll be able to both look forward to an hour or setup a private entry token on GitHub and go that into the fetch request in script.js



Viewing initiatives

Open index.html in your favourite browser or go to 2kabhishek.github.io/initiatives.



The way it was constructed

Initiatives was constructed utilizing HTML CSS & JavaScript.
It was constructed on Neovim and the python http server.
Makes use of GitHub API for knowledge and Devicons for programming icons.



What I discovered

  • Discovered about just a few quirks of the fetch API, particularly implementation of maxPages.
  • Flex, box-shadow and another CSS methods have been revisited.



What’s subsequent

Add extra languages to devicons if mandatory.

Hit the ⭐ button when you discovered this handy.

Showcase All Your Initiatives 🛍️🎇

Introducing Initiatives

Current all of your initiatives in type with an excellent customizable net app!

Initiatives makes use of the GitHub API to listing all of your GitHub initiatives in a pleasant searchable grid
Additionally reveals fairly programming icons utilizing devicons.

Inspiration

Wanted a technique to show all my initiatives, used my portfolio’s challenge part as inspiration.

Getting Initiatives

To get initiatives, comply with these steps:

git clone https://github.com/2kabhishek/initiatives
cd initiatives
Enter fullscreen mode

Exit fullscreen mode

Setup Your Personal Initiatives

You’ll be able to simply arrange initiatives to point out your personal repos.

  • Fork the repo
  • Clone it
  • Open up script.js and replace the username variable to your GitHub username.
  • Push your modifications
  • Go to repo settings on GitHub and allow GitHub Pages.

The location must be stay on https://<your-username>.github.io/initiatives

Here is the initiatives web page for @sindresorhus

sindresorhus's projects

Quantity Of Repos

The variety of repos is managed by the maxPages variable, the GitHub…

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments