GitHub Repository Widget

A lightweight, customizable widget to showcase GitHub repositories on any website. Features responsive design, caching, and beautiful repository cards with rich metadata.

Installation

Install the package via npm:

npm install repowidget

Usage

UMD (Browser)

Include the widget in your webpage using the UMD bundle:

<div id="my-repos"></div>
<script>
    import { createRepoWidget } from 'repowidget';
    RepoWidget.createRepoWidget({
        username: 'github-username',
        containerId: 'my-repos',
    });
</script>

ESM (Module)

Use the widget as a module:

<div id="my-repos"></div>
<script type="module">
    import { createRepoWidget } from 'repowidget';
    createRepoWidget({
        username: 'github-username',
        containerId: 'my-repos',
    });
</script>

Configuration Options

| Option | Type | Default | Description | | -------------- | ---------------- | ------------------------------------ | -------------------------------------------------------- | | username | string | required | Your GitHub username | | containerId | string | required | ID of the container element | | columns | object | {mobile: 1, tablet: 2, desktop: 3} | Number of columns for different screen sizes | | cardStyles | object | {} | Custom styles for repository cards | | textStyles | object | {} | Custom styles for text elements | | scaleOnHover | number/boolean | 1.05 | Scale factor on hover (0 or false to disable) | | maxRepos | number | columns.desktop * 2 | Maximum number of repositories to display | | sortBy | string | 'stars' | Sort criteria ('stars', 'forks', 'size', 'name') |

Styling Examples

Custom Card Styles

createRepoWidget({
    username: 'github-username',
    containerId: 'my-repos',
    cardStyles: {
        background: 'linear-gradient(145deg, #ffffff, #f0f0f0)',
        boxShadow: '5px 5px 15px #d1d1d1, -5px -5px 15px #ffffff',
    },
});

Custom Text Colors

createRepoWidget({
    username: 'github-username',
    containerId: 'my-repos',
    textStyles: {
        titleColor: '#2d3748',
        descriptionColor: '#4a5568',
        iconColor: '#718096',
    },
});

Features

• Responsive grid layout
• Local caching for better performance
• Language color coding
• Multiple sorting options
• Hover animations
• Configurable display limits

License

This project is licensed under the MIT License. See the LICENSE file for details.