GitHub Repository Widget

Show off your GitHub projects with style using this lightweight widget. It's built to make your repositories look great on any website, with rich metadata and smooth animations that bring your code to life.

Quick Setup

Drop in a few lines of code and you're ready to go. The widget handles everything from fetching your repos to displaying them beautifully.

Smart Caching

Built-in caching keeps things fast and efficient, while making sure your repository data stays fresh and up-to-date.

Installation

To integrate the GitHub Repository Widget into your website, you have two options. This widget allows you to dynamically display your GitHub repositories with customizable styles and sorting options, enhancing the interactivity and visual appeal of your site.

Option 1: Install via npm

If you're using a build system or module bundler, you can install the widget using npm:

npm install repowidget

After installation, import and initialize the widget in your JavaScript code:

import { createRepoWidget } from 'repowidget';

createRepoWidget({
    username: 'your-github-username',
    containerId: 'my-repos'
});

Option 2: Include the Script Directly

Alternatively, you can include the widget's JavaScript file directly in your HTML. This method is suitable if you prefer not to use npm:

<script src="path/to/repoWidget.js"></script>

Then, initialize the widget in your script:

createRepoWidget({
    username: 'your-github-username',
    containerId: 'my-repos'
});

Choose the method that best fits your project setup to ensure the widget is correctly set up to retrieve and display your GitHub repositories.

Configuration

Basic Setup

Two things you'll need to get started:

  • username - Your GitHub username
  • containerId - Where you want the repos to show up

Layout Options

Control how your repos are displayed:

  • columns - How many repos per row
  • maxRepos - Total number of repos to show

Visual Tweaks

Make it match your site:

  • cardStyles - Custom card appearance
  • textStyles - Text colors and fonts
  • scaleOnHover - Hover animation size

Display Order

Choose how to sort your repos:

  • sortBy - Order by stars, forks, size, name or updated

Features

Smart Caching

Data is cached locally for 24 hours, keeping your site snappy while ensuring content stays fresh.

Language Colors

Automatically detects and displays the right colors for different programming languages.

Responsive Grid

Adapts seamlessly from mobile to desktop with a smart column layout that just works.

Custom Styling

Tweak colors, shadows, and animations to match your site's look and feel perfectly.

Smart Sorting

Display repos by stars, forks, size, or name - your choice, updated in real-time.

Rich Metadata

Shows stars, forks, and language stats to give visitors the full picture of your work.

Styling

Customize the appearance of the repository cards using the cardStyles and textStyles options. Example:

createRepoWidget({
    username: 'github-username',
    containerId: 'my-repos',
    cardStyles: {
        background: 'linear-gradient(145deg, #ffffff, #f0f0f0)',
        boxShadow: '5px 5px 15px #d1d1d1, -5px -5px 15px #ffffff'
    },
    textStyles: {
        titleColor: '#2d3748',
        descriptionColor: '#4a5568',
        iconColor: '#718096'
    }
});

Sorting Options

The widget allows sorting repositories by various criteria. Use the sortBy option to specify the sorting method:

  • stars: Display most starred repositories first (default)
  • forks: Sort by number of repository forks
  • size: Order by repository size
  • name: Alphabetical sorting by repository name
createRepoWidget({
    username: 'github-username',
    containerId: 'my-repos',
    sortBy: 'forks',
    maxRepos: 6
});

Responsive Design

The widget automatically adjusts its layout based on screen size. Customize the number of columns for different devices using the columns option:

createRepoWidget({
    username: 'github-username',
    containerId: 'my-repos',
    columns: { mobile: 1, tablet: 2, desktop: 3 }
});

Demo

The GitHub Repository Widget is highly configurable. You can edit its appearance and behavior using various options by using the settings button on the right.

Contributing

Ready to Help?

We welcome contributions from developers of all skill levels. Whether you're fixing bugs, adding features, or improving documentation - your help makes this widget better.

Quick Start Guide

1 Fork the repository
2 git checkout -b feature/amazing-feature
3 git commit -m 'Add amazing feature'
4 git push origin feature/amazing-feature
5 Open a Pull Request