Introducing Projects
Present all your projects in style with a super customizable web app! ✨
Projects uses the GitHub API to list all your GitHub projects in a nice searchable grid.
Also shows pretty programming icons using devicons.
Inspiration
Needed a way to display all my projects, that should auto update from GitHub
Getting Projects
To get projects, follow these steps:
git clone https://github.com/2kabhishek/projects
cd projects
Setup Your Own Projects
You can set up projects for yourself by following these steps:
- Fork the repo: https://github.com/2kabhishek/projects
- Clone it locally / Open it in GitHub Codespaces
- Open up
script.jsand update theusernamevariable to your GitHub username. - Open up
index.htmland update thetitletag to make it your own. - You may also want to update the favicon by updating the
linktag inindex.html - Commit and push your changes
- Go to repo settings on GitHub, under
Pagesenable GitHub Pages.- Choose 'Deploy from a branch' with the
mainbranch and/as the root directory.
- Choose 'Deploy from a branch' with the
- Done!
The site should be live on https://<your-username>.github.io/projects
Number Of Repos
The number of repos shown changes with the maxPages variable, the GitHub API supports 100 repos per page max.
If you have less than 100 repos, set maxPages to 1, if you have 300 then 3.
You can also edit the fetch query to reduce the per page repo count.
There's no pagination, all repos show up on the same page.
Forked Repos
To show forked repos set hideForks = false in script.js
Authenticated Requests
If you are working locally and notice the API is not sending over data, it might be because of rate limit on GitHub API requests.
You can either wait for an hour or setup a personal access token on GitHub and pass that into the fetch request in script.js
Themes
Comes with a dark and light theme by default, depends upon your system and browser settings.
Edit the variables under :root in styles.css to change color scheme.
Programming Language Icons
This project uses Devicon for adding language icons, if the language name and icon are not
displayed, for any of your repos, update devicons mapping in script.js.
How it was built
I built Projects using HTML CSS JavaScript and Neovim
What I learned
- Learned about some quirks of the fetch API, during implementation of
maxPages. - Revisited Flex, box-shadow and some other CSS tricks
Hit the ❤️ button if you found this useful.
Top comments (30)
I updated the UI a bit. But now it's light themed. If you like I can make a pull request. Maybe to a new branch
link - chamodperera.github.io/projects/
Looks good! I might add a theme toggle, although the CSS is pretty basic here and just updating the root variables should take care of most of the styling.
Ok, sure
It is possible to do a new HTML file for this specific UI (unless you changed CSS, which would be even easier) where index.html redirects to it.
Yes it is possible , but I didn't changed the index.html much.
Would it be possible to add filtering and sortering options like most liked, by languages, by last update, hiding archived repos,...
This because when you have a lot of repositories, it's nice to be able to use filtering and sortering.
Thanks
Yes, it should be possible with some input tags and event listeners, the only reason I did not add it is that the repositories page on GitHub already has those capabilities.
I wanted to keep it as simple as possible, but if you want those features on your fork I'll be happy to help you any way I can!
I've asked because I've, myself, do something quite similar to your code : avonture.be/. Click on the Git image (top right) to get access to the source.
That script is also using the GitHub API and different calls to bypass the limitation of 100 repos. The script is quite simple and ... I've not implemented any sortering/filter but well a table of contents (which I'm using a lot when I search a repo on my page).
That looks good!
I took some time, forked the project and rebuild it in TypeScript and Sass ^^ github.com/JosunLP/projectDisplay
Nice! This is what I love about open source ✨
Updated my rewrite Fork to the newest changes. Light Theme based on System settings, filtering of Forks and display of stars and Fork sum is now available ^^
github.com/JosunLP/projectDisplay
Yup, I released the 2.0 release sometime back
This is great!
I have some suggestions. Permit me to get ambitious but I feel this can even get bigger and more fun 😀
Existing code base would require a framework and plenty of inspiration to deal with these but it would be a life saver for portfolio-lazy developers. 😀👍🏼
I might jump on with some pull requests when I get the time.
Great points, I'll look forward to those PRs!
I think that the stats of the user can be implemented easily with other open source such as github.com/DenverCoder1/github-rea... and many more!
Your Projects are so underrated 🥺. Anyone reading this, go star his projects 🙏! my page
Thank you! Means a lot
Projects 2.0 has been released:
What's Changed:
Thanks. Really helpful
Hope it was useful to you
Yep, I tried it out. chamodperera.github.io/projects/
Please let me know if you have any feedback or need help setting this up!
This might be interesting.
Thanks!
I would suggest working with environment variables, since it’s now really easy to (accidentally) commit your personal access token.
I didn't want to introduce any node dependencies in this repo that's why it uses PATs. Even if someone commits there keys, just deleting them from github or creating the keys for very short expiry date should do.