Githubcommits
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.
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
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
- 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', 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.
