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:

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.