github-contrib-globe-badge

This project offers a dynamic GitHub contribution analytics badge that visually represents the geographical distribution of contributions made by the owner's repositories. The badge is updated daily and features an interactive Cobe globe hosted on GitHub Pages that can be accessed by simply clicking the badge.

Key Features

• Visual Representation: The badge displays a rotating dotted world map with country markers, flags, commit counts, and percentage contributions for each country.
• Interactive Globe: By clicking on the badge, users can interact with a detailed globe, which allows for dragging and zooming to explore contributions across the globe.
• Group Data: Contributions from the same country are represented by a single marker and label, aggregating counts and links to all relevant repositories. Markers for regions without recognized country affiliation are displayed separately, enhancing clarity.

How It Works

• The project utilizes GitHub Actions to aggregate data from commits where the specified GitHub user is either the author or credited via a Co-authored-by: trailer.
• It resolves the original repository for each commit, caching results to optimize performance. Public GitHub profile locations of repository owners are geocoded to correlate contributions to specific countries.
• The badge and analytics data are regenerated daily, ensuring that users always have the most current information.

Adding the Badge to Your Profile

To personalize the badge for your GitHub profile, forking the repository is required. Once forked, the workflow will automate badge generation linked to your username. The badge can be embedded in your README as follows:

[![My contributions badge](https://raw.githubusercontent.com/<YOUR_USERNAME>/github-contrib-globe-badge/main/badge.gif)](https://<YOUR_USERNAME>.github.io/github-contrib-globe-badge/)

Customization Options

The date range for contributions can be adjusted within the generator script. Further customization of the interactive globe's appearance can be done through the globe options and styling in the index.html file.

Development Setup

To get started with local testing, install the necessary packages and run the generator with your GitHub username:

npm install
GITHUB_ACTOR=<YOUR_USERNAME> node badge/generate-badge.js

The generator writes both badge.gif and data.json, which are used to reflect contribution data.

Credits

This project leverages the powerful Cobe WebGL library for globe rendering, along with flag images sourced from flag-icons, providing an engaging user experience while honoring each contributor's effort on GitHub.