Repowidget NPM

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