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.

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:

Go to your GitHub settings: [https://github.com/settings/tokens](https://github.com/settings/token)
Click on "Generate new token"
Give the token a description and only select the "public_repo" scope.
Click "Generate token"
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'	'medium'	The size of the commit bars.
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

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" class="custom-class" />

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.

JSPM