🍌 Banana Contribution

A Vue 3 component library for displaying GitHub contribution graphs in your Vue projects.

Features

• Lightweight and easy to use
• Support for multiple time ranges (yearly, monthly, weekly)
• Customizable themes and styles
• Dark mode support
• Compatible with Vue 3 and TypeScript
• Personal access token authentication for GitHub API

Installation

npm install @banana-contribution/core
# or
yarn add @banana-contribution/core
# or
pnpm add @banana-contribution/core

Quick Start

Full Usage

<template>
  <BaContribution
    username="your-github-username"
    personal-token="your-github-personal-token"
    mode="full"
    type="yearly"
    level="medium"
    theme="primary"
    name="My Contributions"
    notice="Check out my GitHub activity!"
    :border="true"
    border-color="#e1e4e8"
    background-color="#ffffff"
    :dark-mode="false"
    :show-time-switch="true"
    @select="handleSelect"
  />
</template>

<script setup lang="ts">
import { BaContribution } from '@banana-contribution/core'

const handleSelect = (item: { time: string; count: number }) => {
  console.log(`Selected: ${item.time} with ${item.count} contributions`)
}
</script>

Lite Mode

<template>
  <BaContribution
    username="your-github-username"
    personal-token="your-github-personal-token"
    mode="lite"
    type="monthly"
    level="low"
  />
</template>

<script setup lang="ts">
import { BaContribution } from '@banana-contribution/core'
</script>

API Reference

BaContribution Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | username | string | - | GitHub username (required) | | personalToken | string | - | GitHub personal access token (required) | | mode | 'lite' \| 'full' | - | Display mode: lite for simple view, full for detailed view | | type | 'yearly' \| 'monthly' \| 'weekly' | - | Time range for contribution data | | level | 'none' \| 'low' \| 'medium' \| 'high' | - | Contribution level filter | | theme | 'primary' \| 'yellow' \| 'red' \| '' | - | Color theme for contribution items | | name | string | - | Display name for the contribution graph | | notice | string | - | Notice message to display | | border | boolean | - | Whether to show border | | borderColor | string | - | Border color (CSS color value) | | backgroundColor | string | - | Background color (CSS color value) | | darkMode | boolean | - | Enable dark mode | | showTimeSwitch | boolean | - | Show time range switcher |

BaContribution Events

| Event | Payload | Description | |-------|---------|-------------| | select | { time: string, count: number } | Emitted when a contribution item is selected |

Individual Item Usage

You can also use individual contribution items:

<template>
  <BaItem
    shape="circle"
    theme="primary"
    time="2024-01-15"
    :count="5"
    content="5 contributions"
    @toggle="handleToggle"
  />
</template>

<script setup lang="ts">
import { BaItem } from '@banana-contribution/core'

const handleToggle = (item: { time: string; count: number }) => {
  console.log(`Toggled: ${item.time}`)
}
</script>

BaItem Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | shape | 'circle' \| 'square' | - | Shape of the contribution item | | theme | 'primary' \| 'yellow' \| 'red' \| '' | - | Color theme | | time | string | - | Time label (e.g., date) | | count | number | - | Number of contributions | | content | string | - | Tooltip content (optional) |

BaItem Events

| Event | Payload | Description | |-------|---------|-------------| | toggle | { time: string, count: number } | Emitted when item is clicked |

GitHub Personal Access Token

To use this component, you need a GitHub personal access token:

1. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Generate a new token with public_repo scope
3. Use the token in the personalToken prop

Configuration Examples

Dark Mode

<template>
  <BaContribution
    username="your-github-username"
    personal-token="your-github-personal-token"
    mode="full"
    type="yearly"
    level="medium"
    :dark-mode="true"
    background-color="#0d1117"
    border-color="#30363d"
  />
</template>

Custom Theme

<template>
  <BaContribution
    username="your-github-username"
    personal-token="your-github-personal-token"
    mode="full"
    type="monthly"
    theme="yellow"
    level="high"
  />
</template>

Weekly View

<template>
  <BaContribution
    username="your-github-username"
    personal-token="your-github-personal-token"
    mode="lite"
    type="weekly"
    level="low"
  />
</template>

License

MIT

Author

Fluffy_CX

Made with ❤️ for Vue 3 community