Github Commit Calendar

🔥 ⭐️ 🚀 😎 💖 🛠️

A Svelte component that displays a user's GitHub commit history as a calendar. You can customize the appearance of the calendar using the available props.

Table of Contents

• Installation
• Usage
• Props
• About

Installation

npm install github-commit-calendar

Usage

Import the component and use it in your Svelte application:

<script>
  import { GithubCommitCalendar } from "github-commit-calendar";
</script>

<GithubCommitCalendar gitToken={your_github_token} />

Obtaining a GitHub Token

To use this component, you need a GitHub token with minimal permissions. Follow these steps to generate a token:

1. Go to your Github Settings
2. Click on "Generate new token"
3. Give the token a description and only select the "public_repo" scope.
4. Click "Generate token"
5. Copy the generated token and pass it as the gitToken prop to the component.

Note: Keep your token secure and do not share it publicly. 🚨

Props

Prop	Type	Default	Description
gitToken	string	-	Required. Your GitHub token with "public_repo" scope.
color	string	'rgba(187, 53, 220)'	The color of the commit bars.
size	'small', 'medium', 'large', number	'medium'	The size of the commit bars. The value can either be a string of the specific size, or it can be a number in px.
background	string	'rgba(187, 53, 220, .1)'	The background color of the calendar.
gap	number	2	The gap between each cell in px.
hover	boolean	false	The hover animation of the calendar.
key	boolean	true	Key to be shown or not shown.
months	boolean	true	Months to be shown or not shown.
weekdays	boolean	true	Weekdays to be shown or not shown.

Rest Props

Any additional props will be passed down to the top-level div element of the component. This can be useful for adding custom styles or attributes.

<GithubCommitCalendar gitToken={your_github_token} id="custom-id" style="custom styles" />

About

The Project

This project aims to provide a simple, customizable Svelte component for visualizing GitHub commit history. It was designed to be lightweight and easy to integrate into any Svelte application.