Documentation
DevShelf Documentation
Everything you need to know about creating, customizing, and embedding your GitHub project showcases.
🚀 Getting Started
1. Create Your Account
Visit DevShelf and click "Login with GitHub" to authenticate with your GitHub account.
2. Select Your Repositories
Browse through your public repositories and select the ones you want to showcase. You can select multiple repositories for a comprehensive portfolio.
3. Generate Your Showcase
Click "Create Showcase" to generate your unique showcase URL and embed code. Your showcase will be instantly available and ready to share.
🌐 Widget Integration
Basic Integration
Add your showcase to any website with just two lines of code:
<script src="https://devshelf-nishant.vercel.app/widget.js"></script>
<div class="devshelf-widget" data-showcase-id="YOUR_SHOWCASE_ID"></div>Features
- Automatic theme detection (light/dark mode)
- Responsive design for all screen sizes
- Real-time GitHub data updates
- Cross-domain compatibility
- No iframe restrictions
🎨 Customization
CSS Customization
The widget automatically adapts to your website's theme. You can also customize it with CSS:
.devshelf-widget-container {
max-width: 800px;
margin: 0 auto;
}
.devshelf-showcase {
border-radius: 16px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}Available Classes
.devshelf-widget-container- Main container.devshelf-showcase- Showcase wrapper.devshelf-user-profile- User profile section.devshelf-projects-grid- Projects grid
🔧 API Reference
Showcase API
Retrieve showcase data via our public API:
GET https://devshelf-nishant.vercel.app/api/showcase/[id]Response Format
{
"user": {
"login": "username",
"name": "User Name",
"avatar_url": "https://...",
"bio": "User bio",
"public_repos": 10,
"followers": 50,
"following": 30
},
"repositories": [...],
"createdAt": "2024-01-01T00:00:00Z"
}