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
git checkout -b feature/amazing-feature
git commit -m 'Add amazing feature'
git push origin feature/amazing-feature