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

Features

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 }
});

Contributing