The GitHub Contributors JavaScript library provides an easy way to display a list of contributors for a GitHub repository on your website. The library offers various display modes, including grid, slideshow, and list. This document will guide you through the usage and features of the library.
Getting Started
To get started, you need to include the GitHub Contributors library in your HTML document. You can import the library using the following script tag:
<script src="https://bashamega.github.io/scripts/cdn/libs/js/contributingjs/index.js"></script>
Usage
The GitHub Contributors library requires a container element in your HTML to display the contributors. You can use the following code as a template:
<div id="contributors" data-githuburl="https://github.com/username/repo" data-type="grid" data-imgprofile="true" data-link="true"></div>
<script src="https://bashamega.github.io/scripts/cdn/libs/js/contributingjs/index.js"></script>
Replace "https://github.com/username/repo" with the URL of the GitHub repository you want to fetch contributors from. The attributes data-type, data-imgprofile, and data-link control the display and behavior of the contributors' list.
JavaScript API
The GitHub Contributors library offers a JavaScript API that allows you to programmatically fetch and use contributor data. You can use the following function to fetch contributor data:
const contributors = GITHUBFETCH("https://github.com/username/repo");
Replace "https://github.com/username/repo" with the URL of the GitHub repository.
Display Modes
Grid Mode
Grid mode displays contributors' avatars and usernames in a grid layout. Each contributor container is clickable and opens the contributor's GitHub profile in a new tab.
Slideshow Mode
Slideshow mode presents contributors' avatars and usernames in a slideshow format. The slideshow automatically transitions between contributors at a defined interval. Navigation dots allow manual selection of contributors.
List Mode
List mode shows contributors' avatars and usernames in a vertical list. Each contributor container is clickable and opens the contributor's GitHub profile in a new tab.
Error Handling
The library incorporates error handling to display an error message in case of issues with fetching or displaying contributors' data.
Conclusion
The GitHub Contributors JavaScript library simplifies the process of fetching and displaying contributors' data from GitHub repositories. It offers multiple display modes and customization options, making it easy to integrate contributors' information into your website. Just remember to include the library script and configure the container element attributes according to your needs.
Top comments (0)